How to Optimize Images in WordPress

Updated on

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.

How to Optimize Images in WordPress - Technumero.Com
How to Optimize Images in WordPress

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:

  1. 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.
  1. 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.

  1. PNGGauntlet (Windows)
  2. Riot (Windows)
  3. PicPick (Windows)
  4. Fotor Photo Editor (Mac)

More advance free tools:

  1. Gimp (Windows, Mac, Linux)
  2. GetPaint (Windows)

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

  1. Smush Image Compression and Optimization:
    WP Smush Image Compression and Optimization Plugin - Technumero.Com
    WP Smush Image Compression and Optimization Plugin

    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.

  1. EWWW Image Optimizer:
    EWWW Image Optimizer Plugin - Technumero.Com
    EWWW Image Optimizer Plugin

    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.

  1. WP-Retina-2X:
    WP-Retina-2X WordPress Plugin for Retina Images - Technumero.Com
    Retina-2X WordPress Plugin for Retina Images

    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

Photo of author
Shashank Singh
Shashank is a web addict and amateur blogger. His current interests include blogging, SEO, and WordPress. See his social profiles to know him even better.
Disclaimer: Affiliate links of some product(s) are being used on this page, if you follow the link and make a purchase, we may receive compensation from respective companies. This compensation comes at no additional cost to you.

2 thoughts on “How to Optimize Images in WordPress”

  1. Avatar of Marcco

    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. ๐Ÿ™‚

    Reply

Leave a Comment

Your email address and website details will not be published. Required fields are marked with *.