Optimizing Images Doesn’t Have To Be Hard. Read These 5 Tips

Optimizing Images

Share This Post

Share on facebook
Share on linkedin
Share on twitter
Share on email

Why optimize images

Optimizing Images in WordPress can be an art, but it’s not one that everyone understands. 

When you optimize an image, you’re really improving your website performance, making the user experience for your visitors much more pleasant.

There is no simple formula to optimizing an image. Depending on the quality, size, and your proposed use of the image there can be any number of steps you will what to take.

What are those steps? 

In this article, I hope to give you some tips and tricks to help you gain the most from the images you use.

Tip #1: Image formats

Select the correct format for your images.

There are a number of image formats you can use for your website and selecting the right format for optimizing images is important. WordPress does not natively support all image formats, only the most popular image formats are discussed here. There will be some formats you’ll want to use that you won’t be able to upload. You’ll either have to modify the extensions WordPress supports or generate the format from an existing image in another format.

Make sure you understand how each image format is used and when.

Whenever possible, you’ll want to use the correct format for your post or page.

Image Formats

.jpg
Jpeg/jpg is the dominant image format. It is one of the oldest and most popular formats of image compression used for digital cameras, photography, and image capture.  

.png
These images are pixel-based, using a lossless encoding method, and are a good choice for storing line drawings, text, and graphics. Png images are ideal for complex images but are larger while maintaining high quality.

.svg
scalable vector graphics or svg is a vector-based image format that represents an image as a set of mathematical figures.

SVG images can be scaled up and down as needed without losing any quality, remaining crisp and clear at any resolution, making them a great choice for responsive web design.

.webp
WebP is a modern image format developed by Google that provides superior lossless and lossy compression compared to jpeg for images on the web. In addition to supporting transparency, and animation, webp files are smaller can achieve a much as 30% more compression over jpeg and load faster, without having to sacrifice quality.

.gif
Graphics Interchange Format or GIF is a bitmap image format developed at the online services provider CompuServe the format has widely fall out of popularity in favor of .png due to copyright issues with its developer. 

It is used for low-resolution video files and animation.

Which one is better?

There is no clear winner, jpg images are clearly used the most, but your use should depend on how and where you’ll be using the images. A good rule of thumb should be to use the format that best meets the needs of your project. Clearly, saving in .jpg format is recommended for pictures while .png images are preferred for other images.

Consider using .svg images for logos whenever possible.

The svg and webp formats are emerging and are not as widely accepted or supported on websites.

Webp image files are not natively uploadable to WordPress, but there are image compression plugins that will convert other image files and serve them as needed.

More about that later.

Other image formats you might see but are used for more specialized purposes include gif.

Tip #2: Image size

Make sure your image is sized correctly before you upload it to your website.

Image Size

Image size can be interpreted to mean a couple of things.

  1. The dimensions of the image – determined in height and width measured in pixels.
  2. The image density – how close the pixels that make up the image are together.
  3. The size of the image when saved

Any one of those contributes to how “big” the image is.

Some common misconceptions about saving images:

  • Don’t worry about the size of the image, I can always resize it after I upload it.
  • I can stretch the image to fit if its too small
  • Just upload the biggest image I can

Any one of those will cause you a problem.

Only shrink your original image – Enlarging an image decreases the pixel density and can cause it to be blurry.

Here’s an example. The smaller image is the original.

blurry - bad attempt at optimizing image
Blurry Image

When uploading an image to your site consider the following.

  1. What is the largest possible size you will need on the site? Use the default screen size as a starter. 

    No image should be any wider or taller than the largest possible screen you’ll support. Use those guidelines to determine how big a cover image should be
  2. On a page, think about how big your biggest image will be. Don’t upload an image any larger than that. If it’s too small, correct it and re-upload it. 

Yes, you may still need to resize the image, but starting with an image with a quality you’ve got control over will give you some flexibility.

Stretch an image?!

Never. – Images should be resized proportionately, equally changing the width and height. Stretching an image causes distortion.

Image stretched in an attempt to optimize
Stretched Image

Tip #3: Edit your Images before you upload them

Most people assume WordPress can handle editing your images and while that is true, you can save space and be more efficient by editing the images to the size you need before you upload them to your site.

Use a desktop or cloud-based editing tools like Illustrator or Affinity Designer. There are also a number of free options like Inkscape, Gimp, or paint.net.

Those tools are not just to create images, they also let you crop, edit, and resize them. They’re also an excellent choice to change an image from one format to another.

Tip #4: Use image compression

Website Image compression is the process of reducing the image size without losing image quality to help improve load time.

There are two rules of thoughts about image compression.

  1. Compress the image before you upload it to the site
  2. Let an image compression plugin handle everything for me

Both methods make sense and smaller images will definitely improve your load time, but you should also try to maintain as much control over the quality and size of the images as possible.

I recommend you use both methods. 

Use an Image compression application to compress the image prior to uploading.

The desktop applications mentioned earlier can help with the compression, but if you want to use a web-based application, try Canva or Crello. Each of those allows you to control the compression and reduce the quality of the image to be more web-friendly. You’ll want to reduce the pixel density to a recommended 72 – 96 pixels.

Install an image compression plugin like Smush, EWWW, or Imagify. When uploading your image to your site, those applications have the ability to further optimize the image as well as applying other image optimization tricks. Some designed to further improve performance.

  • Compress Images
  • Convert to other formats
  • Manage the use of webp where supported
  • Convert and resize into the formats supported by your theme
  • Cache images for fast load
  • Support lazy loading

Consult the documentation for your compression plugin to see what it can do, play around with the settings.

Tip #5: Use Image Caching

Caching your images will improve image load time.

To improve performance, many site owners have implemented some form of caching. However, caching is evolving. Image caching is becoming popular.

Decide what type of caching you want to support.

  • A CDN -Content Delivery Network
  • Local site based caching
  • Image caching using one of the popular image compression plugins like EWWW Adaptive Images or WP Compress.

Conclusion

Optimizing images for WordPress is a critical part of improving your site performance and improving page load time for your visitors, but it’s not always something that is easily understood.

While I’ve tried to provide some insight into what it means, this article is not meant to explain how you go about optimizing your images. 

It’s more geared to explaining the why and offer some suggested tools to help you through the process.

For a more detailed discussion on optimizing images, I recommend you read through How to Optimize Images for Web Performance without Losing Quality

More To Explore

Optimizing Images
Tips

Optimizing Images Doesn’t Have To Be Hard. Read These 5 Tips

Why optimize images Optimizing Images in WordPress can be an art, but it’s not one that everyone understands.  When you optimize an image, you’re really improving your website performance, making the user experience for your visitors much more pleasant. There is no simple formula to optimizing an image. Depending on the quality, size, and your

Scroll to Top
Malcare WordPress Security