Image Optimization

Images, more often than not, are bottlenecks in resolving your content and cannot only be taxing on your bandwidth, but it can also lead to your visitors leaving your site. I'm Richard Hunt, a Support Specialist here at WP Engine, and I'll be walking you through our suggestions on optimizing your images, both in terms of your image file types and specific image optimizations, all in the effort to provide a faster experience for your visitors.

0:40s
First, the Raster Image processor. Raster Images can be identified by their file types such as JPEG, PNG, and GIF. What makes this processor unique is that it stores information for each pixel of the image. This can be a red, blue, or green pixel, as well as a transparent pixel. To show you, we're going to use a Lite-Brite, where an empty peg hole represents a transparent pixel.

When you want transparent backgrounds around shapes that are not perfect rectangles, PNG files are a way to accomplish this. One thing to keep in mind is that PNG files often impact site load times due to their large size. So unless it is absolutely necessary, avoid using them.

PNG files can be optimized by setting the quality percentage when the image is saved in programs like Photoshop. There is also a website called optimizilla.com where you can upload an image and get returned back the optimized PNG.

We'd recommend using Raster Images for anything you've taken a picture of, images you've found online, or high quality photography. Logos, high resolution clip-art, and fonts can all be handled through the next type of image format, Vector Images.

1:33s
Vector Images can be identified by their file types such as SVG, EPS, and AI. Please note that EPS and AI are work files and should always be exported to either SVG or a raster image, before uploading to your site.

This is when things get a little nerdy... Where Raster Images store information for each pixel, a vector image actually creates the image through mathematics based on predefined points. Because these points are relational to each other they can be scaled to any size without image degradation. Also, because vector images are built in mathematics, they can be built in three dimensions.

2:04s
Next, we're gonna look at the hazards of using Large Images.
While a 4k image may look nice on your 27 inch monitor, one thing to consider is that when a visitor loads a page with that image, the browser will render the file at it’s full resolution FIRST and THEN scale it down to fit on their screen, which may be in a browser of a mobile device not capable of anything larger than 400 pixels. This is wasted storage space, server resources, and most importantly time a visitor is waiting for your site to render. To get around this, you'll want to export images at the size they will be displayed.

For instance, if you have an area on the site that will fill 900 by 600 pixels, your image should be sized out at 900 by 600, rather than having your CSS scale down a much larger image. Alternatively, you can save multiple sized versions of one image to display, based on the media device. This can be accomplished through using a CSS Media Query.

Since this topic is a bit more advanced, we'd recommend you do some independent research or look at hiring a developer to implement this type of change.

Best practices when exporting your images would be to keep your image’s file sizes under a couple hundred kilobytes. Typically you can reduce the size well below this threshold by saving your images as “web optimized” JPEGS or PNGs... Its also important to understand that when an programs like these optimize your files, it will save them at 72 pixels per inch, which is web standard.

3:16s
Now let's talk about the two most popular image compression algorithms Lossless and Lossy.
LOSSLESS compression can be best described as a light compression to your images. This image compression format will retain the overall quality of an image to produce a high quality end result. Or in other words, you’ll LOSE less quality.

LOSSY format compression will strip away the EXIF and meta data in an image file. This would be photo related information such as GeoLocation and the camera settings used when the picture was taken.
LOSSY also reduces the data in an image based on your export settings to produce file sizes that are much smaller without totally compromising the visual quality of the image.

To recap these two formats, LOSSLESS will lightly compress an image and retain all other information. LOSSY will reduce image quality based on the percentage set as well as removing all non-visual information, such as where the image was taken and at what shutter speed was selected.

Typically image compression is available in all image editors like Adobe Photoshop or GIMP. There is usually a Safe For Web option that allows you to change the quality of an image until the desired results are achieved. For instance an image that is saved as a 100% quality JPG could be two or three times the size of a 50% quality reduction. Often times even a 50% quality reduction may not make a large visible difference.

4:19s
Alternatively, there are a number of plugins that can optimize images automatically as you upload them into the media panel of WordPress. One of the more popular image optimizing plugins, WP Smush, will automatically optimize your images and keep your library clean without much of a manual process. Once an image is uploaded, the plugin itself will compress the images based on the settings you define in the plugin. When you initially install WP Smush you will need to go through your existing images to optimize them.

Luckily, WP Smush has a one click option just to do that! After installation of the plugin hover over the media sidebar and you will notice the option "WP Smush". Click that and you will see at the bottom of the destination page that there is a "Bulk Smush" button. That will go through all existing images and optimize them.

That should wrap up our Image Optimization segment within our WP Engine Speed Series. Please continue on with our next video in this series all about offloading static resources, like images, to a CDN.

Unoptimized images often can be bottlenecks on your complete load time causing higher bounce rates and lower conversions.

In this video of the series, we will be covering the fundamental technologies behind file processors and image files types. Also, we will be discussing how sizing your images properly and optimizing them for the web can easily give you a boost in web page speed.