Image Optimizer WordPress: 12 Ways To Optimize WordPress Images

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on reddit
What is the best image optimizer WordPress? Here are 12 powerful ways to optimize images on WordPress with and without a WordPress plugin.
Image Optimizer WordPress

How To Do Image Optimization In WordPress?

While WordPress is an excellent blogging CMS for beginners, WordPress is definitely not the best in doing image optimization. As a matter of fact, this is the single reason why the term “image optimizer WordPress” is often searched for by bloggers.

Imagine optimization is required in WordPress for two reasons—for improving website loading speed and to rank better in search engines.

As a WordPress developer myself, one of the biggest struggle is to build a WordPress website that is fast, beautiful, conversion-focused and super easy to manage.

Of course, this leads me to answer one major question—how to optimize images in WordPress?

Before that, I recommend you to bookmark and share this article with your peers.

Share on facebook
Facebook
Share on twitter
Twitter
Share on tumblr
Tumblr
Share on pinterest
Pinterest

Here's a quick 5-minutes video to kick start

How To Optimize Images Without Plugin?

How To Optimize Images for Web and Performance
An optimized image allows your website to load faster while reducing server resources

By default, images uploaded to WordPress are not being compressed. So, how to enable WordPress optimize images without plugin?

You need to optimize the images before uploading to your WordPress website.

Tools that you need to use in order to optimize images without WordPress plugin:

Photoshop is the best most effective tool in optimizing images before uploading to WordPress. As a rule of thumb, always upload images based on the exact size … simply because WordPress sucks at resizing the image and this process leads to straining your server resources.

If you hate Photoshop like I do, Canva is a great alternative tool to optimize images. Canva allows you to resize the images before uploading to your WordPress website.

There are many image optimizers that you can use. What these tools do is to resize the image, reduce unwanted pixels and of course, make the image size smaller. The smaller the image size, the faster it takes to load the images.

You can consider using ImageCompressor.com or ImageOptimizer.com to optimize images for free.

Want a faster website loading speed? Optimize your images before uploading to WordPress—and this includes resizing the image!

Use Image Optimizer WordPress Plugins

Do you want to optimize images automatically on WordPress? If yes, using WordPress image optimizer plugins will do the trick!

You start by searching for the best image optimizer plugin in WordPress.

Head over to WP Admin > Plugins > Add New.

Type in image optimizer in the search column and you will see a few recommended plugins as below.

Install Image Optimizer WordPress
Finding and installing image optimizers in WordPress is easy

Here is a simple list of recommended image optimizer plugins that you should be using to optimize images on your blog.

The free Smush plugin offers limited but sufficient features for bloggers who want to optimize their images. Smush Pro which is a premium image optimization plugin for WordPress offers more comprehensive image optimization including lazy loading feature that helps reduces website loading time. Download Smushit here.

EWWW Image Optimizer is an excellent alternative to Smush. It does not offer lazy loading feature but it has superb image optimization features to keep the images looking good (even with a reduction in size). Download EWW Image Optimizer plugin here.

I like ShortPixel because this plugin does compression not only for images, but for PDF files as well. Just like Smush, ShortPixel comes with premium features with a small monthly commitment. Download ShortPixel to compress images now.

If you are looking for a good WordPress image optimization plugin, Imagify is quite a go-to plugin for bloggers. With over 200,000+ installs, this plugin comes with easy to configure setting, effective image optimization and resizing. Imagify comes with free optimization services for a limited number of images and if you require more, there are paid optimization packages that you can choose from. Download Imagify here.

Using image optimizer WordPress plugin allows you to save time and makes optimization by default. When set up correctly, the process of optimizing images will be an automated process (so that you can focus more on your blogging business).

These WordPress plugins will enable image compression (often known as "Losslessly Compress Images" process) which will reduce the image size dramatically—without impacting the image resolution.

Specify Image Dimensions

Specify Image Dimensions To Optimize Images WordPress
Optimize WordPress images by spicifying the image dimension

There are many ways you can specify an image dimensions to optimize the image. Specific image dimension will ensure that the server loads the right size when required and no additional resizing needed to be done by the server. This will reduce the stress and improve the performance of the server … which leads to a faster response time.

Now sure how to optimize an image by specifying the dimension? Here’s an example when you are uploading an image in the widget area.

How To Specify Image Dimension In WordPress
Specify the image dimension helps to improve website loading time.

Combine Images Into CSS Sprites

What Is Combine Images Into CSS Sprites
Combining images is a great way to optimize images in WordPress

