Media

Media Library »Image Optimization

The Importance of Image Optimization.

Images that aren’t optimized before we upload them for use on a site can actually hurt the site’s loading speed and cause us to lose visitors. This is a big problem when we are 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.

When we decrease the file size for images before we insert them,
uploads and pages will load faster.

How can we resolve this?

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

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 the size of images with free, open source software.

Software used:

GIMP

ImageOptim

These are free to use and are Open Source.

  1. Open image in GIMP.
  2. Click on Image in the toolbar, then Click Scale image.
  3. In the image size, change the width to 1920px (or your own width)
  4. Click Scale
  5. Click File then click Export As.
  6. Name to your file ending with a “.jpg”.
  7. In the next dialog use these settings as a starting point.
    Quality = 60%
    Open Advanced
    Change Subsampling to 4:2:0 (chroma quartered)
  8. Click Export.

If the results are less than 250KB, we are done.

Next, we’ll make the file size even smaller using ImageOptim.

Open ImageOptim and choose these settings:

  • Quality 60% for each file type

On a Mac, right click on the image and open with ImageOptim.

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

** Note this is a destructive change to the image and cannot be reversed so make sure to have a backup of the image.

On a Mac:

  1. Right-click the image and select “Open with” and choose ImageOptim.
    We can select more than one file or even a folder.
  2. Watch the file size shrink!

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

Note: The website version is not free and it has a monthly cost but it can be used for 30 days at no charge according to the site.

↑ Table of Contents ↑

Image Optimization on Mobile

Lastly, If posting to a site using the handy 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.

One that has been used frequently is ImgCompactor. It is free in the App store and allows reduction of the image size by ½, ⅓, ¼, and ⅕. It also doesn’t use the original image. It 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, but that 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

Some have easy options to size and compress a batch of photos very quickly. Packages such as Photoshop / Paint Shop Pro will do it, but there is no need to spend money on doing this. These are free:

Still confused?

Contact support.

Not quite what you're looking for?

Get Help