Media

Media Library » 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.

Table of Contents

An Example of an Unoptimized Image

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 ↑

Reduce Image Sizes With Free Software

If you’re looking for a quick way to reduce the 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:

Reduce the 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. Click 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 the 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.

Here’s a comparison of the results:

The left image has a file size of 1,072KB. The right image has a file size of just 384KB yet there is no noticeable loss of quality!
Reduce the Image Size With ImageOptim

We can make the file size even smaller using ImageOptim (Mac app or web service)

Open ImageOptim and choose a quality of 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 beforehand.

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 your site using the WordPress App, the app has the option to optimize images.

In the WordPress app for iPhones, you can set the Max Image Upload Size so the original file is resized automatically when you upload it. This option can be found by going to My Site and clicking the profile icon in the top right, then choosing App Settings.

In the WordPress app for Android, click on your profile icon in the top right corner and choose App Settings. There, enable Optimize Images to resize and compress images on upload.


↑ 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 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 tools 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