Pop Up Image

Get the Full PDF guide to creating an online store with WooCommerce (88 pages) for FREE

A comprehensive database for everything WordPress related.

TOP
WPKlik Logo Newsletter

Sign up and receive a free copy of How to Create an online Store with WooCommerce (full guide)

How to Optimize Images in WordPress with Ease

How to Optimize Images in WordPress with Ease

Visual elements like images or vector illustrations are great for boosting up the website content. Their power to spruce up posts or pages is the reason they have so important role on websites. No matter what website type you run, what kind of brand image you want to create and what’s your strategy toward competition, using the images in a proper way is great for improving user experience. For example, eye-catching images will attract people’s attention or even help in holding users for longer on specific content. Furthermore, images are an integral part of articles and texts. They not only serve as the illustration, but also complement the story by highlighting its most important aspects. Also, the right images can completely transform the website’s presence to make it more engaging for the users. WordPress gallery plugins are the best tool to display images in a stylish manner. Thanks to them, the website’s look and feel can become more authentic and modern. On the other hand, images with low resolution or wrong size can damage your website’s reputation. For this reason, we prepared a detailed guide on how to optimize images in WordPress, so you can make the most of your website’s design and functionality.

Why You Should Optimize the Website Images?

You probably already know that too many plugins can impact your website’s loading speed. As for the images, they can take considerable space over your website as well. Huge images can be the main reason your website is slow. Therefore, optimizing the images the right way, can make wonders for increasing page loading speed. You can always check the page speed to see how you can manage and optimize the images to get the best results. Why is this important? The majority of website visitors won’t even enter the website if it loads too slow. This increases the bounce rate meaning that your visitor won’t even see the content you share. Furthermore, limited website speed is bad for Google ranking. To make the most of SEO, don’t forget to add a WordPress image caption and to optimize the images before uploading them on the website. Lastly, by optimizing the images in WordPress you will need less storage on your servers, which can save you money.

How to Optimize Images for Web

The first thing you should pay attention to when it comes to image optimization is image quality. No one likes blurred images that make it harder to enjoy the whole content. Another important thing you should have in mind is the image size. The frequent mistake is using extremely large images. For full-width displays, always go with larger images. For sidebars, on the other hand, you don’t have to go with a large width. Depending on your needs, you can resize images to fit each separate part of your website perfectly. You can either edit your image in WordPress or use different programs, like Photoshop to do it. Also, you can rely on plugins. For this purpose, you can use Imsanity plugin. This tool automatically resizes image uploads down to a size that will work great for display in the browser, while staying large enough for typical website use.

Imsanity plugin

Imnasity allows you to predefine the width and height to which you want to resize the previously uploaded images. After you install and activate the plugin, you can find its options by navigating to Settings > Imsanity.

Imsanity plugin settings

Here you can also set the image quality, choose to convert PNG to JPG, or to convert BMP to JPG.

Now let’s see what types of image files you can use in WordPress.

  • PNG

PNGs are commonly used for design elements. It has a larger size and produces higher quality images. PNG reduces the file size based on the lossless compression. Basically, it cannot reduce the file size in a traditional manner, instead it breaks your images into smaller pieces. PNG is great if you want to ensure higher image quality, but it also implies a larger file size. Go with PNGs for transparent backgrounds or special website elements like CTA buttons, promo banners, logos, illustrations, etc.

  • JPG

JPG is mostly used for photos since it supports a wide spectrum of colors. It uses both lossy and lossless optimization and it can be compressed to smaller sizes. Basically, what it does is stripping out the background data to create a greater reduction in file size, without compromising quality.

As such, if you’re looking to work with smaller file sizes, JPG is the one to use.

  • GIF

Based on lossless compression, GIF is the best option for animated images. It’s great if you need more dynamic content, but don’t want to slow your server. As an alternative to videos, GIFs are pretty lightweight and are a good choice if you don’t want to affect your website’s speed. This very popular file type can be a nice asset to your website when used with the right strategy.

  • SVG

Minimalism is everywhere. For this reason, this file type has a special place in web design. In a nutshell, SVG is a scalable vector image. It’s flexible, lightweight and ideal for small website elements. Use SVGs for logos, favicons or icons.

