To get faster page load times, image optimization for website is a key feature. Simple things like compressing the images can save a lot of CPU, RAM and bandwidth.
Consider the round trip time for each image to be loaded. Make Image smaller either manually or using a plugin like WP Smush Pro.
PNG Image Optimize is one of the advantages of image compression plugins.
No need of doing it manually. Select the directories and bulk smush of all your image are done .
Search Engines play a major role in getting traffic to your site. Google is one of the big giants in this market.
Core Web Vitals and Mobile-first indexing are of key metrics in 2022 for better ranking and page speed.
Lighthouse tool is used by PageSpeed Insight and GTMetrix to measure the speed of your website.
It will also show the area where the page lacks in speed. Image optimization is one common area.
Source : unsplash.com
No image should be MB in size. It is only for travel sites or photography blogs.
Content blogs mostly use images for readability. Resizing Images for Web is good user experience.
How Web Image Optimizer Plugins Improve Speed ?
To improve performance you can convert them to NextGen format like JPEG 2000, JPEG XR, and WebP.
The score will improve when you do the right optimization.
Image Compression can only be done using tools.
Simple things like Image CDN can make pictures loads faster on your WordPress site.
Compress Image size when you upload the image or using bulk tools. Online tools are available.
But they take lot of time for each image.
It is better to upload the original size image and compress them later.
Lossy compression is required for the quality of the image.
User Experience is based on what the user sees finally.
If the visitor is not able to see the intricate details of the image, then quality loss is a huge impact on your traffic.
WP Smush Pro to Make Photos Load Faster on Website
Things are a little complex.
If you have uploaded thousands of images like JPG, GIF, PNG and would like to compress them in bulk, then a suitable image optimizer plugin is required.
WP Smush Pro from WPMUDEV does this job nicely.
In addition complete page Speed optimization plugin like HummingBird Pro can do gzip compression, caching, asset optimization.
It can reduce the loading time of the page.
Optimize JPEG for Web to the right size.
If you did not specify any particular size when you uploaded to the “WordPress Media Library”, then you can do it in WP Smush Pro.
Image Format also plays a major role in the size of the image. PNG images take bigger size.
Lazy Loading is supported by default in WordPress, latest version.
Otherwise, you can use this image optimizer plugin settings. Only the images above the view will load.
As user scrolls through the page, remaining images come into load.
This will give a better score and only necessary images are loaded.
Javascript is not necessary to optimize these images.
But it takes lot of resources.
So if you have too many scripts associated with the images, reduce them.
WP Smush – Image Optimization Features
Better cache policy also makes sure that local caches images are served to different visitors around the globe.
A 180 day cache is thought to be a good setting. Original image will remain on the server.
Responsive images are also compressed and served to mobile on request.
Image Compression takes place on the WPMUDEV and then the image is transferred to your storage.
Around 13 kind of image sizes are created when you upload a particular image.
WP Smush has to smush all these images and then re-uploade them.
Benefits of lazy load images can be seen on our site.
The other content loads quickly.
The same CPU time can be shared for techniques like minification of CSS, JS and HTML.
In this case-study we are going to see how to optimize images for google pagespeed using a simple plugin.
You can remove most of the image related errors.
Configuration of the Test Site
- The web page we are going to test has 22 images.
- AMP pages are not used for mobile.
- Both desktop and mobile have the same theme.
- Tests are conducted to know the average load time.
- Lossless compression can be seen by checking before and after compress.
Google PageSpeed Test without Image Optimization
I got a score of 40 on mobile and 77 on desktop. Though these are low scores, image optimizing issues were mostly resolved.
Since my host does not support WebP conversion, that error remained as it is.
There was potential saving of 2.36s for that particular error.
There was 1 image which was 420KB size and 377KB could be saved.
On the desktop front, this was not much of an issue.
The “Serve images in next-gen formats” displays a saving of 0.4s.
The same image was 150KB in size with potential saving of 130KB.
Another page with 14 images was tested.
The PageSpeed score remained more or less equal. B
ut the next-gen issue was not displayed in both mobile and desktop.
Test Results After Image Optimization
The same two urls were tested using the above website performance and optimization test tool. I’m also using Cloudflare and its Edge servers to serve my pages. When you click the “Content Breakdown” tab of the test result, the following results.
As you can see the first url contains 22 images and the total size of these images comes to around 170KB.
This is a lot of saving compared to the the uncompressed images.
But still they take 25% of the requests and 13% of the size.
If we can convert to WebP using the local server, much more improvement can be seen.
Google Page Speed Image Compression scores a perfect 100 using this test.
The size of the images is only 20KB.
There are no potential saving as all the images have been compressed already.
The page speed testing tool also tells that there is only 1 image that is not optimized.
In the below screenshot you can see the Waterfall View.
The PNG Image Optimizer plugin has reduced the loading time to 190ms.
It is awesome.
You have all the images compressed and are loading faster in the page speed test.
Conclusion
So if you are having an issue with large image sizes, then smushing the images does well.
The bulk smush feature is useful to compress all the images and save bandwidth.
Image Quality is not disturbed after compress of pictures.
PNG images can also be converted to JPG if required.
Metadata of the images can be removed for better image resizing.
The original file still exists.
In-case you remove the plugin also, the old images are served alongwith the smushed images.
Loading time and lossless image compression are some of the important features you see in an image optimization plugin.
If the file size limits are too big, then it can hit the PHP or CPU limits of your server.
Single image should be enough to upload.
Other things are done by bulk smush optimizaitno tool.
WebP images are the new norm.
If your server supports, you can do them locally with the new version of Google Image Optimizer tool.
This is supported by most of the new browsers.
Fallback to other image formats is done for old browser compatibility.
Quality level of the image was also good when used with other features.
Compress Image on big size. It will produce lot of savings in time and resources.