Image files make up more than half of your website space affecting your page load speed more than anything else. Hence it is important that you optimize them before and after uploading them to your website. To help face these hurdles, we have listed some important image optimization tips in this article.
Here the things you can do to make your website images work in compliance with speed and efficiency.
Choose the Correct Format
JPEGs are usually best to pick for pictures especially when you’re on a bandwidth budget. In the above instances, there is no big difference in the images, but the PNG is much bigger than the JPEG. Also, you lose the image quality with every time you edit your image. Vectors look wonderful on any scale while raster images will pixelate. If you’re confused, contact WordPress support services.
If your image has typography or is a screenshot or some other form of a computer-generated image – like vectors – it is usually good to opt for SVG or PNG. GIFs are used for animations.
Use a Good Retina Format
Retina technology came on the scene with huge picture quality, but it also has a couple of downsides. Typical monitors use 72 pixels per inch, whereas a Retina display ranges from 150 to 300ppi. This makes images and fonts sharper and more beautiful and also makes for larger image files and reduced page loading time particularly with mobile devices.
But the human eyes do not pick that subtle differences in quality on Retina devices after compression. A huge JPEG saved at a high compression rate can appear much better than a smaller image at reduced compression for resizing in your page.
An alternative way to solve the issue is to make another version of each of your image files at the double the size. A 100 x 100 px picture at 80ppi will require to attain 200 x 200 px size, then re-sized back to 100 x 100 in your page, or alternatively raised to 160ppi.
Another way is to use a plugin like WP Retina 2X. You will have to add “@2x” to the second file name.
Also, WordPress automatically compresses JPEG images up to 90% of the original. Disable this by adding the following code snippet in the theme’s functions.php file:
add_filter( ‘jpeg_quality’, create_function( ”, ‘return 100;’ ) );
Do not delete the Original File
It is a good habit to keep with you the original version of the picture. To best optimize images, you will have to work with various compression methods. Keeping that in mind that you have the original image file safe. Generally, you can’t undo the change once the file is compressed.
Use Good Compression Tools
WordPress has a sea of tools to use when it comes to site optimization. You can find one of these tools on the internet. Do your research and choose the best for your WordPress Website.
We hope you will be able to make the best choice in your image optimisation and continue using high-quality, Retina-ready images for maximum impact in your design.
Doing the best image optimization requires a little time and experience. If you have a little know-how of how things work its okay, but if you’re a newbie it is always advisable to take help from experts. Avail our WordPress optimization services today for an off-the-shelf support.