Interactive: Optimisation.

Today in Shaun's seminar we were looking at optimisation and how it is useful in decreasing image size to help them load quicker for websites. He showed us how you can decrease the image size as well as the resoultion and quality and still have an acceptable image for your website but ten times smaller. The way to do this is to find your desired image and open it in photoshop, from here go file save for web and devices. A box will pop up and it is here that you alter the image.

This box will allow you to edit the file type of which the image is saved as, e.g. jpg. gif. or png. As well as this you can change the quality ranging from 0-100 and also the blur 0-2, this all contributes to lowering the image size. Jpg. is the standard file type used when altering images gif. and png. work on a basis of 256 colours which many images have alot more than, but we were told gif. is very useful for images such as banners on websites and png. is good for photographs and sometimes it can increase the quality.

We were told to pratice and have a play with our own images, particular ones with a high amount of pixels, over 1000x1000 and with a dpi of 300, i tried out with a few images and these were the results.

This was the first image i chose to alter to try and reduce the file size, this original is 1782x1181 pixels and 300dpi its file size is a massive 297KB, but by using the tips we learnt in the lesson i was able to reduce this to this second image which looks pratically identical but it has 428x284 pixels 72dpi and by also reducing the quality of the image to 50 its file size now is 65KB a decrease of over 200KB.

These were some useful optimization tips i found on http://www.junowebdesign.com/web-design/image-optimisation-tutorial.

- You should make each website small in overall size but still look good, if a website loads faster you will get more visitors sticking on the site and higher conversions
- Always use “save for web and devices” in Photoshop, you can see the image size in KB’s at the bottom left corner
- If the image has many colours or complex gradients then save as JPG
- When saving as JPG keep lowering the quality from 100% downwards until it looks satisfactory, never save at 100% quality as this uses many KB’s
- Cut excess bits of images off, these only waste KB’s
- If transparency is needed then you will have to use a PNG
- If the transparent image uses a handful of colours save it as a PNG-8 bit
- If the transparent image uses many colours or gradients save it as a PNG-24 bit, see what it looks like as a PNG-8 bit too just in case it looks ok
- If an image has a lot of repeating colour then a PNG might be the best option (example: a large background with a solid colour). The code for PNG images can say commands such as “50 lines of white pixels” saving masses of space, a JPG for example works on 8×8 blocks of pixels even if the whole image is one solid colour
- If an image is small then a GIF might be the best option to reduce size, see how it looks with different amounts of colours too (less colours = smaller image size)
- If an image has two sections that are very different then treat each image separately, you can pick the best optimisation techniques for both
- Sticking to one colour scheme helps reduce the complexity of each image, for example if an image had only shades of blue and black then it would be easy to optimise, if an image had blue, black, white, red and green then it’ll need to be a JPG and would be larger in KB size
- An image with a simple palette (few colours) can be saved as a PNG-8 or GIF and will probably still look great to use.

From what we have learnt today it is clear that when creating a website it is crucial to minimize all images to allow for faster loading times, but without giving up to much quality,