Cloudinary Blog

Image Optimization in WordPress

By Prosper Otemuyiwa
Image Optimization in WordPress

WordPress is the number one content management system (CMS) in use today, running approximately 27 percent of the entire internet. Several high-traffic websites run on WordPress, and many utilize media, such as images and videos, to attract users and meet their needs.

 

A media-rich website must ensure that all images are optimized to speed up site performance. The faster your site, the higher the re-engagement from users on your platform. And the higher the user's re-engagement, the more conversion rates go up!

 

In this article, we’ll explain how to perform and implement image optimization in WordPress. With these tips, you can ensure that you set up proper image optimization techniques that will make your website flourish as soon as you install WordPress and the theme of your choice.

 

Optimizing Images in WordPress

 

Thankfully, WordPress has an authentic plug-and-play system, called Plugins, for adding extra functionality to your WordPress setup. This system prevents you from modifying the core WordPress code to avoid loss of key functionalities during WordPress upgrades.

 

I’ll highlight a number of Plugins that will help you optimize your images easily on your WordPress-powered website.

 

Imagify

 

Imagify

 

Imagify Image Optimizer is an image compression tool that enables you to speed up your website with lighter images while not sacrificing quality. It offers three levels of compression:

  • Normal, using a lossless compression algorithm

  • Aggressive, using a lossy compression algorithm

  • Ultra, using a lossy compression algorithm

 

WP SmushIT

 

WP SmishIT

 

WP SmushIT - Smush Image Compression and Optimization is an image optimization plugin developed by the popular WPMUDEV. It helps you to resize, optimize and compress your images.

 

The WPMUDEV’s servers smush every single image that is uploaded on your website by stripping out unnecessary data before adding it to your media library.

 

Oh, by the way, it is compatible with other media library plugins, such as WP All Import, WP Offload S3, NextGEN GalleryandWP Media Folder.

 

Tiny Compress Images


WooCommerce


Tiny Compress Images is an image optimization plugin that makes your website faster by optimizing your JPEG and PNG images. Under the hood, it uses the TinyJPG and TinyPNG services. It automatically optimizes new images on upload, as well as those already in your media library.

 

It is compatible with WooCommerce, WP Retina 2x and WP Offload S3.

 

EWWW Image Optimizer

 

EWWW Image Optimizer

 

The EWWW Image Optimizer is a WordPress plugin that automatically optimizes your images when they are uploaded to your website. It uses lossless optimization techniques so that the quality of your image will be the same before and after the optimization.

 

It has a sister plugin, EWWW Image Optimizer Cloud, that enables you to defer the optimization of images to designated servers rather than have it happen on your own servers.

 

Optimus

 

Optimus

 

Optimus is a WordPress image optimizer developed by the folks at KeyCDN. With Optimus, you can reduce files by up to 70 percent. It can optimize existing images too. There are different versions of Optimus:

  • Optimus (Free)

  • Optimus HQ

  • Optimus HQ Pro

 

ShortPixel Image Optimizer

 

ShortPixel

 

ShortPixel is a lightweight image optimization plugin that can compress all existing images. After installation, new images are resized and optimized on-the-fly.

 

It offers both lossy and lossless image compression: Features include:

  • Ability to compress JPG, PNG, GIF and PDF documents.

  • No file size limit.

  • Compatibility with Woocommerce and NextGen Gallery.

  • Compatible with watermarking plugins.

 

Cloudinary

 

Cloudinary

 

Cloudinary is a cloud-based service that provides end-to-end image and video management, including uploads, storage, administration, manipulation and delivery.

 

With Cloudinary, you can quickly and easily optimize your images. Cloudinary automatically performs certain optimizations on all transformed images by default. Its integrated, fast CDN also helps deliver all image resources to your users quickly.

Cloudinary offers:

Automatic quality and encoding: Using the q_auto parameter, the optimal quality compression level and encoding settings are selected based on the specific image content, format and the viewing browser. The result is an image with good visual quality and a reduced file size. For example,

http://res.cloudinary.com/demo/image/upload/q_auto/woman.jpg

You also can use q_auto:best, q_auto:low, q_auto:good or q_auto:eco to adjust the visual quality of your images.

Automatic transformation: The f_auto parameter enables Cloudinary to analyze the image content and select the best format. For example, it can automatically deliver images as WebP to Chrome browsers or JPEG-XR to Internet Explorer browsers, while using the original format for all other browsers. Using both f_auto and q_auto, Cloudinary will still generally deliver WebP and JPEG-XR to the relevant browsers, but might deliver selected images as PNG-8 or PNG-24 if the quality algorithm determines one of those is optimal.