What is combining images into CSS sprites?

Sprites are two-dimensional images which are made up of combining small images into one larger image at defined X and Y coordinates. To display a single image from the combined image, you could use the CSS background-position property, defining the exact position of the image to be displayed.

CSS sprites is a collection of images put into a single image. A web page with many images can take a long time to load and generates multiple server requests.

CSS Sprite is very effective in optimizing images (serving a single request instead of dozens of request). However, if it require some CSS knowledge as it can easily break the ability for your site to load images properly.

Avoid Image URL Redirects

What Is URL Image Direction
How does URL image direction impacts website loading speed?

Want a faster website loading speed? Consider reducing image URL redirects.

Every redirect will lead to a waiting time—and having too many redirections will impact your website loading speed.

Image URL redirection often happens when you are changing from HTTP to HTTPS, changing from www version to non-www version or started serving images from a CDN.

You should bulk update all your images (and links) using Better Search Replace so they are serving the correct version. Otherwise you may see minimize redirects or use cookie-free domains errors.

Crop Images For Optimized Versions

Image Optimization WordPress Through Cropping
Cropping images helps to reduce image size

Resizing images is the quick-and-easy way to reduce file size. It creates an exact replica of your image, but one where everything is smaller.

Shrinking an image beyond a certain point means some elements are barely visible. This is especially problematic when the focal point of an image is no longer clear.

Cropping is the alternative to resizing. Rather than shrinking the entire image, you are essentially trimming around the edges – like using a pair of scissors on a photograph. The part of the image you are trying to show becomes more prominent, and you cut away all the distractions from the background.

Here’s a demonstration of how cropping an image can be better than simply resizing it, using a trusty WordPress screenshot.

The resized image

Not Optimized Image
Original image size (uncropped)

The cropped image:

Optimized Image
Cropped image (optimized in size)

Of course, the benefit of cropping is that, just like resizing, it reduces image dimensions, cuts file size, and is therefore a great way of doing image optimization in WordPress.

Serve Images On A CDN

How to compress images using CDN?
What is a WordPress CDN and how it helps in optimizing images?

Everything online happens in an instant, right? Well no, actually. Geographical distances between a visitor’s location and your website’s server have an impact on site speed – the larger the distance, the longer the wait.

To solve this latency problem, consider installing a content delivery network (CDN). CDNs store your website on multiple servers spread across the globe, then connect your visitors to the one geographically closest to them. Latency problems solved, your website is served more quickly.

If you want to speed up WordPress, you’ll be pleased to learn that Optimole plugin ships with its own free CDN – just for images.

All you need to do is install and activate Optimole. Voilà – your images will be displayed in record time.

