If you resize your images down to slightly larger than the max-size at which you plan to display them before you upload them to your website, you can get better image quality than if you rely solely on the image-resizing functionality of your content management system (and definitely better image quality than if your content management system doesn’t handle image-resizing at all).
You can find the meta data for your images inside a folder on your computer’s desktop (or by right-clicking on the image). There you’ll see the dimensions in terms of width/height in pixels and the file size in terms of kilobytes, megabytes or even gigabytes (KB, MB, GB). 1100-1500px high is about as large as you will need any images to be and you will often be fine with images that are ≤800px high for your web content. Exceptions to this are (i) if an image is to be used as a full-cover banner image (in which case a 2000-2560px-wide image is best) or (ii) if you want to provide an option for your users to zoom in to view details in your images—in which case, to avoid making your pages load slowly for every user, it is good to set up a special method for displaying the high-resolution images. We can do this for you.
JPEGs are the best file-format for most website images and you can save them at medium quality (rather than high-resolution) without there being any noticeable difference on a web-page (unless you have offered a zoom-in option). WebP format images are also safe to use but although they have are good for sending in emails, they’re not especially better than jpegs for solving file size/resolution issues on websites. Don’t use PNG files unless you need images that are partially transparent (they have huge file-size compared to jpegs) and don’t use images that have been created especially for print jobs (with embedded color spaces).
Photoshop is the best image-editor for quality resizing (and you may like to read How to Resize Images for Your Website in Photoshop about taking careful steps in the process). Alternatively, your computer’s image-editor may work for you or you could try the free app Squoosh or the free software Canva.
The most important thing is to only use images that are as large as you want or slightly larger.
Also: don’t ever upload an image at a smaller size than that at which you want to display it. Digital images become blurry if you enlarge them.
What Size Do You Need for Display on Your Site?
To decide what size your images need to be displayed at, you need to think about:
- the maximum sizes of the content containers within your website’s layout
- the sizes of the device screens on which they are going to be viewed
- the way you’re going to use the images (cover-images, banners, slideshows, thumbnails, general interest, etc)
WordPress Users:
If any of the images that have been uploaded at sizes that have either dimension greater than 2560px, WordPress automatically creates a “scaled” version of the image and these images tend to be blurry. Extremely large images should be resized before uploading to avoid this unless you need the very large original image for a zoom-able image or if you are displaying a very tall image and need the image at full width. In this case you have to access the original image via the code.
For more on this subject, please read this article: Best Image Sizes for Your Website or Blog.
