If you resize your images down to either the max-size at which you plan to display them (or slightly larger) 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).
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). Don’t use PNG files unless you need images that are partially transparent (they have huge file-size compared to jpegs)
Further, if you take the time to reduce your images before you upload them, the uploading process will be faster—especially if you have a lot of images. 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. An exception to this is if you want to provide an option for your users to zoom in to view details in your images. In this case, it is good to set up a special case for the high-resolution images (to avoid making your pages load slowly for every user). We can do this for you.
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 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.
You can get the size information of an image by right-clicking it to get the image information (“Get Info” > Dimensions) or by viewing the image data from within a folder on your computer (select the image in the folder without opening it and the thumbnail-preview and image data should display in an adjacent window).
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 and unacceptable. Extremely large images should be resized before uploading to avoid this unless you need the very large 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.