What is Optimole? Optimole is your all-in-one image optimization solution for WordPress that offers image CDN (under it's paid plan). Integrating Optimole will speed up the overall website loading speed because you are serving highly optimized images over WordPress server.

While Optimole is an excellent CDN for images, there are several other CDN services that offer a full range of speedy CDN services (serving JS and CSS for example). Here are two of the best in the market today:

Lazy Loading (FTW)

WordPress Lazy Load Plugin
Lazy loading images will help reduce website loading time

Introducing, lazy loading.

By default, the WordPress software treats all images equally. However, this is quite clearly an inefficient use of resources, and especially if you want to do any image optimization in WordPress.

After all, an image at the bottom of the page won’t be seen until much later than the image at the top of the page – doesn’t the first image deserve priority?

Prioritizing images is exactly what lazy loading achieves. Images at the top of the page are prioritized, while images below the fold are loaded only when the visitor scrolls down the page. This makes lazy loading the “just in time” equivalent of web page loading.

Here are the best (and recommended) WordPress lazy loading plugins:

Lazy loading images is an absolute must if you want to speed up your website loading speed.

Cache WordPress Images

Cache Images
How do you cache images and why is this important?

Do you know that WordPress websites load faster with cached images? If this sounds too complicated for you, you are in luck.

There are many cache plugins available for download and I highly recommend using W3TC (also known as W3 Total Cache plugin) which works like charm.

Setting up W3TC to work properly can be a tedious job. Therefore, here’s a quick setting you can download and use right now. Download the best W3 Total Cache configuration here.

IMPORTANT: Please ensure you check your inbox to confirm the email to avoid spam.

CloudFlare Image Optimization

CloudFlare Image Optimization
CloudFlare Image Optimization is an effective way to optimize images for WordPress blogs

CloudFlare also has a few ways to optimize images. Mirage and Polish are found in your CloudFlare speed settings while Hotlink Protection is found in your Scrape Shield settings.

CloudFlare Mirage (Pro Feature) – reduces image requests, lazy loads images, and improves image load times on mobile devices with slow network connections.

Here are some additional details.

  • Resizes images based on a visitor’s device/connection. A visitor on a poor connection will get a smaller version (lower resolution) until they are back on a higher bandwidth.
  • Reduces amount of requests – instead of sending multiple requests for all images on the website, Mirage pulls this into one request so visitors can see images immediately.
  • Lazy loads images (only loads them once users scroll down and actually see the image).
cloudflare image mirage
CloudFlare Image mirage improves load time for WordPress websites

CloudFlare Polish (Pro Feature) – strips EXIF data and compresses images.

Cloudflare Image Polish
Cloudflare Image Polish automatically optimizes images for website owners

Last but not least, CloudFlare Hotlink Protection.

CloudFlare Hotlink Protection – prevents people from copying your images and pasting them on their own website, which (since you’re still hosting that image) will suck up your bandwidth.

Cloudflare Hotlink Protection
CloudFlare Hotlink Protection protects your images from being hotlink to other sites

Overall, CloudFlare is an important tool for WordPress image optimization. It is powerful, easy to use and very effective for website owners who are serious in getting faster website loading speed. With no coding required, CloudFlare is excellent for beginners and advanced users alike.

Saving Images Using The Right Format

PNG vs JPEG
The differences between PNG and JPEG

Do you know that saving images using the right format is extremely important when it comes to image optimization?

Most of the time, images are uploaded to WordPress either in JPEG or PNG format. But do you know what they are really used for?

PNG is uncompressed (larger file size) and should be used in simple images without lots of colors.

JPEG is a compressed (smaller file size) which slightly reduces image quality but is smaller in size, and is used in images with lots of colors.

Optimizing Images With Alt Text

What is Alt Text
What is Alt Text? What is Alt Tags?

Optimizing images is more than just to ensure your website loads fast. It involves ensuring that you are sending the right signals to search engines (for your website ranking).

Using Alt Text (also known as Alt Tags) is a great way to send the right signals to Google and here are some information that is critical for your SEO ranking.

These should be the same as your image file name. You can use the Automatic Image Alt Attributes plugin to automatically use the file name as the alt text. As long as you’re using relevant images, some of them should naturally include (bits) of your keyword… there is absolutely no reason to stuff keywords in images, which risks a keyword stuffing penalty.

Add Alt Text To Images Automatically – use the Automatic Image Alt Attributes plugin. Now whenever you add an image, the plugin will add alt text which is the same as the file name.

<img src=”https://website.com/wp-content/uploads/2016/08/WP-Fastest-Cache-Plugin.jpg” alt=”WP-Fastest-Cache-Plugin” width=”577″ height=”247″ />

Find Missing Alt Text – Screaming Frog is a free tool that shows you all images missing alt text.

  • Download Screaming Frog SEO Spider
  • Enter your website and click “Start” to crawl the website
  • Click the images tab
  • Go to Overview → Missing Alt Text (see below)
  • Locate those images on your site and add alt text
find missing image alt text
ScreamingFrog is a free tool that helps you find missing alt text effectively

How to optimize images with Alt Tags?

The first step is to understand what Alt Tags (or Alt Text) are used for. In this case, these are important signals that search engine uses to understand what the image is all about. Spiders or web crawlers are able to understand words but not images.

The second step is to create short and specific alt tags that make sense to search engines. Here are two examples of alt tags for the below image.

Sample of Image Optimization using Alt Tags
What can you understand from this image?
  • This is a sample of a good alt tag: "A boy playing with a puppy"
  • This is a sample of a bad alt tag: "Dog"

Having the right alt tag is important for image optimization especially in WordPress. WordPress allows you to optimize the image by inputting alternative text in all images (as seen below).

Alternative Text in WordPress

Wrapping Up: Image Optimizer WordPress

The image optimization process is an important process that will impact the way your WordPress blog works/performs.

By using image optimizer WordPress, you stands a higher chance in getting more traffic from search engines and your blog will load faster.

Reginald Chan

Reginald Chan

A meticulous entrepreneur by nature, Reginald is a sought-after success coach, digital marketing consultant and TEDx speaker from Asia. Currently, he teaches others how to make money online for free.

Grow with confidence

Copyright © Reginald Chan | All rights reserved