My first blog, showing the process of learning to research, design and build a website.

Image Optimisation

Optimisation means that what ever it is you are optimising is looking and working in the best possible way. Image optimisation is using the most compressed (smallest file size) yet visually acceptable image in the proper file format for the specific role of the image.

So why is image optimisation needed?

There are two immediately prevalent reasons for image optimization: download time and bandwidth used. These may seem interrelated, but they are important for different reasons. Hardware storage space is a third reason that many only really apply in some cases.

Download time, though not as important as it was in the days of the 14.4k or 28.8k modem, is still a major factor in a sites success. A user made to wait is a user more likely to hit the back button on the website, or click on content that’s loads first instead of waiting for the entire page to load. Losing customers to a page that take 10 seconds to load is unacceptable. Though you may have a fast internet connection, others do not necessarily have these pleasantries, and there are certainly a significant number of dial up users on the internet and these users actually make up the majority in many developing countries.

Bandwidth is the hidden killer of the high traffic site. Plain and simple, bandwidth costs money, and not optimizing images wastes precious bandwidth that will end up costing you money, customers, or both. Most mainstream hosting plans have bandwidth caps that require extra payment for additional bandwidth if you go over your allotted bandwidth. The problem is that you may not be reachable when this happens and your site could be down until you pay additional funds or the bandwidth accrual period starts over again.

Now consider a large site that uses images primarily as its content. What if all the images on Flickr.com were not optimized. What if they were twice the file size compared to what they could be? For a site this large, not optimizing images has a serious impact on the infrastructure of the site. You need twice the data center storage capacity, electricity, data center engineers, part supply, and twice as much floor space to house your servers. Not optimizing images on a scale this large could mean thousands or millions of dollars of unnecessary costs. You better believe Flickr.com has thought about it, and probably has some very advanced image resizing scripts in place.

So now I know the reason for image optimisation I am going to do this to one of my own images.

1) I start a new folder, titled with the name of my website, then inside that I start a folder called ‘images’. When titling files and folders it is important to not use capitols, spaces, numbers (at the beginning) or any other grammar. Only use lowercase and dash (-).

I open my image in Photoshop, it is currently 60MB, so I am going to resize it so that it is exactly the right size for my website. which I have worked out as 376 x 376 pixels. So I go to Image> Image Size, and I change the image to 72dpi, then I can put the dimensions (in pixels) I want my image to become into the ‘height’ and ‘width’ boxes, like below. Now my image is not 60MB but 414K.

Then view the image at 100% as this will show me the exact size the image will be viewed at.

Then I go to the Image> Adjustments>Levels, so now I can alter the shadow and highlight depth and the luminosity of the colours which will enhance the colours to make a brighter image, if I feel that it needs it.

Now I am going to optimise the image. In short this means that I am getting it ready to out online by making the file size as small as possible but without loosing the detail or quality. So once I am happy with the image I go to File> Save for Web.

To view the image as a before and after view I choose the ‘two up’ choice see below:

So the ‘save for web’ box has other options to choose from, see below:

This is where I can start to alter the size of the image for optimisation. So from the top I choose JPEG and tick the box ‘optimised’. Starting with ‘very high’ in the box below I then choose the lower option one at a time until I see a difference. So for this image when it was on ‘high’ I could see a difference so I left it on ‘very high’. The quality is how many different colours the image contains, this is another way to decrease the images size. In the boxes below each image I shows the images size, before on the left and after on the right. So I can see that my current image size is 61K which is an ideal size for my webpage. Then I press save, and I must name the image with the alt text that is relevant to the particular image, so for the image I used the words: shalet-camber-sands-park-resorts-brighton-abandoned-deretict-holiday-alice-volk-photography. Remembering to separate the words with a dash (-). Having the alt text words here is a vital way to get ‘text’ into the page that cannot be seen to the viewer so that my website comes up in search engines.