Follow

Optimizing your images for the web

  • Applies to: All Services
    • Difficulty: Easy
    • Time Needed: 10-30
    • Tools Required: Photo Editor, Plugins

Overview

The size of a page can often correlate to the speed and loading time of a website. For example: a page that is 1MB will generally load much faster than a page that is 4MB.

Images can be a large contributor to page size, so it's in the best interest of your site to optimize images as much as possible. This not only creates a faster, more enjoyable viewing experience for your users, but can also improve your SEO in search results. The following guide will provide some tips and best practices on how to optimize images for web browsing.

Please keep in mind that troubleshooting the configuration/functionality of third-party applications is not covered by our statement of support. These resources were provided as a courtesy to assist you to the extent of our abilities. For more information on our statement of support, feel free to click here.

Speed Test

A good start is to run speed tests on your pages to determine if image optimization is an option. Some popular third-party speed test sites include GTMetrix and Pingdom.

GTMetrix in particular can provide a list of recommended images to be optimized.

For reference, it's best to keep the page size as small as possible (around 1MB-2MB). You'll want to keep this total page size in mind when deciding how large your images are.

What is image optimization?

Optimizing images essentially translates to reduction of file size. This can be done through "compression."

The two primary types of compression for images are:

  • Lossy: Has the ability to greatly reduce the size of the image by removing some of the data. Reducing the size too much can cause some loss in quality, but its possible to achieve a happy medium of quality and size.
  • Lossless: Does a better job retaining quality by only removing metadata. But the level of size reduction that is possible is much smaller.

 

Both options are helpful in image optimization. The method you choose will ultimately depend on the type of website you are running.

  • If you are running a general blog or store website, then lossy might be a good option.
  • If you are a photographer or graphic designer where every pixel matters, then lossless may be the better option.

Example: Below is an example of a lossy compressed image using the program, Gimp.

sidebyside-text.jpg
With "high compression" you'll see that a noticeable amount of quality was lost. So this would be an example of compression taken too far. However, with "medium compression" we were able to take an image from 6.8MB to 516KB while retaining most of the quality (that's a 92.4% reduction in size!).

Photo Editing Software

Photo editing programs can be used to compress an image. You may know of some popular premium software, such as Adobe Photoshop. But there is also free photo editing programs, such as Gimp, which can perform similar types of compression. For Mac users, the Preview application is also a great free option for exporting/compressing.

The image size can be compressed by importing the photo, then using the Export feature to select a desired image quality.

GIMP:

Gimp-2.png

Mac Preview:

Iphoto-2.png

Scaling

When using photo editing software, you can use the opportunity to resize an image's resolution. Many professional high-quality photos may come in much larger resolutions than what is needed. So the image can be reduced to scale to be more usable and optimized.

Example: This image was originally 5488x3659 (that's way too large to fit on this article page!). So we scaled it down to 549x366. This not only made it fit to the page, but also reduced the file size!

Mini.jpg

Original: 9.9MB (5488x3659)
Scaled: 42KB (549x366)
(That's a 99.5% reduction in file size while retaining much of the quality)

For WordPress 4.4+ this is less important as updates were made to service images to scale through CSS.

File Types

You will also want to consider which type of compression different files can perform:

  • Lossy: JPEG, GIF
  • Lossless: RAW, BMP, and PNG

Some file types like JPEG, GIF, or PNG do have the capability to do both types of compression in certain scenarios.

If for some reason you want to change the file type of an image, you can do so using photo editing software or third-party file converters.

Image Optimizer Plugins

For WordPress, there are a number of third-party image compressor plugins which can automate a large portion of the compression process for you. There are plugins that compress images as you upload them, as well as plugins that can compress images that are already uploaded.

For Non-WordPress sites you can contact the developer or your website or contact the Support team of your CMS to see what plugin options may be available for you.

Keep in mind, relying on plugins solely for compression will not always optimize images to their full potential. We advise compressing the images manually as much as possible using a photo editor, and then compressing them further using a plugin.

There are many free and premium plugins you can choose from. When picking your plugin however, a feature to look for are plugins that compress the images on a third-party server, as those will help reduce the load and disk space on your server.

You will also want to take into consideration the type of compression the plugin uses (lossy vs losseless which we discussed in the previous sections).

For WordPress users, below are some popular plugins for image optimization:

Do keep in mind that these are third-party plugins and are not developed or supported by (mt) Media Temple. So if you require assistance with these specific plugins, you will want to contact your website's developer or the support staff of the appropriate plugin.

Additional Resources

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments

Powered by Zendesk