In the end, pay attention to File size. In WordPress it’s recommended that larger images be between 60k and 100k. When it comes to small images they should be no larger than 30k.

Best Image Optimization Plugins for Speeding up WordPress

Smush Image Optimization, Compression, and Lazy Load

Smush Image Optimization

Smush plugin is a super-powerful image optimization tool. Based on lossless compression, this plugin strips unused data without affecting image quality. With it you can optimize up to 50 images fast and easy. Another great thing about this plugin is incorrect size image detection. In other words, it will locate the images that are slowing down your site. This how, you can be sure which images should definitely get resized. Moreover, you can use it to even optimize images that are not located in the media library. Lastly, Smush allows you to set a max width and height so images will scale down when they compress.

Features that make Smush the best plugin for optimizing images in WordPress:

  • Lossless Compression
  • Lazy Loader
  • Bulk Smush
  • Image Resizing
  • Incorrect Size Image Detection
  • Directory Smush

Imagify – WebP & Image Compression and Optimization

Imagify Plugin

Imagify plugin is a great option for getting lighter images while keeping their quality. After you install it, all the images will be automatically optimized when uploaded into WordPress. Imagify is compatible with WooCommerce and NextGen Gallery plugin. Imagify offers three levels of compression. Normal lossless compression where image quality won’t be changed in any way. Secondly, there is aggressive compression, based on lossy algorithm. This is stronger compression a tiny loss of quality. In the end, there is ultra-compression, the strongest of these three.

Features that make Imagify the best plugin for optimizing images in WordPress:

  • Compatibility with WooCommerce
  • Compatibility with NextGen
  • Three Types of Compression
  • Ease of Use

Compress JPEG & PNG Images

Compress JPEG & PNG images plugin

If you want to improve your website’s speed, optimize your JPEG and PNG images with plugin made by TinyPNG. It will automatically optimize new images you upload or the individual images from the media library. This plugin also resizes huge images by limiting the maximum width and height. What is really great about it is the fact it supports compression of animated PNG.

Features that make Compress JPEG & PNG images the best plugin for optimizing images in WordPress:

  • Background Optimization
  • Automatic Image Optimization
  • Supports Compression of Animated PNG
  • Easy Bulk Optimization

ShortPixel Image Optimizer

ShortPixel Image Optimizer

This free, popular plugin with over 100k installations, will be your helping hand if you want to improve your Google ranking. How? By optimizing any image or PDF document on your website. Shortpixel plugin is easy-to-use so you can optimize your all images with one click only. With it you can also optimize thumbnails as well as featured images. And the list of its functionalities doesn’t stop here. Use it to convert any JPEG, PNG or GIF to WebP to thrive on Google.

Features that make ShortPixel the best plugin for optimizing images in WordPress:

  • Compress JPG, PNG, GIF
  • No File Size Limit
  • Convert any JPEG, PNG or GIF to WebP
  • Works Great with NextGEN Gallery

Optimus – WordPress Image Optimizer

Optimus Plugin

Optimus plugin is WordPress image optimizer that allows you to reduce the image size up to 70%. However, it keeps the image quality unaffected. After you upload the images to your media library, the plugin will send them to the Optimus server, where they are optimized and sent back. Furthermore, it saves the resized image in the media library.

Features that make Optimus the best plugin for optimizing images in WordPress:

  • Reduction of File Size During the Upload
  • Optimization of All Preview Images of a Photo
  • No Adjustments to Code Necessary
  • Faster Load Times for Blog Pages
  • Support for Woocommerce

Let’s Wrap It up

To make sure your website ranks great on Google, pay attention to its speed. This amplifies you should never skip optimizing images in WordPress. Our recommendation is to use some great plugins for the best results.

We hope this article was helpful. If you liked it, feel free to check out some of these articles as well!

Newsletter

WordPress perfection at your fingertips.

If you enjoyed this article, feel free to subscribe to our newsletter using the form below. You can also follow us on Facebook and Twitter and subscribe to our YouTube channel for WordPress video tutorials.

Leave a Reply