Why you need to set up Google Analytics, Google Webmaster Tools and Google Custom Search for WordPress. Importance of these free but enormously effective and efficient services by Google. An overview of features offered by…
A complete guide to Optimize Images in WordPress. In this article, I will discuss WordPress Plugins, Image Editing Tools, Graphic Applications and Image File Formats for image optimization in WordPress. Also, 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 make the web page slow, this frustrates the reader. As a result the reader went off from your site.
Why Image Optimization in WordPress
- Un-optimized images slow down your website and the readers don’t like slow loading web pages.
- Also, 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 as possible as lesser 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, image editing software allows saving images in a numerous number of formats. However, PNG and JPEG file formats can be seen commonly on the web. Now the question is, which one you should choose for your WordPress site and which file format is suitable for which purpose.
Before we dive in the comparison of the image file formats, let’s understand what makes these file format different.
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.
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|
|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 inbuilt 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 allow 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 availabe free while others are paid. You can choose depending on your requirement and budget.
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.
More advance free 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 handpicked 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.
Furthermore, you can use WP-Retina-2X WordPress plugin for retina image support in WordPress for retina displays.
I hope this guide help 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.
You may also like to read:
1. How to Add Lazy Load Comments in WordPress [Plugin]
2. How to Optimize WordPress Robots.txt file for SEO
3. Cache Gravatar Images in WordPress to Optimize your site speed
4. How to Display Code Snippets in WordPress