Image Optimizer WordPress: 12 Ways To Optimize WordPress Images
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.
Here's a quick 5-minutes video to kick start
How To Optimize Images Without 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.
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.
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.
Specify Image Dimensions
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.
Combine Images Into CSS Sprites
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.
Avoid Image URL Redirects
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.
Crop Images For Optimized Versions
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
The cropped image:
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
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.
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)
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
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 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.
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.
Saving Images Using The Right Format
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
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.
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.
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).
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.
Young at heart and a deep passion for entrepreneurial success, Reginald is devoted to share everything he had learned about online marketing with the public. Follow him for more awesome postings.
Build An Email List (Faster)
Grow With Confidence