Once upon a time, about 20 years ago, there was Mosaic. Mosaic is often credited with starting the World Wide Web as we know it today. It was the first browser that allowed images to be displayed inline with text, rather than having a separate window popup for each image. Although it wasn’t the first graphical browser, it caught on with the wider public.
Back then colour screens with 256 colours were relatively new, and we were all on dial-up Internet, the aim was to get your images to download, full stop. How they looked was secondary.
Fast-forward to today and things are very different. As people buy increasingly higher resolution screens, we need to make our images look great. On the other hand, Google would like your Web pages to load in one second, even on mobile devices. So how do you make your images look good and load fast? In this article, we’re going to cover the basics of optimizing your images for WordPress.
Is an Image Really Required?
Of course the first question you should ask is do you really need an image when text, symbols, and simple logos can be replaced with web fonts and other CSS effects that can possibly do the job better, faster, and in a responsive way. Any text element such as banners and buttons that are created from images should be replaced with non-image formats. However, if you need to use an image read on.
Raster Versus Vector
Raster images are made up of a grid of a fixed number of pixels. They don’t scale well, and enlarging the image will result in jaggies and pixelation as the grid pattern becomes visible. Images created in a digital camera and programs such as Adobe Photoshop are raster images. The image quality setting will determine the size of the saved file. This could be as large as 7360 x 4912 pixels with a high end SLR camera; such an image would be well over 36MB in size. Clearly this is way larger than required for WordPress use.
Vector images, on the other hand, are constructed mathematically. They work particularly well for simple images such as logos, text, icons, etc. They are mathematical and when they are zoomed in on or resized the browser recalculates the mathematics, and the image will remain sharp.
Such images are created in programs such as Adobe Illustrator and saved in the SVG (Scalable Vector Graphics) format for Web use. However, whilst WordPress rejects the SVG format due to security issues (in theory an SVG file could contain malicious code) there are plug-ins that allow you to overcome this limitation. Having said that allowing SVG files is something that should restricted to admin level users only. Another consideration is that most browsers only offer partial support for the format, so stay within the 1.1 standard. If you are using this format consider ‘minifying’ the images to strip any unnecessary meta data.
JPEG, GIF or PNG?
Modern browsers support a range of raster image formats; JPEG/JPG is the most popular. There is also GIF that supports 256 colours that is often used for advertising. PNG (Adobe’s Portable Network Graphics) overcomes many of the limitations of JPEG and GIF formats and was supposed to become a standard Web image format, but has mixed traction.
Each format has pluses and minuses. JPEG’s can be compressed to a high degree for small file sizes, and if the dimensions are modest, they can look more than acceptable. JPEG uses a lossy compression format similar to MP3 audio files. During compression, information is thrown away and cannot be recovered. Highly compressed JPEGs have the drawback of high levels of artifacts (speckles and blotches in large flat areas of colour, and blurry edges). They also lack the ability to support transparency. This means any cut out area will default to white, so unless your page background is also white, the image will be in a white box.
GIFs are great for creating text and simple graphical images with limited colour – hence their use for serving banner ads. They are easy to animate, but again they don’t support transparency so the background of the image you create must match the page colour.
The PNG format will produce the highest quality images as it is a lossless compression format. However, PNG images can rarely be compressed as small as the equivalent JPEG. The format supports transparency so whatever is behind the cut out area is visible.
For some further reading, check out this article on SitePoint that covers the difference between JPEG, GIF or PNG by James George.
Although the best tool for working with raster images is Adobe Photoshop, there are plenty of other tools such as a free program, GIMP. There are also online services you can use to resize and compress raster images.
The following steps are based on Photoshop CC.
Sizing the Image
When working with raster images from the camera, the first thing to do is to reduce the pixel dimensions. This is achieved through the ‘Image’ and then ‘Image Size’ menu. Remember to ‘Constrain the Aspect Ratio’ and change one of the dimensions to retain the original shape.
The dimensions should match the dimensions given in the HTML/CSS code of the page. There is little advantage to making the dimensions larger as the browser will resize the image as it renders the page; this will slow down response times.
A further consideration is the reduction of the Bit Depth. Better cameras now allow 14 bits per channel raw processing. Photographers often process their raw images in 16 or 32 bit mode to retain the best quality until final output is required. That amounts to a huge colour range that won’t be reproduced on the sRGB colour space of most screens. If the image is not already in this 8bit format, reduce the image to 8 bit per channel mode by selecting ‘Image’ the ‘Mode’ then ‘8 Bits/Channel’. This will immediately reduce the file size substantially.
Although I recommend resizing your images prior to uploading them to WordPress, you can use the WordPress Media Library to edit the dimensions of your image. For example, this image below is 1000 x 621. If I only want the image to be say 300 x 186, I simply click on the ‘Edit Image’ button below.
This will then bring up a window with a range options for editing the image.
I then update the ‘Scale Image’ field with ‘300’ and it will automatically predict the ‘186’ pixels and then click ‘Scale’ to see the image dimensions reduce and then ‘Update’ to save these settings.
You can now see that the new dimensions of the image are saved at 300 x 186 and there has also been a reduction in the file size from 913KB to 110KB.
‘Save As’ Versus ‘Save for Web’
Ideally your photographic images will have been saved in the camera as raw files and have been processed in the TIFF format in 16 Bit mode. Once you have resized the image and reduced the bit depth you will now face choices as to the final file format and file size.
As you can see above, the WordPress Media Library file uploader has a default file size limit. This is way bigger than you would want for dropping an image into a post or even a banner. Limits aside, you should ideally keep your images as small as possible.
In fact, the WordPress Codex recommends that large high quality images should ideally be around 60-100KB while smaller images should ideally be 30KB or less.
Doing a ‘Save As’ will only do part of the job. If you are not using Photoshop, most editors will offer some basic options, the file type, and if JPEG, quality and size options. You will need to do some experimenting to see what combination of setting results in a satisfactory balance between size and quality.
‘Save for Web’ on the other hand will give you a wide range of options and a preview of the potential results. Other than reducing the Bit depth you can resize the image in the ‘Save for Web’ dialog box. The controls are fairly self-explanatory.
I tend to check the ‘Progressive’ option so that that people on slow connections will at least see the image begin to appear. You should also ensure that ‘Convert to sRGB’ is checked so that you can preview any unexpected colour shifts.
You should note the potential file size below the preview image as you adjust the size and compression of the image in JPEG mode, but look closely at the image to ensure that the artifacts don’t become to noticeable. Although some versions of Photoshop will warn that the file is too large, it will still process the image.
Remember always to work with copies of your files. Every time you save an image to JPEG format you are throwing away image information that can’t be recovered.
What to Do about Images Already Being Used on Your WordPress Site
If you are reading this article and not sure what to do about the hundreds or even thousands of images you already have on your site, all is not lost.
The first step is to run a page speed test to try and isolate any issues. There are plenty of tools out there which can help you, and you can find out more from this recent article on SitePoint about Speeding Up Your WordPress Site. This article also reviews the benefits of caching plugins and Content Delivery Networks (CDNs) which are also worth investigating if your site is image heavy.
There are also a range of handy WordPress bulk image compression plugins that are worth checking out (it’s worth noting that most plugins will only apply to media library files). Here are just a few:
Summary
So to summarise, here is a quick check list of things to consider when optimizing your images for your WordPress site:
- Do you need an image where HTML5/CSS3, Web fonts/symbols can be used?
- Can you use a vector image instead of a raster image?
- Consider the most appropriate raster image format: GIFs are the smallest, but are limited to 256 colours, don’t scale, and don’t support transparency; JPEGs compress to a small size, don’t scale or support transparency; PNG images retain the best image quality and support transparency, but don’t compress to the same degree, and don’t scale.
- Work with the highest bit depth and full pixel dimensions until the compression stage.
- If using Photoshop use the ‘Save for Web’ option rather than simply ‘Save As’.
- Work in a consistent manner and make notes of your settings, once you develop a consistent workflow, Image Optimization can become a quick and simple process, that will lead to fast page loading.
Andrew RenautAndrew Renaut was a professional photographer before moving into the world of museums. He worked on some of the first websites for museums in Australia and the UK. Andrew then taught Information Technology, Media, and Photography at senior secondary level for over a decade. Recently he has been producing 50 Lux magazine and doing WordPress development. You’ll find Andrew at lots of technology and photography events around Melbourne, Australia.
