contact hamiltro for the best website

Creative Website Design & Digital Marketing


About » The Process » What size should my images be for the web?

What size should my images be for the web?

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.

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 (which does a lot more than resizing and is popular with Instagram users).

The most important thing is to only use images that are as large as you want or slightly larger. Don’t ever upload an image at a smaller size than that at which you want to display it.

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)

For more on this subject, please read this article: Best Image Sizes for Your Website or Blog.