A complete guide to Optimize Images in WordPress and image optimization for web. In this article, I will discuss WordPress plugins, image editing tools, graphic applications, image file formats for image optimization and why image optimization in WordPress is important.
Eye-catchy images are the first interaction of your websiteโs content with the reader. Undoubtedly, images are good for initial user engagement. Sometimes even images can pull the curiosity strings of the user to read the entire article.
The use of high-quality images comes at a price because it increases the size of the web page. Thus it makes the web pages slow, this frustrates the reader. As a result the reader went off from your site.
โฒ Table of Contents
Why Image Optimization in WordPress
- Un-optimized images slow down your website and the readers donโt like slow loading web pages.
- Also, un-optimized imagesย increaseย the size of web pages and the large in size web pages (which use larger bandwidth) are not good for mobile internet and mobile users. And nowadays you do not want to ignore a large number of mobile device user-base.
- Image optimization also helps to remove Optimize Images warning in Google Pagespeed Insights, thus it also improves your siteโs SEO and search rankings as well.
- Large in size images can cost more web hosting charges in long run.
Therefore it becomes important to learn how to optimize images in WordPress so that the image can retain the good quality with least possible size.
Image File Formats (JPEG vs PNG vs Gif vs SVG)
Since, it is been debatable that which image file format (file extension) good for the web. Or which is the best image file format for image optimization in WordPress.ย Also, your image editing software allows saving images in numerous file formats. All this left you with questions like:
which one should you choose for your site? and
which file format is suitable for which purpose?
As image formats are different because of their character/parameter sets and intentive use. So you should select a file format according to the image content and other requirements.
Before we dive in the comparison of the image file formats, letโs understand what makes these file format different.
Compression Type
Lossless: In lossless compression image can be made smaller in size without compromising the quality.
Lossy: In lossy compression image can be made smaller in size with the compromise to the quality.
Color Depths
Indexed: Image with limited colors (palettes, generally 256).
Direct: Image with thousands of colors.
Vector Image: These images are made of lines, points and curves unlikely in other file formats (JPEG, PNG, GIF) the images are made of a grid of pixels.
Image File Format | Colour Depths | Compression Type |
Animation Support |
ย ย ย ย ย ย ย ย Uses |
JPEG | Direct | Lossy | — | Photographs, images with complex colors and gradients |
PNG-8 | Indexed | Lossless | — | Where Transparency is required |
PNG-24 | Direct | Lossless | — | Where Transparency is required, and size is not an issue |
GIF | Indexed | Lossless | Yes | Animations, Logo, Line drawings of small size |
SVG | Vector | Lossless | Yes | Logo and graphics in Web pages, Retina display supported |
If you are interested to read more about image file formats, you should refer is a well-written article at Sitepoint.
Optimization of Images before Uploading to WordPress
There could be many aspects when it comes to the optimization of an image. You should:
Resize: Generally, images by modern cameras and even by mobiles come with very large width and height pixels (7162×4780, 7360×4912, 3600×2400 etc.) and of very large in size (sometimes 10 to 30mb) which neither necessary nor good to use on the web. You should resize such large images to make them usable. You can use basic in-built image editing tools in Windows and Mac.
Crop: The image you want to use has focus object tiny in size and the focus object is surrounded by unwanted background. In such case, you should crop the image and keep the focus object while chopping off the extra background. This will make your image and focus object more presentable and will certainly reduce the size of the image.
Compress: Compression of an image means the reduction in image information which human eye cannot notice. JPEG allows you save the image with larger compression range. However, other formats like PNG and GIF are considered for minimal size images.
Image Optimization for SEO
Though well resized, compressed and cropped image is itself liked by search engines. But there are few things which you can do to make your images more SEO friendly:
- Well structured image file name: Instead of naming an image of barking dog; DSC2306.png or EHHVG.png. You should name it like: barking-dog.png; And some other examples are: dashboard-settings-wordpress-plugin.png, optimize-images-wordpress.png etc.
- Alt-tag: You should notย forget to add a reasonable alt tag to the image. Beacuse a good alt tag make your image SEO friendly. Examples: Barking dog, Optimize images in WordPress etc.
Tools for Image Optimization
Certainly, you need some tools which you can utilize to optimize the images. There are a variety of tools available. Some of them are available free while others are paid. You can choose depending on your requirement and budget.
Free Tools:
Of course, you can use inbuilt image tools Paint in Windows and Preview, Photos in Mac. If you want some advanced features, you can try following free third-party applications.
- PNGGauntlet (Windows)
- Riot (Windows)
- PicPick (Windows)
- Fotor Photo Editor (Mac)
More advance free tools:
Paid Tools:
Yes, you guess it right. Adobe Photoshop is leading the category for Windows and Mac.
Optimize Images in WordPress after Uploading to WordPress
Since various WordPress plugins for Image Optimization are available on WordPress repository. Therefore I am sharing here few hand-picked plugins which I use on my various websites.
WordPress Plugins for Image Optimization
- Smush Image Compression and Optimization:
It removes unnecessary Metadata of the image and optimizes image compression for JPEG to optimizes the image. Also, with WP Smush you can enable automatic compression to all the images you upload to WordPress.
- EWWW Image Optimizer:
This is another good WordPress plugin for image optimization. It plays with the image file format to optimize the image. It also allows automatic image optimization of images uploaded to WordPress.
- WP-Retina-2X:
Furthermore, you can use WP-Retina-2X WordPress plugin for retina image support in WordPress for retina displays.
I hope this guide helps you to optimize images in WordPress. Share other techniques and tools you use to optimize images in WordPress, via the comment section below. Have a question regarding this topic, post it via comments. I will be happy to answer.
Cheers!
You may also like to read:
1. How to Enable Keep-Alive in WordPress to Speed up Your Site
2.ย How to Optimize WordPress Robots.txt file for SEO
3.ย Cache Gravatar Images in WordPress to Optimize your site speed
4. How to Lazy Load Images in WordPress to Speed Up Your Website
These plugins are good. But I would like to recommend Cheetaho Image compression tool. We like this because they have good support and pricing is also good. Compressed images quality is same like using smush or kraken tool. Hope this information will be useful. ๐
Hey Marcco,
Thanks for stopping by and your response.