Images And Your Website

As usual, there are no hard-and-fast rules, but there are some gererally accepted standards you can use as a guideline. We will get to that in a moment.

First a note about supplying images for your site.

Overall Size

There are two size areas you should consider:

• the size of the image in terms of width by height
• the size of the image in terms of the disk space it takes up

A modern digital camera will take an image of (for example), 3,000 X 3,000 pixels width by height.  This image will be about 5 Megabytes in size.

Both of these are far too big to load to a website.

• 3,000 bty 3,000 is too big for any computer screen, and the computer will rezise it automatically for display.
• The 5 MB disk size will take a long time to download.

There are literally thousands of resizers available, but here are a few links to free image resizers on the internet. These all do a great job, which one is best is up to you.......  have a play around with these.

• Compressor.io
• TinyPNG
• WebResizer

Aspect Ratio

Aspect Ratio is the relationship between the width and the height of an image, and there are various ratios, of which this document will only discuss the 3 most common. Here, the actual size is not the important thing....  it is the ratio of the sides which matter.

This is an important and vrey simple concept which you must have clear in your mind, even before you begin to think about the content of the images.

In some places you would want to have a Wide (or panoramic) ratio picture, (eg a banner at the top of your website, or pages), in other places, you might want a Square ratio, (eg in some articles), and in others you might want a Tall ratio image (eg down the side of an article).

So, you must select an original image which is sort of, in the ratio you need for the final image. For example, if you wanted to end up with a Tall image, there is no point in selecting an image which is originally Square, then cropping it to tall... you might lose something.....  same if you wanted a Square or Wide image.... so, you should start off with an original image which is closest to the ratio you want to end up with.

Then your developer (or yourself), can manipulate the image to produce the end result you want, and still make it look good.

The Bigger The Better

Since all your content (images etc), are sitting on a webserver, somewhere in the world, everytime a visitor clicks on your site, that content must be physically downloaded from that server.

So, website images must be small in terms of file size, otherwise your page will take ages to load, and visitors will simply not wait for this to happen.

HOWEVER.....  when you are selecting images for your developer (or yourself), to actually load to the website, you should choose the very largest and highest resolution you can possibly find!

This sounds like a contradiction, but read on.. its not.

Modern digital cameras take pictures which end up abput 4-6 megabytes.... this is a good size for a developer to work with, but a 5 MB picture on a website would take ages to download, so therefore, can't be put on a website, in its original size.

Your developer will take the picture you have supplied (the very large file size), and use photo editiing software to reduce both the size and quality of the image to the point where it:

• still looks good - thankfully, images displayed on a computer screen do not have to be of the very highest quality...
  • on a computer screen, the human eye can't really distinguish between an "excellent" and a "medium" quality image (printed images are a very different matter in this respect)
• is small enough for the website download in terms of file size, (eg 80 K bytes as opposed to 5 Megabytes)
• is big enough to convey the message you want it to in terms of file dimensions (eg 1200 pixels wide as opposed to 4800, or 150 pixels)

 The Rule Of Thumb

Your developer can manipulate a very large, high quality image DOWN in scale, quality and size, and still make it very presentable,   but it is more difficult (and sometimes impossible), to manipulate a small, poor quality image UP in scale, quality and size.

The Quality And Relevance Of The Actual Picture

When we are looking at a picture we have taken ourselves, or one we have come across somewhere.....  lets face it........ we can tell immediately if it's good or bad.

Be very critical of the pictures you are selecting for your website......  don't forget, that hopefully thousands of people will be looking at this on your site.

What will they, your visitors think of it? Dont forget... its not really about what you think of the picture... ita all about what your visitors think.

• Is it blurred????  ....  buzzzzzz......bad.......
• Is it very dark or underexposed????  ....  buzzzzzz......bad.......
• Is there a big flash burn in the picture????  ....  buzzzzzz......bad.....
• Is it too small for what you want???? ....  buzzzzzz......bad.....
• Is it well composed???? ....  buzzzzzz......bad.....
• Is there a main area of interest?????? ...  buzzzzzz......bad.....
• Would you frame it and hang it on your wall???? ....  buzzzzzz......bad.....

Make sure the picture is relevant to the article it is appearing in. For example, the beautiful and professionally taken picture of your kitten, or grandchild might be absolutely fantastic, but what has it to do with your article on offshore oil and gas mining, or using heavy earthmoving equipment to dig sewer trenches????

Where are you putting the picture?   wide banner at the top???? square picture in the middle of an atricle??? etc......  remember Aspect Ratio!

The important things to consider and remember are:

• Aspect ratio should suit the requirement
• Original image size and quality should be the very biggest and best you can provide
  
• The image should be relevant to your article, or web page

Hopefully, this has given you some ideas.

As mentioned before, there are no hard and fast rules....  its all about what you and your visitors want. Pictures compliment articles.... Even without reading the article, hopefully, the picture in say, the banner, will give the visitor an immediate idea of what the article is going to be about.

After that, its up to you and me (as a developer), to make sure the picture fits technically....... too easy!

Some Common Picture Sizes (dimensions, in width by height)

There is no real standard as such, it's all up to what suits your particuar presentation requirements, so don't put much too dependence on the sizes below...   they are simply examples, and are here just to give an idea of a few different sizes and ratios.

The ratio is the relationship between the width and height of the image, For example, take the 1st one below, 1:1.33. In this case, the width is 1.33 times greater than the height (approx). So, 480 * 1.33 equals 640 (its actually 638.4, but you get the picture... pun intended :-)  :-) )

Common Computer Screen Image sizes

Common Tablet Screen Image sizes