Image Optimisation – Sizing images for web

by | Aug 5, 2018 | Getting Started, Wordpress | 0 comments

Preparing images for use on your website can be confusing, not least because of a certain myth that is perpetuated by people who should know better!

For most people, especially those working in any kind of creative industry, the balance of the quality of the image vs how long it takes the page to load is extremely important. I know everyone has fast internet connections these days, but in order to deliver the best User Experience, your site should load as quickly as possible.

How big should my image be?

How big you’ll need your image to be, in pixel dimensions, depends on how you’re going to be using it.

A high res Retina screen can be up to 2880 pixels wide. So if you want to show an image full screen, and have it look amazing on a Retina display, then you’re going to need to export it at this width. But you’re going to pay a penalty for this on smaller screens, as resizing images is slow (unless of course you’re using Adaptive Images, which I’ll cover in a bit).

Other common widths can be:

  • Full width HD: 1920px
  • Standard width of content: 1080px
  • Image taking up 1/2 of your content space: 510px

In order to get the best balance out of your website, you’ll need to know what size image you need. If you upload it too big, then any speed reports are going to flag “not serving scaled images” as an issue with your site.

Keeping the file size low

Once you know the pixel dimensions of your image, you then need to adjust your settings to get the file size down. Especially in the case of retina-ready images, 100% quality jpegs will be huge!

If you’re exporting from Lightroom, then you want to dial that quality slider down to 75%.

If you’re exporting from Photoshop then you want to use quality 9.

You can also run the image through JpegMini if you have it, I always do and it does reduce file size with no visible loss to quality of the image.

But what about PPI?

Contrary to popular belief the PPI of an image makes absolutely zero difference to file size. The only thing it does, is set a meta-tag which determines the default print size.

If you have a 3000px wide images set to 300 PPI, then the default print size is 10″ wide.

If you set the same image to 72 PPI, then the default print size is 41.67″ wide.

It makes no difference to actual print quality, if you were to print that 72 PPI image, 10″ wide, it would still be 3000/10 = 300 PPI.

Try it for yourself, export an image at 300 PPI and 72 PPI, with the same pixel dimensions. I guarantee that the file size will be identical!


Submit a Comment

Your email address will not be published. Required fields are marked *

Related   Posts

Adding pages to menus in WordPress

Adding pages to menus in WordPress

Managing WordPress menus is pretty simple but can be daunting if you haven't done it before. If you're using a visual builder such as Divi or Elementor then it's one of the only things that's managed from within the WordPress dashboard itself, and if you're not used...

Changing URLs without breaking links

Changing URLs without breaking links

How to change URLs without causing 404 errors If you decide to change a URL on your website you have to make sure that you're not going to cause any 404 errors, if the page is indexed on Google, people may well find the old link for a couple of weeks before Google...

How to submit your sitemap to Google Search Console

How to submit your sitemap to Google Search Console

Submitting your sitemap to Google This is one of the fundamental parts of getting your site found by Google. A sitemap is not, as some seem to think, a map of the structure of your site and where viewers can find certain info. But it's a piece of XML that includes a...