Everybody knows the maxim you can’t fit a square peg into a round hole, don’t they? Well, the same holds true for photographs and images for the web. For example; if there is a section or placeholder on a web page which is wider than it is tall then it follows that the content that will fill the space should also be wider than it is tall.
If this is all too obvious for you then please forgive me but judging by the countless times I have been supplied with the complete opposite it would appear that it is not so intuitive to some. So in the spirit of keeping things simple, I thought I would have a go at knocking up some guidelines that might be useful. I will also throw in some extra info about file types and file sizes for those who are extra curious about the suitability of images and photos for website pages.
Landscapes And Portraits
When supplying photographs and diagrams for Web pages it is vital to understand the difference between landscape and portrait orientation. Think of those beautiful old paintings hanging in Galleries and stately homes. Generally speaking, if they feature people they will usually be in portrait orientation and if they feature trees, fields and meadows they will more often than not be in landscape format. Portrait orientation means that the image is taller than it is wide and landscape orientation means that the image is wider than it is tall.
You can’t turn a rectangle on its side and expect it to look the same as before, so regardless of the dimensions, an image in portrait orientation will not fit the same space previously occupied by an image in landscape orientation. Often an image can be edited and ‘cropped’ to suit, but if a lot of cropping is needed to give it the correct aspect ratio then it follows that a lot of detail will be lost and the cropped image might also be too small. [Read more about aspect ratios at https://en.wikipedia.org/wiki/Aspect_ratio_(image) ]
File Size
Not to be confused with the actual dimensions of the image. It is true that the larger an image appears then the larger the file size will be, but it is possible to have a reasonably small image dimension wise which is large in file size. This is bad for the web as large files can really slow down the time it takes to load a page. If you have ever been on a website which is painfully slow with photographs that take an age to appear then it is more than likely due to overly large image file sizes.
The best way to shrink an image file size is to optimize it using Photoshop or similar software. But if you don’t have Photoshop there are plenty of online image file shrinkers online, some more effective than others. Try a search for online image compressor and take your pick.
The main thing to remember when optimizing an image is that it is a trade-off between image quality and file size. Ideally we want the highest quality picture at the smallest file size. In practice this means that some compromise might have to be made; especially for full page background photographs.
File formats
This is not the be-all and end-all, but the most common file formats for images on Web pages are JPG, PNG and GIF. When should they be used? Generally speaking the JPG format is the most suitable for photographs, whereas PNG is good for logos and diagrams. GIF is also good for logos and diagrams and can often feature simple animations, for example, a ‘flashing’ price or buy now message.
If you are providing photographs for a site then the JPG, sometimes seen as JPEG, is the most appropriate format and will feature the highest quality at the smallest file size. It is possible to have a photo in other formats but it will definitely be a larger file than the same photo in JPG format.
Conclusion
If you’re still with me you’ll know that there are 3 factors to take into consideration when providing images for Web pages:
- The Aspect Ratio (landscape versus portrait)
- The File Size (not to be confused with the image dimensions)
- The File Format (JPG, PNG, GIF)
Of course there is always more to learn and I have only skimmed over the surface of the numerous things there are to know about the suitability of images for the web, but I hope this short article will clear up some issues and perhaps even help somebody.
