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.

New to optimizing images for the web?

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.

There is a simple tool, called Shrink O’Matic, whose only function is to resize the image and optimize the file size for web delivery. It is very simple to use, with only a few controls to apply to the image.You can download the program for free from their website, and there are some basic instructions for installation and use.

There is another simple tool called webresizer that is completely online and does not require the installation of software. Please keep in mind that your files will be uploaded to their server in order to complete the resizing.

*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