Images For The web

by | Web Design

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.

the difference between portrait and landscape images

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.

Stock Photos

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:

  1. The Aspect Ratio (landscape versus portrait)
  2. The File Size (not to be confused with the image dimensions)
  3. 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.

Tony Williams

Tony Williams

Tony Williams is the founder of TDL Web Developments and specialises in creating effective and affordable Web solutions for local businesses.

He is the author of The Magic In A Freelance Web Design Business and has been published in WebUser and Net magazine in the UK.

Related Posts

Free Divi Child Theme

Free Divi Child Theme

WordPress is undoubtedly the most popular website CMS in the World. With some very notable companies such as The Walt Disney Company, Mercedes Benz, Vogue, The Rolling Stones & The Official James Bond 007 Website, to name but a few, all relying on the platform for...

read more
Beginner’s Guide To WordPress Website Backups

Beginner’s Guide To WordPress Website Backups

Backups: What are they? Why do I need them? How to do it! Includes full details of how to back up a WordPress website manually without a backup plugin using the hosting control panel and how to create an automatic scheduled backup by using the ever-popular UpdraftPlus...

read more
The Magic In A Freelance Web Design Business

The Magic In A Freelance Web Design Business

Have you ever dreamed of escaping the 9 to 5 and enjoying the freedom of working from home? Perhaps you simply want to enjoy making some extra cash on your own terms? If the answer to either of those questions is "yes" then I believe you will be interested to read my...

read more

Share This

Share this post with your friends!