Images will always be one of the slowest-loading elements on the page, no matter how well-optimized it is. If you want to get the most out of WordPress, you’ll need to implement a strategy that focuses on images – otherwise known as image optimization in WordPress.
In today’s post, we’ll go over six quick tips for image optimization by reducing file size – all in the name of speed. Continue reading if you want a lightning-fast WordPress website.
Tip #1 for image optimization in WordPress: select the appropriate file type
You can specify the file type you want to save as in Photoshop and other image editing software. The JPEG and PNG file formats account for the vast majority of online images.
So, which should you go with? That is debatable. Both options have benefits and drawbacks, and the decision is largely based on the situation.
JPEG – For photographs and other images with a wide range of colors, JPEG is the best option. They can also be compressed, resulting in a loss of quality in exchange for a smaller file size.
PNG – For graphics, drawings, text, and some screenshots, PNGs come out on top. Unlike JPEGs, they also support transparency. Lossless compression is used in this format, resulting in higher quality but larger files.
As previously stated, the file format is usually determined by the type of image we’re working with. What, on the other hand, is the cost of selecting the incorrect file format in terms of file size?
So, let’s look at a few scenarios to put this to the test.
In PNG format, this full-size screenshot of my WordPress dashboard was 150kb, but in JPEG format, it was 259kb. Remember that PNGs are typically used for screenshots, whereas JPEGs are roughly 75 percent larger.
The full-size version of this photo I took on vacation, on the other hand, yields the opposite results. The photo is 1.26 MB in JPEG format, and 7.23 MB in PNG format. That means the PNG is more than 550 times larger (ouch!).
This demonstrates the significance of choosing the right file format when it comes to image size. If you’re pressed, follow this rule: JPEG for photos and things with multiple colors; PNG for everything else.
Resize your photos
You can reduce the file size of an image by shrinking its dimensions. Without a doubt.
Reduce the physical size of your images as much as possible to keep your site light and nimble – typically, to the dimensions you want to display your images at. There’s no reason to upload an image that’s wider than 1000 pixels if your website’s maximum width is 1000 pixels. Larger-than-necessary dimensions ensure that the image contains unnecessary bulk, making it more difficult to properly optimize images in WordPress.
Even though the WordPress thumbnail feature can display images at smaller sizes, this has no effect on the image’s underlying file size. Obviously, photographers and other artists who want to display a thumbnail linking to their full-size, high-res work can make an exception.
Allow me to demonstrate how much money you can save once more.
The full-size version of my previous photograph is 1.26mb and measures 2592 x 1456 pixels. Let’s see how much the file size shrinks when the image is resized to various popular widths.
In WordPress, here’s an example of image optimization:
394kb for 1200 pixels wide
298kb for 1000 pixels wide
219kb for 800 pixels wide
154kb for 600 pixels wide
As you can see, the cost savings are enormous!
Install Optimole on your WordPress site to save time resizing images. It will do everything for you. It also includes image resizing for optimal display, which means that the images are not loaded in their full size, but instead are scaled to fit each user’s viewport. In other words, no matter what device or screen size you’re using, Optimole loads the perfect image size.
Crop your photos
The quickest and easiest way to reduce file size is to resize images. It creates an exact copy of your image, but with everything scaled down.
When an image is shrunk beyond a certain point, some elements become barely visible. This is especially problematic when the image’s focal point has become hazy. Cropping, like resizing, has the advantage of reducing image dimensions and file size, making it an excellent method for image optimization in WordPress.
- Image quality is reduced (lossy compression)
After you’ve finished cropping and resizing your images, you can compress them for even more file size savings. Although PNGs can also be compressed, this technique is most effective and popular for JPEGs.
JPEG now supports lossy compression, which is a type of compression. This implies that some image data is removed in order to reduce file size.
We can get away with making two adjacent pixels the same if they have the tiniest color difference. Although the difference is barely noticeable to the naked eye, having fewer colors reduces file size.
You’ll be asked to select a quality score from 0-100 when saving a JPEG file using image editing software. It’s essentially a trade-off between file size and image quality.
A higher score means less compression, better quality, and a larger file size.
A lower score indicates that the file is compressed more, has a lower quality, and is smaller in size.
Small changes in quality score, on average, have little impact on the overall quality of your image. In fact, your visitors are unlikely to notice the difference.
Take a look at the two photos below to see what I mean. One has a quality score of 100, while the other has an 80. Which one is it?
Cropping is a better option than resizing. Instead of shrinking the entire image, you’re essentially trimming the edges – similar to how you’d do with a pair of scissors on a photograph. The part of the image you want to emphasize becomes more prominent, and the background is cleared of all distracting elements.
Using a trusted WordPress screenshot, here’s an example of how cropping an image can be better than simply resizing it.
Use a content delivery network (CDN) to deliver images.
Isn’t everything on the internet instantaneous? Actually, the answer is no. The distance between a visitor’s location and your website’s server influences site speed; the greater the distance, the longer the wait.
Consider using a CDN to alleviate the latency issue. CDNs store your website on multiple servers around the world and connect your visitors to the one that is closest to them geographically. Your website is served more quickly now that your latency issues have been resolved.
If you want to speed up your WordPress site, the Optimole plugin comes with its own free CDN – but only for images.
All you have to do now is download and install Optimole. Finally, your images will be displayed in a flash.
Please see our other post for some more complex – but also better – CDN solutions.
Make use of lazy loading
The WordPress software treats all images equally by default. However, this is clearly a waste of resources, particularly if you want to do any image optimization in WordPress.
After all, an image at the bottom of the page will be seen much later than an image at the top of the page; doesn’t the first image deserve to be seen first?
Lazy loading achieves this by prioritizing images. Images at the top of the page are loaded first, followed by images below the fold as the visitor scrolls down the page. As a result, lazy loading can be thought of as the “just in time” equivalent of web page loading.
Optimole will once again lend a hand if you want to use lazy loading to speed up WordPress. The cool thing about this plugin is that it has a low-quality image placeholder feature, which means that an intermediate low-quality image is loaded slowly until the full-size image is fully displayed.
It’s also completely free.
Now it’s your turn.
That brings us to the end of our list of six quick tips for image optimization in WordPress. As you can see, combining several of these strategies can result in significant file size reductions for your images. Your visitors will appreciate it, and your website will load much faster as a result!
If you use a plugin like Optimole, which does all the work for you, optimizing your images is actually quite simple (and mostly for free).
If you have any questions about image optimization, leave them in the comments section below!
