Image Size – How big should it be?
Source Information
Size comes in two guises
Aspect ratios
The aspect ratio of an image is the ratio of the sides dimension – you remember when we used to get images printed they were 8 x 6 (inches) or 10 x 8 giving an aspect ratio of 4 to 3 (4:3) and this was the size of most computer monitors and screens for some years. Today most monitors have an aspect ratio 16:9 so when we are looking for “full width” images we need to keep that in mind. Some of the new super cinema screens have an aspect ratio of 21:9 but as few people (if any) will be viewing websites on these screens we can ignore them for the time being.
w3schools.com website states “As of today, about 97% of our visitors have a screen resolution of 1024×768 pixels or higher:”
| January 2016 – site visitors | |
|---|---|
| Other high | 30.7% |
| 1920 x 1080 | 18% |
| 1366 x 768 | 35% |
| 1280 x 1024 | 6% |
| 1280 x 800 | 4% |
| 1024 x 768 | 3% |
| 800 x 600 | 0.3% |
| Lower | 3% |
The majority of those screen resolutions relate to an aspect ratio 16:9 and that should be the bench mark for full width images. So for a full width image I would choose either 1920 or 1366 for the width the height will be governed by the aspect ratio of the original image and that must be maintained as the image size is reduced to prevent image distortion.
Image cropping
If you have a big dimension image from your client it give the opportunity to select only a portion of the image to use on the website, the change to remove extraneous bits of sky or the premises next door. But ensure you maintain the aspect ratio in what you keep so that again it doesn’t become distorted.
File Size
We have a bit of a problem here because images used to be defined for printing and it goes even further back when newspaper grey scale images were made up of “dots” so images are still often defined a 600 dpi (dots per inch). Now for a website we have to deal with the pixel density of the screen and how many pixels on the display will used to display each of the pixels defined in the image. There isn’t a real direct correlation between dpi and pixel density but if we look at how many pixels a screen uses to display a single pixel as defined in the CSS image size you find that on most screens it’s a 1 to 1 relationship (if you want more information take a look at http://dpi.lv/#24″). Add to that that most of us our eyesight isn’t that acute. So a typical 1920 x 1080 24 inch screen would have an equivalent pixel density of 92 so if we supply an image that is 600 most of the data is discarded – we shipped a 2.5M file for most of it to be thrown away.
A practical example:
A High Definition stock image from Shutterstock:
6000 x 4000 pixels (300dpi) has a file size of 7.3Mb if we use the RIOT tool (http://luci.criosweb.ro/riot/?ref=RIOT ) and choose the option to reduce the size but maintain the aspect ratio we end up with a 1920 x 1280 image with a file size of 90Kb. An image that will be perfectly acceptable for web use.
What about smaller images?
You need to think a little about smaller images. If you have a number of images on your site that are 500 x 300 pixels then reduce the size of the images to 500 x 300 What’s the point of sending 1500 x 900 pixel images for the browser to resize? It’s just lazy! But if you have the same image that you want to be 600 x 400 then if you use that size and resize it to 500 x 360 (keep the aspect ratio!) you only need the one larger image and the browser has to fetch it once. If the disparity between the image size get too big then it’s better to use to “correctly sized images.
Remember you can always make a big image smaller but making a small image bigger makes it, you and the website look bad.
Recent Comments