How to Optimize Images on WordPress for Lightning Fast Loading | HostGator Blog

HostGator Blog

Web Hosting Made Easy!

Blog / Web Hosting Tips

How to Optimize Images on WordPress for Lightning Fast Loading

Monday, August 21, 2017 by

how to optimize images for your website

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.

ewww image optimizer

 

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.

jpeg vs gif vs png comparison

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.

Syed Balkhi is the founder of WPBeginner, the largest free WordPress resource site. With over 10 years of experience, he's the leading WordPress expert in the industry. You can learn more about Syed and his portfolio of companies by following him on his social media networks.
12 Comments
  • udaychudasama
    14 June 2013 at 2:13 am

    Hi there
    I need your goodies.. where can i buy them??? my kids love them..

    I am your customer..

  • Online shopping stores
    17 June 2013 at 4:24 am

    I could understand the first part of what you were saying
    but I got a bit lost towards the end. This is a difficult subject to understand
    and the especially last part is best for me. Thank you for the post keeps
    posting.

    • HostGator
      17 June 2013 at 4:31 am

      Was there anything from this post that we could clarify for you? We’d be more than happy to do so.

  • Ankur
    18 June 2013 at 1:24 am

    good information specially on the tools which many are not aware of

  • Atul Bansal
    18 June 2013 at 11:12 am

    nice post of image optimization. I use Phostoshop by the way

  • Cameron Fous
    20 June 2013 at 10:52 pm

    awesome post gonna go fix up my website now!

  • Eric Grimaldi
    21 September 2013 at 1:00 pm

    Thanks for this information, btw, I use Gimp. Would starting resizing and renaming all pics from my blog, but not from my website be sufficient for the SEO knowing that both my website and blog are linked. Or do I also need to rename all the pictures from my website?

  • Paul S
    22 November 2013 at 9:11 am

    Very clearly explained and really step by step. Thanks, Taylor!

  • Joe Lalonde
    17 February 2014 at 1:37 pm

    Is there anything that can be done if you’ve already used large images on your website? It seems like it would take forever to go through and edit every picture I’ve previously used.

  • Reno Manuele
    18 February 2014 at 1:25 am

    I was told that you are supposed to use underscore to connect 2 words. IE: First-Time-Home_Buyer. Is this correct?

    • Ryan Bowman
      11 March 2014 at 10:57 am

      I prefer dashes. I don’t think it matters though.

  • Indhira Maynard
    28 September 2017 at 6:49 am

    Good info

  • Leave a Reply