Optimizing and sizing images for web

O

CMS’s like WordPress (and others) enable us to upload and use images easily. And I’m grateful for the ease of use. With power comes responsibility! Because its so easy most times images are not edited or optimized before posting. As a result, websites are slower to load and images look bad due to sizing and cropping.

It’s important to stay disciplined—the small details matter. Let’s talk about achieving faster websites and decent-looking images – with high emphases on how to with WordPress. Resizing and optimizing images should be used in any web-project, just different implementations, tools, etc.

What is optimization?

Optimization can be used to remove some colors that when removed we would likely not even notice, and metadata which is extra data that are not necessary for the web. The goal is to reduce the file size, so there is less to transfer over the internet. Any reduction is beneficial because that means pages load quicker in a browser – more or less!

What is resizing?

Resizing images means sizing images in both pixels and resolution (DPI) appropriately so that the size is what’s needed for the intended use. Experts recommend choosing images that are right-sized for use.

How to optimize and resize regularly

There are many great articles already written, and many.. many more will be on this topic. High level, I’ll post some universal recommendations and my favorite tools below. File formats do change from time to time so do some research on your own.

  • Resolution & Resizing
    • For web DPI or PPI: 72-300
    • If you have an image on the lower end, i.e., 72 DPI, for example, size it 2x space so that when viewed on devices that support the higher resolution, they will benefit from the extra size, and the image will be crisp.
  • File Type
    • No transparency: JPEG, JPEG-2000, WebP
    • With transparency: PNG, WebP
  • WordPress
    • Backgrounds: 1920×1080 pixels
    • Featured posts: 1200 x 628 pixels (credit)
    • Edit images in Media, including resizing
    • See Settings > Media Settings – to define the default cropping.
  • Favorite tools
    • Preview on Mac, resize and set DPI without any other tools (tutorial)
    • Paint on Windows – I don’t use this, but posting as an alternative (tutorial)
  • Favorite WordPress plugins
    • Smush Pro $5/mo – Optimizes, provides CDN
      • This includes a nice feature that outlines images and prompts you to notice images that may be larger than they need to be.
    • Ewww Image Optimizer $7/mo – Optimizes, provides CDN + more

If you are concerned if adding a WordPress plugin might slow your site down read this post that describes what to look for and some tips.

About the author

Jon Cavanaugh

1 comment

By Jon Cavanaugh

Recent Posts

Recent Comments