Image size guidelines

Image sizes

Something to take into consideration on most of todays websites, is the responsive design, which allows the content to automatically adjust to mutliple screen sizes. The rule is that the image should always be the size, so that it fits the content area where it is shown the largest. This is often in mobile or tablet view, except for images slides or where images should stretch to the full size of desktops.

A recommendation is to use images that are 1920 pixels wide. This will ensure that the quality is good even if scaled down by TYPO3.

An image that is shown in a small format on a desktop, for example promo boxes placed in columns, might actually need to be larger in a tablet or mobile view where they are displayed in one column instead.

Image weight

Something that is also important, is the image weight. An image can be small in pixel size, but have a really high resolution, and therefore weigh a lot. A computer screen can never show more than 72 dpi (dots per inch), whith the exception for retina screens wich can show 96 dpi. In comparison, an image used for print, should have a much higher resolution. In these cases they normally have 300 dpi, to give a sharp result.

The reason for keeping the file weight low, is to not affect the performance of the website sever, and also to keep the loading time as low as possible for the website.

Keep in mind that a compressed image will get pixlated if it is scaled up on the website. So always make sure that the image has the largest size that it will be used in on the website and preferrably at least 1920 pixels wide.

Image size in practice, an example

I have a high resolution image that meassures 5616x3159 pixels, and this file weighs 17,8 MB. Since a computer screen rarely exceeds 2560 pixels in size, we can easily scale it down to that width and save it with a 72 dpi resulotion. The file will now weigh 3,7 MB instead. But it is still a bit heavy, so I will compress it as well. Now the image measures 2560x1440 pixels and weighs 877K, and is more suited for the web. Depending on where I was using this image, I could have scaled it down even more in pixel size.

Useful links

Here are some links to online tools that can help you with re-sizing and compressing images.

A useful tool for compressing images can be found on www.tinypng.com. Note that this tool can be used for images that weigh up to 5 MB each. Also you should never compress an image more than once. Compressing it more than that will affect the quality, making the image pixlated.

For easy re-sizing and croping, you can use the online tool Squoosh. This tool gives you multiple editing options, which also includes adjusting color etc. To see a short tutorial about the editor and its possibilities click here.