Resizing and cropping images with width and height parameters: Using the width (“w”) and height (“h”) parameters in URLs, you can resize the images with Cloudinary:

http://res.cloudinary.com/demo/image/upload/w_0.5/sample.jpg

http://res.cloudinary.com/demo/image/upload/h_200/sample.jpg

It maintains the aspect ratio, but resizes the image to whatever height and width you desire.

http://res.cloudinary.com/demo/image/upload/w_200,h_100/sample.jpg

Cloudinary supports the following image cropping modes: scale, fit, mfit, fill, lfill, limit, pad, lpad, mpad, crop, thumb, imagga_crop and imagga_scale.

The Table below shows a comparison of the different wordpress plugins and Cloudinary:

  Lossless Compression Lossy Compression Smaller File Sizes Bulk Optimization Compressions of animated PNG
Cloudinary
  • Yes
  • Yes
  • Yes
  • Yes
  • Yes
Imagify
  • Yes
  • Yes
  • Yes
  • Yes
  • No
ShortPixel
  • Yes
  • Yes
  • Yes
  • Yes
  • Yes
Optimus
  • Yes
  • No
  • Yes
  • Yes
  • No
WPSmushIT
  • Yes
  • No
  • Yes
  • Yes
  • No
Ewww Image Optimizer
  • Yes
  • No
  • Yes
  • Yes
  • No
Tiny Compress Images
  • Yes
  • Yes
  • Yes
  • Yes
  • Yes

Conclusion

One of the best ways to improve page performance in WordPress is via image optimization. That’s why you will want to take some time to ensure that all of your images are properly optimized and cached.

 

We have highlighted how to optimize images in WordPress, as well as with Cloudinary. There is a Cloudinary WordPress Plugin available that you can use. It offers cloud storage for your images and automatic image optimization.

 

Cloudinary provides many options for optimizing your images. Feel free to dive in and explore them.

 

 
Prosper Otemuyiwa Prosper Otemuyiwa is a Food Ninja, Open Source Advocate & Self-acclaimed Developer Evangelist.

Recent Blog Posts

Find images & videos with a robust new search engine

Great content is hard to come by. You can invest a lot of time and effort in building a great media library, but if content managers and editors can't quickly find what they need at the right time, it's almost useless (and frustrating). Good search capabilities allow you to provide them with a better experience: present relevant content or a well-organized catalog by a variety of criteria such as tags, folders, size, resolution, aspect ratio, faces, colors and many more.

Read more
Video at Large Scale - Contributions from the Developer Community

Video is an increasingly important component for websites - whether it’s to inform visitors, enhance user experience or support sales and marketing efforts. But delivering high-quality video at large scale can be quite a challenge. You need to consider encoding, format, bandwidth usage, delivery and the devices on which visitors may be watching the video, to name just a few concerns.

Read more

Build a Vue Watermarking App for your Image Gallery

By Christian Nwamba
Build a Vue Watermarking App for your Image Gallery

If you intend to build a photo gallery online, you have to seriously consider how to protect the images from users who are not buying them. While visitors need to see the picture before purchasing, there needs to be a way to ensure that even serious buyers are not tempted to use the images without agreeing to your license terms.

Read more

Should You Transform Images On Upload or On Demand?

By Christian Nwamba
Should You Transform Images On Upload or On Demand?

As a developer, you hope and anticipate that your website or mobile application will be accessed by different users on various devices. To improve the user-experience, irrespective of the viewing device, you need to make sure that each image adapts to different graphic layouts, device resolutions and other viewing requirements. For example, for an E-Commerce site, one image will be displayed on different pages — home page, product page, shopping cart and more — and will be viewed on a desktop, cellphone or a tablet. This means that you need to create numerous versions of every image and for a website with hundreds of images, manual manipulation is not scalable.

Read more
Introducing Website Speed Test: An Image Analysis Tool Integrated with WebPagetest

Because images dominate page weight, methodical image optimization can have a significant effect on conversions and user experience. And the performance tools you choose to use can have a powerful impact on how websites are built and maintained. One such popular open source tool is WebPagetest. It is designed to measure and analyze webpage performance, which is why Cloudinary chose to partner with our friends over there to launch Website Speed Test.

Read more

You might have read some tutorials or articles explaining the importance of images and how to optimize them to deliver a great experience to your users. But does this work really translate into wins for your company? In this talk, you see real-world examples of the positive impact that image optimizations can have on metrics that your bosses and clients care about. You will walk away from this talk with compelling data and useful tools to help you get buy-in and support for this important user experience work at your company.

Read more