Using images on your website is a critical part of your page content in today’s online environment. Images can be seen to have a language or their own, they can say so much and compliment your written content to the point that what could potentially be a “boring” page of text miraculously become much more interesting; as that old saying goes “A picture paints a thousand words”. Images can also help to disperse large paragraphs of content and give it a better opportunity to be read in its entirety. However, all images and graphics also increase the size of your web pages which inevitably have to be downloaded by your user’s device. Page load times must be as fast as possible, your users will begin to become frustrated as your page load times increase due to unoptimized content; this can also have an adverse effect on search engine rankings, so optimising images is an important part of maintaining your website.
In this article I will be taking you through the different methods for optimising images for your WordPress site:
- File formats for images
- Images and WordPress
- Optimise images before upload
- Optimise images after upload
An additional issue to also consider is the number of images on the whole website, too many unoptimized images will use up the storage space on your hosting server and/or package very quickly and increase your bandwidth usage to service your websites page requests. These little things often become the big things that destroy the user experience of your website and could also be the blame for hosting cost increases. This is where optimising your images can help you avoid all the little pitfalls that could await your new or current website.
File Formats for Images
There are a variety of file format to choose from when saving your images and they are all optimised for a specific use. You want picture perfect images on your website so you’ve got to use the right file format for the right application. An incorrect format can produce a poor quality or enormous file size, this is not what we are looking for. So, what are the file formats best suited for website applications?
JPEG is one of the most widely used image formats, it is predominantly used for photographs and larger pictures in general. This is due to the JPEG format offering great flexibility and a wide range of compression ratios which return a wide variety of file sizes.
GIF is frequently used for low-quality images that possess only a few colours and are more widely used as the file format for animated files. They hold all the required information for animation frames and timing in one little file. If you make a moving picture in an image editor like Photoshop, you’ll be able to export it as a GIF. GIF’s also have what is known as an ‘Alpha channel’ that can be transparent, so you are able to place an image over a background of any colour. The GIF file format is also best suited for use with simple icons and web graphics, the images can be shrunk down with the compression techniques available from the GIF format.
PNG was created as an improved replacement for GIF’s. It is very similar in ability to the JPEG file format but like GIF’s has an Alpha channel making transparent backgrounds possible. The main difference between JPEG and PNG is that the file sizes post-compression are likely to be much larger. If image quality is more important than file size for items such as company logos PNG is the best format to use.
SVG is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. This image format can be scaled to any size without losing quality, so it is resolution independent. This image format is ideal for logos and icons, as it is only usable with drawings/animations, rather than pictures.
Images and WordPress
Using WordPress compared to many other CMS systems has a major advantage when taking images into account; this is called the thumbnail feature. This functionality creates three different sizes of whatever image you upload, small, medium and large as standard and administrators can adjust the pixel sizes of these three thumbnails by changing the settings from within the WordPress dashboard. Typically, people who populate website content will link to the main or full-size image, but this is not favourable, whereas WordPress gives the option of which image size to insert.
Technically when WordPress created the additional three thumbnails it reduces the sizes of the uploaded images in regard to width and height but does not compress them, so the way to optimise properly is to create the image at the pixel size you require for the content and then upload it to your website.
Optimise Images Before Upload
Now that the technical considerations have been covered, it’s on to optimising your images before you upload them to your website. In Photoshop, you can save for web and your image quality is reduced so that it can be uploaded to the internet. However, many people do not have Photoshop; it is an expensive piece of software specifically developed for professional designers and photographers, that being said there are plenty like the ones detailed below that are free to download.
Local Software
- ImageOptim is excellent free tool for publishing images on the web it easily shrinks images just like the “Saved for Web” feature in Photoshop.
- Radical Image Optimization Tool or RIOT for short is a free image optimizer that lets you visually adjust compression parameters.
Online Software
- Web Resizer is easy to use and above all, it’s free. It’s a very handy tool if you want a quick shortcut to save images for the web without Photoshop.
- Pic Resize is another excellent and free tool for picture resizing and saving without Photoshop.
Optimise Images After Upload
As stated above optimising images before they are uploaded to your website is a much better and far more efficient approach to image optimisation but that being said we cannot ignore that fact that tools and facilities are available to optimise your websites imagery after they have been uploaded to the website. The following suggestions are suitable for the website content populators that have never optimised images before and are now wanting to make a website faster and more reliable.
WordPress has a plugin available to it called “Smush Image Compression and Optimisation” that resizes and optimises all images that have been uploaded to your website previously. Simply set a max width and max height and large images will scale down as they are being compressed, stripping hidden bulky information from the images and reduce file size without losing quality. The plugin uses external servers to do all the hard work owned by the plugin develops WPMU DEV. It is highly recommended that this type of optimisation is processed during low traffic periods.
There are alternative plugins available to WordPress users that do not rely on any external services which include the following (both free to download):
- EWWW Image Optimiser
- Imsanity
Again, these tools should be used when website traffic is low preferably overnight.
Conclusion
The importance lies in the fact that you optimise images before you uploaded them to your website. People will appreciate the fact that you took the time to considered website page load times, as well as bandwidth usage and overall improving the user experience. All this work also come as a benefit when regarding the search engine rankings your website receives as they should improve simply because your pages load faster.
