How to Optimize Images on WordPress for Lightning Fast Loading

Optimize Images and Make Your Website Load Faster

Did you know that nearly half of your website visitors expect your site to load in 2 seconds or less? Even worse, most will abandon your site if it fails to load within 3 seconds.

The good news is you can significantly reduce the number of abandoning visitors by speeding up your website.

Images often account for most of the downloaded bytes on a web page. If you’re looking to significantly boost your page speed, the first thing you need to do is to optimize images on your WordPress site.

Below are 5 image optimization tips for lightning fast loading.

 

1. Compress images

The best way to prevent slow loading images on your WordPress site is to compress your images with your photo editing software before you upload them.

But what if you don’t have access to the right software, or want to optimize the existing images on your site?

An image compression plugin is the easy solution that lets you optimize images on the fly as you upload them to your WordPress site.

Image compression allows you to reduce the size of your images without affecting their quality. Compression is the process of reducing the image size by removing image info algorithmically that a human eye can’t perceive, so the image still looks clear and sharp.

The best way to compress high-resolution images is with the the EWWW Image Optimizer plugin. Upon activation, you can optimize all the images automatically as you upload. It can also optimize your existing images on your site.

 

2. Leverage lazy load

Do you want to use a lot of images on your site without making it load slower?

Reducing the number of images is not an ideal solution, especially when you want to convey messages that can’t be done with just plain text.

If you’re using a lot of images on most pages of your WordPress site, you’ll want them to load only when they’re visible to users, which is known as lazy loading. Lazy loading your images helps you to save your bandwidth and improve your page speed.

To lazy load your images, you just need to activate the Lazy Load plugin on your site. It uses jQuery.sonar to load images only when they’re visible to your users.

 

3. Use the right format

When editing images for your website, you often need to compromise between the display quality and the file size of the image. Saving images in the right format is the best way to optimize them and keep a balance between display quality and file size.

Wondering which image file format is best for your website? Here’s a rundown of the most common:

• JPG is a lossy compressed file format. Use this format to store photographs at a smaller size. It’s the best choice for images with a lot of different colors.
• PNG is a lossless compression file format. Use this format for simpler images and transparent images. It’s a good choice for storing line drawings and text at a smaller size.
• GIF is best suited for images that are very small and ones that use only a few colors. It’s a good choice for clip art, charts, etc.

Here’s an example of how the file formats look different, courtesy of Bluewave.

The best way to edit and save images optimized for the web is by using Photoshop. If you need a free alternative, you can use GIMP instead.

Below are a few free online tools that help you optimize your images with a perfect balance in quality and file size.

• TinyPNG uses a smart lossy compression technique to reduce the file size of your PNG files without compromising its visual quality. You can upload up to 20 images, maximum of 5 MB each.
• JPEGmini uses recompression technology to reduce the size of images without compromising their perceived quality. You can either use their free web version or use a premium desktop app.
• ImageOptim is a Mac app that allows you to reduce the file size of images by removing bloated metadata. Its main benefit is that it lets you enable lossy minification so you can compress your images to get the smallest file sizes possible.

 

4. Prevent Image Hotlinking

Hotlinking is a process of stealing your server bandwidth by serving images on third-party sites, while still loading them from the original source. This practice is often followed by content scrapers and increases your server load as well as bandwidth usage.

The easy way to disable hotlinking from your WordPress site is by adding the below code to your .htaccess file.

RewriteEngine on

RewriteCond %{HTTP_REFERER} !^$

RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourwebsite.com [NC]

RewriteRule \.(jpg|jpeg|png|gif)$ – [NC,F,L]

Make sure to replace yourwebsite.com with your domain name in the above code. This code blocks hotlinking your images while still allowing images to be viewed in search results and on your website.

 

5. Use CSS instead of images

Using an image often requires a larger number of bytes than HTML, CSS and JavaScript. A great strategy to boost your loading time is to leverage CSS effects wherever possible instead of using an image. For instance, you can generate certain shapes like gradients, rounded rectangles, and drop shadows by using simple CSS.

While using CSS, keep an eye on browser compatibility because not all browsers render it the same way.

By following the above image optimization tactics, you can drastically improve your page loading time. Keep in mind that for every second you shave off of load time, you’re encouraging your visitors to stay on your site longer.