Media

Media Library »Image Optimization

The Importance of Image Optimization
Reducing Image Sizes With Free Software
Image Optimization on Mobile
Retina Displays
Image Editing Software

The Importance of Image Optimization

Optimization refers to the process of making files load quickly by decreasing their file size, while retaining the quality of the image.

Images that aren’t optimized before we upload them for use on a site can hurt a site’s loading speed and cause visitors to leave the site. This is a big problem when trying to build a brand and grow site traffic. File size and image quality are two factors that can make a big impact on page load speed.

How can we resolve this?

Take this small print quality image for example. It was downloaded from Unsplash.com and is 2048 × 1286 at 240 DPI (Dots Per Inch). The file size is a hefty 1.1MB.

Let’s take the same image and decrease the dimensional size and DPI before loading into our Media Library. We’ll get the same result with less unnecessary image weight.


↑ Table of Contents ↑

Reducing Image Sizes With Free Software

If you’re looking for a quick way to reduce image size, you can use free third party tools, such as this one. If you want more control over how the image is optimized, continue reading for a more in depth overview.

We’ll use two pieces of free software to reduce our image size. You can download them here:

Reducing Image Size With GIMP

To reduce the image size:

  1. Open image in GIMP.
  2. Click on Image in the toolbar, then select Scale Image.
  3. In the image size, change the width to 1920px (or your own width)
  4. Select Scale
  5. Select File in the toolbar. Then select Export As.
  6. Name to your file ending with a “.jpg”
  7. Select Export
  8. In dialog box that opens, change Quality to 60.
  9. Click Advanced Options.
  10. Change Subsampling to 4:2:0 (chroma quartered)
  11. Click Export

These settings are just a good starting place. Feel free to adjust them as you see fit.

If the results are less than around 250KB, the image has been optimized enough.

Using ImageOptim

We can make the file size even smaller using ImageOptim.

Open ImageOptim and choose these settings:

  • Quality 60% for each file type

After adding these settings, right click on the image you want to optimize and select Open with ImageOptim.

ImageOptim will automatically reduce the image to the settings we have chosen.

This change cannot be reversed. Make sure to have a backup of the image before so make sure to have a backup of the image.

If using a PC, upload the image to the ImageOptim website and they will provide a download of the optimized file.

The website version is not free and has a monthly cost. They do offer a free trial.


↑ Table of Contents ↑

Image Optimization on Mobile

If posting to a site using the WordPress.com App, there are a few apps for the iPhone that can help with the size issue presented by uploading directly from a mobile device phone.

ImgCompactor is a free iPhone app and allows reduction of the image size by ½, ⅓, ¼, and ⅕. It also makes a duplicate and adds the reduced image to image library on your device. The image can then be uploaded to the site from there.


↑ Table of Contents ↑

Retina Displays

Retina displays have a much higher pixel density than regular displays, which can cause images with a regular pixel density to appear as fuzzy. To prevent this, if we detect a Retina display we serve the image at double the size so it displays with maximum sharpness. This only works if the image that appears in your media library is larger than the size that appears on your site.

Even at double the maximum display size on your blog an image file should still be significantly smaller than at the full resolution used by your camera, so you can optimize your images and have them look good on Retina displays.


↑ Table of Contents ↑

Image Editing Software

Other image editing software may have easy options to size and compress a batch of photos very quickly. Packages such as Photoshop / Paint Shop Pro will also work, but there are a few more free options including:

There are also web-based services you can use:

Still confused?

Contact support.

Not quite what you're looking for?

Get Help