How to Optimize Images for the Best Performance
Images play a big role on the web.
Visual content accounts for the majority of web page sizes and has been this way since the introduction of image elements in HTML web design. As much as 64% of average web page size is taken up by images. Working to optimize images not only reduces web page size but significantly improves website performance / load times.
And even though the technology used to run a website continues to evolve, in the last 6 years the average web page size has increased by more than 300%. An example of this humongous growth would be any content oriented website that deals with multiple pieces of content on a single page, eCommerce websites, for example, rely on a lot of visual content to display products, which can quickly stack up to a huge web page size due to the fact that a single eCommerce category could have more than 20 products to show.
Image optimization should be taught in all books, courses, and tutorials that are related to creating websites.
In this guide, you will learn about different image types (formats) and their compression capabilities, and how to optimize your images for best performance.
- Popular Image Types and Their Usability
- Image Performance in Responsive Web Design
- Optimizing Your Images for Performance
Popular Image Types and Their Usability
Statistics report from HTTP Archive suggest that the most commonly used image forms on the web are JPG (46%), PNG (29%), and GIF (23%) followed by SVG (1%), and WebP (0~%).
JPG uses lossy compression, this means that resizing a JPG image to be smaller in size is going to come with a cost of a reduction in image quality. PNGs and GIFs use what’s known as lossless compression, lossless means that file size can be reduced without compromising image quality. Your images should be unique and for unique images, you can use a tool like reverse image search.
So, why are JPGs so popular, despite their huge size and the fact that JPG images lose their quality with size reduction? JPG files are more popular amongst publications and photographers who want to maintain pristine photo quality. JPGs are more suitable for compressing images that deal with extended varieties of colors and shapes.
Think of it this way, JPGs are photographs that have been taken in a real-life scenario, while PNGs are usually digitally crafted images for the purpose of digital use only.
And even if you think that all of your JPGs are safely optimized for optimal performance, do run your website and websites pages through PageSpeed Insights — this will give you a better idea of whether there are any files left to optimize.
Here we have an example of running the NY Times website through PageSpeed Insights:
While not significant, for all of the images present on the homepage, an 81% reduction for all present images can be achieved. Little improvements like this can lead to much higher performance benchmarks in the bigger picture.
Image Performance in Responsive Web Design
Before we dive into the list of tools that can be used for image compression, it’s worth talking a little bit about Responsive Web Design, and its impact on mobile devices as far as imagery content is concerned.
Creating one single image for all devices will have repercussions, in the form of giving mobile users unnecessarily large image files, when in fact there is an alternative. Yes, scaling images for different device sizes is more work on your part, but if performance is what you wish to improve, it pays to do the job.
How to serve responsive images on your web pages?
There is a HTML attribute called srcset which allows you to specify multiple versions of an image, and have the browser decide which one is going to be the best in any particular situation. An example of srcset in action would look like:
<img src=”big_image.jpg” alt=”three different image sizes in a single img element attribute” />
What happens here is that the browser automatically decides on the width of a device that is accessing your web page, and delivers to it the best suitable image from the images you have specified using srcset attribute.
The benefits here are invaluable, with the cost of having to recreate an image in multiple variations. Anyone who cares about their readers enough will find no problem with this approach.
WordPress users should know that WordPress does the process of image resizing automatically whenever you upload new pictures through the media manager, which you can read more about on WordPress Codex Post Thumbnails page. So essentially, you will need to add only the srcset attribute.
Optimizing Your Images for Performance
All technicalities aside, we are set to move forward with image performance, and learn about the tools that are being used in real world scenarios, not only by WordPress bloggers but anyone who maintains a website with visual imagery as part of the content.
Consider Vector Graphics (SVG)
Vector graphics is the creation of digital images through a sequence of commands or mathematical statements that place lines and shapes in a given two-dimensional or three-dimensional space. In physics, a vector is a representation of both a quantity and a direction at the same time. In vector graphics, the file that results from a graphic artist’s work is created and saved as a sequence of vector statements. For example, instead of containing a bit in the file for each bit of a line drawing, a vector graphic file describes a series of points to be connected. One result is a much smaller file. — TechTarget
On the internet, vector graphics are used through the SVG (Scalable Vector Graphics) format that’s native to the web. Unfortunately, SVG is still being heavily implemented to have true cross-browser support, but you can see the following report from Can I Use:
SVG graphics are supported by all major browsers, including mobile operating systems. So, what are the real benefits of using vector graphics, instead of let’s say JPG or PNG?
- Vector graphics are independent of quality from resolution size. You can scale a vector image in any direction, and it will not lose any detail of the picture quality. Using a single SVG for elements such as website logo can drastically improve resource conservation, and image delivery performance.
- Vector images are usually layered and allow easy editing with the use of popular vector software, such as Illustrator, and Sketch for Mac users.
- Vectors are usually much, much smaller in size compared to the likes of PNGs or JPGs.
The emphasis here is on graphic elements such as brand logo, font icons, and general visual elements that are created in the digital environment.
Image Compression Tools (Command-line)
Moving forward, let’s take a look at the most popular image compression tools for popular image formats. These will also be the tools that you will most likely only use in the scenario of having a dedicated/VPS web server for your website because all the following tools run directly from the command-line interface.
Compressing Images on the Web
Transporting GIF and other universal image format compression algorithms to the web isn’t an easy task, which is why there are far greater numbers of image compression apps built for JPG and PNG, and one of my all time favorites is TinyPNG; image compression platform inbuilt in a browser application, capable of compressing both JPG and PNG files. These guys have really put in the effort to make this the best image compression resource that you will find on the web. On average, my images get 60%~ reduction in size when put through TinyPNG.
TinyPNG, which also can convert JPG files, can compress up to 20 files at a time — although, recently I have been able to upload as many as 30 files directly through the website, so experiment with it yourself.
If you’re a content creator for the web, or generally work with images during your workflow, then TinyPNG will be an amazing addition to your existing list of tools for optimizing content performance. A separate plugin for Photoshop and a Developer API are also available.
However, I want to continue with the post to mention image compression tools that are in direct relation to WordPress, and will help you as a WordPress blogger to automate the process of image compression, and put behind the manual labor for good.
Image Optimization & Automation for WordPress
Automation is great because it helps to eliminate the need for manual processing, and instead, the objective — image compression — can be left in the hands of an algorithm. And since image compression and web performance are very big topics on the web, you will find no shortage of WordPress plugins, services, and platforms that provide some form of image optimization capabilities. I would like to show you some of my personal favorites.
Hosting a service that optimizes image for performance isn’t a cheap venture. This involves using computer power to compress images on a large scale, based on the amount of requests that are incoming from bloggers at any given time. This is why we first explored some amazing standalone tools that you can teach yourself to use. The following plugins all provide a basic plan with hundreds of free images that you can process, but if you’re running a content heavy website, premium pricing plans are also available. Photon is forever-free because of being developed by Automattic.
Optimole is a free WordPress plugin that will reduce your website images without altering their quality. In fact, an optimized image will look exactly the same as its original version, only it will be lighter. The plugin uses both lossless and lossy optimization to process the images and works on autopilot. Once installed, it will do the job all alone – you don’t have to do extra work.
Optimole resizes, compresses, and serves your images via CDN in any location. Moreover, the plugin was optimized to deliver the same results on all the devices and lets you track and monitor its activity from a friendly and modern dashboard.
Photon is an Automattic-developed Jetpack plugin that can help to scale your visual content on your WordPress blog. This is achieved through filtering content and serving more personalized versions for different width browser versions. The cons of Photon is that it currently doesn’t offer cache invalidations, meaning that visual content will be cached permanently unless you initiate a filename change. Images will also not be upscaled if using Photon, but this makes sense because upscaling makes your images lose a lot of quality. Good choice for WordPress.com users, and general newcomers to blogging, pro’s should use any of the following tools.
TinyPNG had already received a mention earlier and is now being featured for the second time. What makes TinyPNG unique is their algorithm, which has now been brought to WordPress in the form of a plugin. The plugin will automatically compress any new JPG or PNG images that you upload to your WordPress Blog using the Media File Manager, with the limitation of 500 image compressions during a one-month period. A premium pricing plan, that you can customize to the number of images you plan to compress, is available, and will provide no restrictions whatsoever.
Using the TinyPNG plugin will save you immense amounts of time that you would otherwise spend resizing and compressing images yourself.
ShortPixel works similarly, but understands that it isn’t just your new content that needs to be compressed, old images should also be compressed to increase page load times for older content, and this will be possible through ShortPixel’s unique feature that lets you compress your old media files instantly. The plugin supports compression for the following file types: JPG, PNG, GIF, and PDF. It will automatically fetch image data and compress featured/thumbnail images alongside the originals, there are no limits for the file size that you can compress, however, a free account can enjoy only up to 100 compressions per month. You will gain access inside of your admin dashboard to detailed reports of the images that you have compressed.
Optimus is also a sophisticated product, marketing itself through unique web performance features for image optimization. The first one is called “Progressive JPEG”, a feature that would automatically load the appearance of your JPG files, with slight pixelation until the full data is loaded, this counters the baseline process of loading a JPG image, which usually means that the image is loaded from top to bottom, meaning that big JPG files can take a long time to appear on the page, and discourage readers to continue. Optimus promises to optimize images without any loss of quality. Optimus is also the only platform at the moment that offers image conversion to the Google’s WebP format, which is believed to be as much as 70% faster than anything else on the market right now. The only limitation is that free users can upload photos that aren’t larger than 100kb.
Alex Ivanovs has more than a decade of experience with WordPress, building WordPress related communities himself while helping clients to make most out of their WordPress experience. Alex currently helps to manage Colorlib, which is also where you can find more of his work.