What Size Image to Use on Your Website?

Whether you have a showcase site to present your brand, your wines, your beers, your cellar or an e-commerce site, the image size is important because it weighs on the display performance of your site and therefore on your referencing with search engines. Indeed, the lighter your site is, the better it is referenced. In addition, the size impacts the responsive, that is to say the ability of the site to adapt on mobile, tablet or computer of any size.

Start With Quality Images

Basically, you need High Definition images. You can have higher resolution photos, but they will probably have to be compressed.

High definition is not just a marketing term, it corresponds to a minimum level of resolution:

HD (high definition or 720p): 1280 px x 720 px
Full HD just above: 1920 px 1080 px
Ultra HD (ultra high definition): 3840 px x 2160 px

You don’t necessarily need to hire a photographer, you have the possibility to download free of charge or to buy high definition photos in the following image bases, which give you the exploitation licenses:

unsplash.com
pixabay.com
pexels.com
stock.adobe.com
thewineshot.com bien sûr !

These photos can be downloaded in high definition but also allow you to freely exploit the photo. Want to know more about how to freely exploit the images? Go to our dedicated article

Finding the Right Balance Between Image Size and Quality

For images (and not only!), size is relative. What is more important is the right compromise between quality and size.

Indeed, a very low size, means a low quality so often a pixelated image.

Here is an overview of the three main aspects that make up “size”:

Optimal file size: the number of bytes the file occupies on your computer. This is the factor that can slow down your website. An image of 15 MB (megabytes) is huge. In general, you should try not to exceed 200 KB. Too large a size means that either the dimensions of your image are too large or the resolution is too high.
Image size: the actual dimensions of your image, in pixels. You’re probably thinking of traditional print photos like 4×6, 5×7, or 8×10. But on the Web, height and width are measured in pixels. So, for example, a typical image on a website or blog might measure 795 × 300 pixels.
Resolution for Web images: A term that comes from the printing world, resolution is the quality or density of an image, measured in dots per inch (dpi). A professional printer may require images to be at least 300 dpi. But most computer monitors display 72 dpi or 92 dpi, so anything more than that is overkill and makes your image unnecessarily large. That’s why there are “Web Export” or “Save for Web” formats: that’s the resolution that is sufficient for the Web.

How Do You Find the File Size, Image Size and Resolution of Your Image?

You can find the file size and image size directly on your computer. If you are on a PC, right click on the image file, choose “Properties” and then the “Summary” tab. On a Mac, Ctrl+click on the image file and choose “Get Info”.

For the resolution, it is another matter: it requires to open the file, often with an image editing program.

Quick List of Image Sizes We Recommend for Your Site

First of all, keep in mind that images should not exceed 200 to 300 Kb for your website. If you have the option, always “Save for Web”, which will give your image a web compatible resolution. You can reduce the size of a large image, but it is very difficult to enlarge a small image. It will look blurry and pixelated. Always keep the original high resolution version so you can rework it.

If your image is too big for your website, you can resize it.

For example, if your photo is 5,000 pixels wide, you can easily resize it to 2,000 pixels wide, 1,200 pixels wide or even smaller depending on how you plan to use it on your website. This will reduce the file size considerably. When you resize, make sure you keep the same proportions so that you don’t distort your image. You can use free online software like iloveimg.com.

Then, if this is not enough you can reduce the resolution by “compressing” the file. The online tool iloveimg.com is ideal. At thewineshot.com, we recommend you buy the web version which is cheaper and allows you to skip this step.