Image optimization is one of the simplest ways to boost your website speed.
Easily optimize images using the correct image type, size, and a free plugin for WordPress.
Most of us on the net are looking for information quickly from the websites we visit and landing on a page with slow loading images is frustrating and disappointing.
Some of the most frequent offenders are recipe and lifestyle blogs which use beautiful, but extremely large and numerous image files.
I prefer to stay on a site because I want the information, but if it drags too long, I have to leave and find another source. This results in negative SEO for the website.
Poor website speed equals poor SEO and while SEO is important, great user experience on your website is truly what you should be aiming for.
The last thing I want to happen when you visit my site is to have your cell phone freeze or for my images to distract you from the information I have worked to provide to you.
In this post, I am sharing how I have been able to optimize images and dramatically increase my Google PageSpeed Insights rating (the link is below under references).
Choose the Correct Image Type
There are three universal formats: GIF, PNG, JPEG
GIF is Graphics Interchange Format which supports animations and is suitable for simple graphics and logos using solid colors.
PNG is Portable Network Graphics and supports higher quality images for the web. Use PNG images only when you need to preserve fine detail and the highest resolution. PNG file sizes are larger than JPEG files.
JPEG is Joint Photographic Experts Group and supports high-quality images for the web. Use JPEG or JPG images when you need good quality images. JPEG files are generally the best choice for image optimization.
Upload Scaled Images
Optimize images first by scaling your images to their correct display size. For example, if your blog post featured image is set at 560px x 315px, then upload the image as that file size rather than a larger 1280px x 595px to your media files.
Another example is for widgets in your sidebar. If you are uploading an image to use in a widget, then upload the correct file size for the sidebar. Mine are 300px wide, so I resize my widget images to 300px before I upload them to my media files rather than a larger size.
Avoid uploading large image files and then relying on the browser to rescale them.
Google Says:
Image optimization boils down to two criteria: optimizing the number of bytes used to encode each image pixel, and optimizing the total number of pixels: the filesize of the image is simply the total number of pixels times the number of bytes used to encode each pixel. Nothing more, nothing less.
As a result, one of the simplest and most effective image optimization techniques is to ensure that we are not shipping any more pixels than needed to display the asset at its intended size in the browser. Sounds simple, right? Unfortunately, most pages fail this test for many of their image assets: typically, they ship larger assets and rely on the browser to rescale them – which also consumes extra CPU resources – and display them at a lower resolution.
Use Free Image Tools
A well-liked photo editor is picmonkey.com. They have a free option to resize images. It is easy to use if you need to replace images on your website.
Another popular tool is canva.com. They offer standardized dimensions for blogs and social media posts.
I get most of my images from pixabay.com free. I download a medium image, upload it to Canva, add it to a blog title and then add my text. Then I save it and download it to my computer.
Next, I upload my blog post image into compressjpeg.com and then download the compressed image and delete the original images from my computer. It saves space and reduces clutter on my hard drive. I upload the compressed (-min) file to my website media files.
Install the Free Plugin EWWW Image Optimizer
A note about plugins: Always test plugins on a test website with your current theme if you have it available and consider installing the plugin WP Rollback so you can rollback any changes a plugin or theme makes in case there are issues.
After I installed EWWW Image Optimizer and ran the bulk optimization, there was a great improvement in my page speed rating from Google.
EWWW Image Optimizer uses Lossless Data Compression which is a technique that reduces file sizes without degrading their visual quality.
I have a lot of media files, so the bulk optimization did take some time to run, but the results were excellent.
After re-checking my page speed, I found there were a few files that needed to be resized and replaced and that was easy to do. The results have been well worth the effort.
This plugin has a 4.5 out of 5 stars rating, 300,000+ installs and was updated the day of this post. There is an API subscription available if you need more advanced features.
Also, there are video tutorials available on the Installation page. Please review the installation page to be sure you understand how to operate the plugin.
An alternative plugin I have seen recommended is Kraken Image Optimizer. It has a 4.7 out of a 5 stars rating, 10,000+ installs and was updated 3 months ago. There is a free version and a paid subscription available.
In Summary
Use JPEG files, upload the correct file size to your website, install and run EWWW Image Optimizer, resize and replace any remaining images slowing down your site.
References
Google Developers PageSpeed Insights
Google Developers Image Optimization
Thank you for reading How to Optimize Images for Better Website Speed. Do you have a helpful tip or a question? Leave a comment below!
I personally use the EWWW Image Optimizer on my sites as well – what an outstanding tool. It’s true that it’s not great in terms of SEO to use a ton of plugins either, but it’s better than having large, clunky images that slow-down site speed. You even mentioned Canva, which is one of my favorite resources for image creation – I highly recommend that tool as well. It’s like an extremely simple, user-friendly version of PhotoShop. Very easy to use, yet effective and free. What’s better than that for beginners looking for simple image solutions for their websites. Do you know of any services similar to that of Canva?
Hi Matthew, Thanks for sharing your experience with EWWW Image Optimizer. It made such a great difference for my site, I had to share it. I try to limit my plugins and since I upgraded my theme, I have been able to do away with many I was using to run my old free theme. This one has not caused me any trouble. As for image services, Canva is what I prefer. I tried Snappa and Pixlar, but Canva offers the most services for free and now I do pay for Canva for Work because I produce more image sizes for different social media platforms. It has been well worth upgrading. I recently received PhotoShop as a gift from my husband and so I am getting ready to dive into learning how to use it! Eventually, I hope to produce everything in PS. ~Gina
Hello Gina,,
Thank you for the post, I am taking your advice, and make some changes on my site, I was not aware that having large images can have a negative impact on the site, I am going to be conscious when I choose images for my site,
Thank you
Regards
Hi Sibongile, I hope you find great improvements! Thank you so much for leaving a comment to let me know you found my post helpful. ~Gina
Thanks for the tip to resize the images to actual size. That should help.
Hi Brian, I am glad you found it helpful. Thank you for leaving a note to let me know! ~Gina
Thanks for explaining the difference between PNG and JPEG pictures. I have been using PNG primarily, but now I am going to try and use JPEG since it will be easier for the user to load. I’m always trying to make the user’s experience smoother and better, and reducing load time will be a big help.
Also, kudos for recommending pixabay! This site is awesome!
Hi Nick, Thank you too so much for leaving this note for me. ~Gina
Hello Gina,
Check out this website http://optimizejpeg.com to reduce your image size upto70% to increase your page speedup .
Good site. Thanks!