When optimizing images on a WordPress website, we are talking about two things. First one is optimizing theme images that are loaded on almost every page (which we will cover in this article). That includes background images, icons, placeholder images and generally every image that is not dynamically inserted through Media Upload. Second things are dynamically inserted images that get inserted through Media Upload (article coming up soon).
Why Is This Important?
Images are loaded on every page load and can increase your page size 2X, 3X or more. There are several reasons why this is very important:
- Loading times on mobile: One of the most important thing we always focus on is optimizing for mobile, and we must take into account that mobile spped can still in some cases be limited. There is a huge difference in loading times is if page is 1.2 MB large in total or 4 MB large. While on desktop this might not be as noticable, on mobile this can increase loading time from 2-3 seconds to 8-9 seconds which is very significant.
- User experience on desktop: Although on fairly fast WiFi connection or even cable (10Mb/s or more) page will load faster then on mobile regardless if the page size is ~1.2 MB or ~4.0 MB, there is still a difference. Nowadays above 1s page load is consiederd slow and if page is loading 2-3 seconds more on every page load you might just be missing a lot of conversions.
- Google Page Rank: It is not a new thing that Google takes page size and page loading times very seriously and includes it their page rank algorithm. But it’s actually double benefit, because user experience and bounce rates are also a part of Google oage rank algorithm.
- Bandwidth, hosting and CDN expenses: When dealing with high-traffic websites, unoptimized page can make a significant difference since traffic is mostly paid per usage.
Optimizing Theme Images
Several things to do when optimizing theme images would include optimizing static images as well as using fonts for icons instead of images and using image sprites. I will not focus on sprites or icons here, those optimizations can be important but not that significant. Sprites are reducing number of HTTP request, but may not be reducing the actuall page size. I would like to focus on optimizing actual images that are used throughout the theme.
Just now, I am working on a WordPress theme that has several background images within the design that are used throughout the site (which is why I actually decided to write this article). When exporting images from PSD file (Orange background image, 1800px X 400px, JPG, 90% quality), image is about 137 KB large. When using an option to ‘Save for Web & Devices’ , exported image is 107 KB large. This is fairly normal size for full width images, if dealing with more detailed images of the same size they may even go above 200 KB.
To optimize those images I used compressor.io. From compressor.io website: “Compressor.io is a powerful online tool for reducing drastically the size of your images and photos whilst maintaining a high quality with almost no difference before and after compression.”. The technologies used to perform such optimisations are free and open-source softwares such as : pngquant, OptiPNG, JpegOptim, Gifsicle and Scour. There are a lot of similar tools out there (online and offline) that can lossy or losslessly compress your images, but I am most frequently using compressor.io because in my experience it has the best results. After searching a lot in the past I have used RIOT (Radical Image Optimization Tool) which is an offline software that also has bulk image optimization. I still used it when dealing with large number of images.
Essentially, there are 2 most important things that happen. Image is stripped of EXIF and XMP Data (image metadata), and number of different colors are concatenated and reduced. For example, image in example below might have 10.000 different shades of orange, while human eye cannot possibly percieve more than 10% of that while looking at the image. When orange shades are concatenated together, image still appears completely the same while reducing size.
Can you notice the difference? Well, if you look ahrd enough you probably could but considering this is a background image used with the content overlay, I can safely say that nobody using the website will ever notice the difference.
29.77 KB (same image as above, optimized with comressor.io, lossy compression).
Again, an you notice the difference? There is literally no difference bare eye can resemble while browsing through the website that contains this images on different sections of the website.
Optimize Your Theme Images!
Take some time to really do that, it is important! If these were only 2 images on the website we would have saved almost 200 Kb on every page load, we saved about 0.3 seconds of loading time for every mobile user on average 3G (6Mbps) connection, meaning that we have just saved our next 10.000 mobile users roughly 1875 seconds (31.25 minutes) of loading time. For a site like vancitybuzz.com with roughly 10M pageviews per month, we would have saved 1875000 seconds of loading time (31250 minutes which is equal to about 520 hours).
Now if we consider that your page might have more of those images that can be optimized and you can shave off 1 MB off or even more (I have recently optmized a website that had 8Mb of images before optimization and we reduced it to 1.4 MB), think about number of seconds, minutes or even hours you can save and how that can positively impact user experience as well as your conversion rates.
About the author
I am a Founder and CEO of AM2 Studio. Developer with 10+ Years of experience, completed 300+ projects. Experienced with both front-end and back-end development, primarily focusing on high-end WP development, strategy, architecture and managing large scale projects. My personal resoultion for 2016: Share the knowledge! Write more blog articles and present on meetups and conferences.