• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
NameHero Blog

NameHero Blog

Web Hosting Tips & Resources From NameHero

  • Hosting
    • Web Hosting
    • VPS Hosting
    • WordPress Hosting
    • WooCommerce Hosting
  • Reseller
  • Enterprise
  • Domains
  • Account
  • Blog Home
  • Categories

4 Ways to Optimize Your Images in WordPress – Best Practices

Bhagwad Park

Published on: March 4, 2019

Categories: Website Performance, WordPress 0

Images form the largest part of modern web pages. Especially when you consider that Google likes “rich” web pages with lots of media. As a result, optimizing the delivery of your images is critical. Here are four ways to optimize your images in WordPress, with screenshots.

Method 1: At Least 1200 px in Width

When I first started writing, I would resize all images to a maximum of 550 px width. I thought that looked nicest on browser screens. However, one day I woke up to an error message in my Google search console regarding my AMP web pages like this:

AMP Image size smaller than recommended size

Turns out that when Google offers up web pages via AMP, they want the images to be of a certain minimum size according to their guidelines. You can see here, that they recommend them all to be at least 1200 px in width:

Optimize your Images in WordPress with a minimum width of 1200 px

So that’s what I’ve started doing. However, I don’t think it looks very nice on the screen, so I purposely specify image dimensions of 550 px in the HTML while displaying the images on a web page.

Method 2: Using Google’s “Squoosh” Service to Reduce Image Size

In November 2018, Google released its own “Squoosh” app to reduce images sizes, with a blog post explaining why. The website Squoosh.app blows away all other image compression plugins and tools I’ve used so far.

For example, here’s a screenshot of my desktop image with the size displayed when I open it in MS Pain:

Huge image size in screenshot

Here, the size is 1.1 MB. That’s pretty huge. Now when I open the Squoosh website and select the image, it gives me the new size as shown here:

Reducing the image size with Squoosh

As you can see, in the screenshot it’s just 69 KB. That’s a reduction of 94% using just the default settings! You can further tweak the compression algorithm and increase or decrease the compression metrics. The website also has a “side by side” comparison pane system that lets you compare the compressed version with the original in great detail.

Ever since I discovered Squoosh, I use nothing else to reduce large image sizes. It’s truly amazing.

Method 3: Use Lazy Loading for Images

Not everyone scrolls all the way down to every page. So if you have images rendering below the fold, we don’t want the browser unnecessarily using up the visitor’s bandwidth by downloading unnecessary images. In addition, this slows the page down and reduces your pagespeed scores, which might have an impact on your Google rankings.

To combat this, we implement “Lazy Loading” of images. This means that we only download the image when the user has scrolled far enough down to see it. The easiest way to enable this is to use the Jetpack WordPress plugin, created by the developers of WordPress themselves. In the “Performance” section of the plugin, you can enable lazy loading like this:

Jetpack CDN and Lazy Loading

And you’re done! It happens automatically. Which brings us to the last method.

Method 4: Using a CDN for Images

Images are static content. They don’t change. Ideally, we’d like to store then in servers around the world, so users can download them from the server closest to their geographic location. This is called a “Content Distribution Network” or CDN.

As seen in the previous screenshot, the Jetpack plugin already allows us to use their CDN network for images. To enable it, choose the option “Speed up image load times” and you’re done! Now your images will be served directly from a CDN instead of your origin server.

Personally however, I prefer to use Cloudflare instead of the Jetpack CDN. That’s because Cloudflare is a reverse proxy and doesn’t need an additional IP lookup, which slows everything down. It might not seem like much, but when rendering a web page, even a few hundred milliseconds of lookup time can make a huge difference.

But whether you use the Jetpack CDN or Cloudflare, your site will benefit from a CDN in general. There are also paid solutions for CDNs, and some web hosts include CDN functionality with their advanced hosting services like managed hosting for example.

If you follow these four methods to optimize your images and delivery, you’ll have done all you can. This will result in faster load times, lower bandwidth, and a far better overall browsing experience for your visitors. And in the end, that’s what matters most.

Bhagwad Park Profile Picture
Bhagwad Park

I’m a NameHero team member, and an expert on WordPress and web hosting. I’ve been in this industry since 2008. I’ve also developed apps on Android and have written extensive tutorials on managing Linux servers. You can contact me on my website WP-Tweaks.com!

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow & Subscribe

Exclusive promos, content and more!

Most Popular Posts

Speed up your site: solving the WordPress slowdown

NameHero’s Recommended WordPress Plugin and Theme Setup (2023)

How To Increase The InnoDB Buffer Pool Size

How To Fix A Stuck All-in-One WP Migration Import

How To Add A Subdomain In Cloudflare

Top Categories

  • WordPress
  • Website Performance
  • Web Hosting
  • Resellers
  • Website Security
  • Website Development
  • VPS Hosting
  • SEO Tips
  • Announcements
  • Domain Registration
NameHero

NameHero proudly provides web hosting to over 40,000 customers with 99.9% uptime to over 750,000 websites.

  • Master Card
  • Visa
  • American Express
  • Discover
  • Paypal
Products
  • Web Hosting
  • VPS Hosting
  • WordPress Hosting
  • WooCommerce Hosting
  • Reseller Hosting
  • Enterprise Hosting
  • Domains
Help & Support
  • NameHero Blog
  • Knowledgebase
  • Announcements
  • Affiliates
Company
  • About Us
  • Contact Sales
  • Reviews
  • Uptime
  • We're Hiring

Copyright © 2023 NameHero, LLC. All rights reserved.

  • Privacy Policy
  • Terms of Use
  • Acceptable Use Policy
  • Payment Policy
  • DMCA