Working with Images

Images are a great addition to a blog post, as they can help to illustrate a point, and help to break up the monotony of an all-text entry by adding some personality.

Because a blog is a web-based system, it is extremely important to resize and optimize all images for web delivery before uploading them!

This keeps your blog loading fast, and ensures you don’t eat up your blog quota too quickly.

Resizing and Optimizing

Image Size

Your blog’s content area has a limited width, taking into account any sidebars that make up the full width on the right and/or left. That means you are limited to a certain width of image. It is important to make a version of your image that fits within this space before uploading it to the website.

To get the image to the proper width, you may choose to crop it, removing any unnecessary parts around the perimiter of the image. Otherwise, you can resize/scale the image.

Since different blog themes may have space for different sizes of image, you may need to try a couple of different sizes in order to find the best one.

Don’t forget to delete any old files from the Media folder, otherwise you are using your blog quota for images that aren’t even being used!

Optimizing File Size and Format

Once you have cropped and/or resized your image to the appropriate size, you will need to save or export it in a format that is web-friendly. One of the most important parts of this process is to bring down the quality of the image, and therefore lower the filesize.

Your image file should be no larger than 100KB, preferably no larger than 50KB.

In general, JPG is the format used for photographic images, while GIF or PNG are used for graphics.

General Steps to Optimizing Images

These steps are useful for anyone who is comfortable using an image editing program, such as Photoshop, Photoshop Express, iPhoto, Gimp, etc. Since each program is different, the instructions below are quite general – referring to the task, instead of the specific name of a tool or button in the program. Please refer to the help documents in your software as needed.

Before uploading an image to your WordPress blog:

  1. Open your image in your image editing software of choice.
  2. Look at the dimensions of your image. Your blog post can only display the image at a certain size, so a 1000×1000 image will need to be resized in order to fit.
  3. Take a look at the image – is there anything that you can cut off of the image? Cropping tools are great for helping you focus on the most important part of the image.
  4. Once the image is cropped as much as it needs to be, it needs to be resized. Your image editing program will have tools that allow you to resize an image to an appropriate size.
  5. Lastly, save the file to a lower resolution web-ready format. In general, photographs should be exported as .jpg files, while graphics work better when exported as .gif files, but there are also quality settings that you should compare and consider.

Need a quick way to resize an image?

If this is your first time having to worry about things like image file size and formatting for the web, and aren’t comfortable using image editing tools like Photoshop, this is a great first step.

Adobe has an online image editing tool, called Adobe Photoshop Express, which will allow you to quickly and easily resize your image and reduce the file size.

  1. Go to this page in your web browser and upload your image file:
  2. Start with the “Resize image” settings. Since you will be posting this image to a blog, you likely don’t need anything wider than 1000 px. Set the width as you like, then click outside of that box. It will automatically adjust the height so that the proportions of the image are maintained (you don’t want to stretch or squish your image).
  3. Click the “Resize Image” button at the bottom of the page to save the changes and resize the image.
  4. Click the “Download” button at the top.
  5. If your image is a photograph, be sure the file format is set to JPG. If it is a graphic (i.e an illustration or a logo), set it to PNG.
  6. Look at the quality – the file size is listed below. Slide the quality marker so that the image is below 100 kb. 
  7. Download the image to your computer.

Take a look at the image – if the quality was degraded a bit too much, you can try resizing the image again with a higher quality setting. The goal is to keep the file size as low as possible while maintaining a decent looking image.

I have only highlighted the resizing and downloading options of this tool – be sure to check out some of the other available options, like cropping!

*Please note: Ryerson can make no claims or promises regarding the software described here, as it is not within our control. This is being offered as an option for you to consider, and use at your own discretion.

Additional Resources