Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on reddit
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?
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.
Here is a simple list of recommended image optimizer plugins that you should be using to optimize images on your blog.
Smush Image Optimization, Compression and Lazy Load
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.
Imagify – WebP & Image Compression and Optimization
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
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.
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
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
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.
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:
-
CloudFlare – Free and paid CDN services
-
StackPath CDN (previously known as MaxCDN) – Paid CDN services
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.
Download the best W3TC configuration
This is the safest and most efficient W3TC configuration until date. Download and import directly to your W3TC now!
FREE
CloudFlare Image Optimization
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 Polish (Pro Feature) – strips EXIF data and compresses images.
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.
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
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.
- 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
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.
- 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).
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.
Before you go …
This is the safest and most efficient W3TC configuration until date. Download and import directly to your W3TC now!
BONUS
About Me
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.
Recent Posts
Follow Me
WP Hosting Deal 2019
Grow with confidence
Connect
About
-
Stories
- Community
-
Affiliate Disclosure
-
Terms of Use
- Brand Assets
Start Here
Top Picks
-
Best WordPress Hosting
-
WordPress Landing Page Guide
-
Best Drag & Drop Website Builder
-
MonsterInsights Review 2019
-
20+ Ways To Make Money Online
Copyright © Reginald Chan | All rights reserved