Hi there, Tracy’s here! In this post today, I’m talking about some essential tips that any website owners should know to optimize images for WordPress websites. I believe that optimizing these factors will absolutely help your site load much faster.
optimize images for WordPress
Using tons of images on your website is irresistible because we all have to insert images into posts while building our blogs. No matter which niche we are working on, our posts need them to be more compelling and attractive.
However, there are some serious problems of uploading images to our hosting service. That action will eat your storage up and cause bandwidth draining if your store a huge image library. Not to mention that WordPress also automatically generates tons of thumbnails in various sizes for those images. The results is that your website will take too long to fully load a page, which will negatively affect your SEO, rankings and user experience.
So, if you are uploading your images directly to your site’s host, be aware of those problems. You should check the following tips I have learned to optimize images for WordPress sites.
Table of Contents
USE THE BEST IMAGE FORMATS FOR YOUR WORDPRESS SITES
To making uses of your images and to avoid using wrong formats that make pages heavier, you should know purposes of using them.
Choose the most suitable image format
Normally, image formats we use the most on our websites are ones such as JPEG, PNG-8, PNG-24 and GIF. Each of those formats aims to different purpose of use. Let me show you a very short brief as the following:
- JPEG/JPG: The most common format. It supports images with a wide range of colors, but can also reduce the image quality. This format do not support animations and transparent images.
- PNG-8: This format is for images with high quality details and resolutions, but it uses RGB colors only. This format support transparency, but no animation.
- PNG-24: This format is used for images with high resolutions and it supports a wide range of colors. Transparency is available, but no animation.
- GIF: This format is for animation only.
So, looking at those purposes, if you don’t have the need for animation, then you are better using PNG and JPEG. If your images have little diffused details, use the PNG-8 format instead of JPEG because the quality of PNG for those images will be better than in JPEG.
When to use JPEG format?
When you have images with a wide color range and gradient, the best choice for your website is JPEG format. For sort of images with high levels of color and gradient, JPEG format will help you to get better image quality with smaller size than PNG and GIF do.
JPEG is the best for images with a wide color range
When to use PNG format?
PNG formats includes PNG-8 and PNG-24. PNG-8 is the newer format than PNG-24, with the same features but it can be useful in some cases to alternate JPEG format to fill the need of transparent images. This is also a good choice for low-colorized images.
However, if you want to post a high resolution image which can save the maximum quality, use the PNG-24 format. PNG-24 is a compressed lossless format while JPEG is compressed as lossy quality, so JPEG will reduce the quality more.
In my opinion, you should use all of your images as PNG-24 if you are not in need of animations. Then you can use many software on the market to reduce the size of images while the remained quality is still much better than with JPEG. That is why tracymoons.com is now using all images in PNG format.
Comparison between PNG and JPEG
The following case is 2 images which I took with the software Snagit 12 and saved as the JPEG format (quality 75%) and PNG-24. You can see the difference yourself.
JPEG – 45kB
PNG – 13KB
COMPRESS YOUR IMAGES BEFORE UPLOADING
You should compress your images before uploading them to your website if you don’t have the need of saving the maximum quality. This step is reducing the size of images, not the resolution. Compressing an original image can save you up to 70-80% of the image size while the quality remains almost the same under human eyes. Notice that you can compress images more in PNG format than in JPEG format, since JPEG images are already compressed.
Reducing up to 50% of image size with compressing software, why not?
Best offline image compressing software
This tool supports you to compress common image formats such as PNG, JPEG and BMP. It can also compress multiple images at a time and it’s completely free.
This is one of my favourite apps on Mac and I used it quite frequently when I used Mac. It is light-weighted, useful and free. It supports some common image format as JPEG, PNG and GIF.
This is a small and useful tool I’m currently using to compress my PNG images. It supports PNG only.
If you need a software to compress your images quickly and effectively with resolution adjustment function, Kraken will suit you the best. You can also directly compress image from an URL or compress all images in a website with Page Cruncher function.
Best plugins to optimize images for WordPress
If you are using WordPress and you want to optimize all images in your online library, these are 3 best plugins.
This free plugin supports compressing images pretty well. It can compress almost all formats. This plugin can also automatically compress your images when they are uploading.
Another reason you should use this plugin is that it helps you to compress all images on your host by the command “WP-CLI”. So, if you are using host with WP-CLI, you should install this plugin, go to the WordPress folder and type wp help ewwwio optimize to see the instruction.
WP Smush has the same function as EWWW Image Optimizer which allows automatic compression both in uploading progress and in library. However, this plugin is lighter, easier to use and has a PRO version.
If you want to spend money so you can compress images better while not consuming much resources in host, you can spend it with Kraken. Kraken service supports lossless or lossy compression with the fee of $5/month.
REDUCING YOUR IMAGE SIZE
When you upload a too large or too heavy image to your website, you are wasting the host’s storage and bandwidth. For example, if you are not a photographer to posting HQ images to websites, your images should only be in the size of 1024px in maximum. If the image is bigger than the page column’s width, your visitor see nothing better than a fit image. However, you lose so much more in page loading site and host storage consumption.
Why is it so important to optimize images for WordPress that you have to take good care of it?
It’s very simple. Non-optimized images mean that you lose more host capacity and bandwidth, which can easily be understood as wasting your money. Moreover, big images make your site load slower and affect its SEO score a lot. So using optimized images also one of best methods to boost your website rankings.
That’s all I want to share about how to optimize images for WordPress sites. There’s more but I will save it for a more detailed post. Thanks for reading my blog and see you at other posts on tracymoons.com!