Interactive - Digital Me - Image Optimisation

As part of our research into the Digital Me project and the task to create an online portfolio I have looked at optimising images for use on the web. 

I have experimented with optimising an image for the web.

Here I have shown that in Photoshop I have compressed an image using the control,shift,alt and s key to 'Save for the Web'. This gives more control as to the type and level of compression you want to use more than using presets. Firstly when compressing the image I chose from the presets in the upper right corner of the window. These included, JPEG ( low to high ), PNG-24, GIF restricted and others. I also changed the size of the image so all the tests would be of equal size to compare the size of the file and the quality.

Here is the original image.

File Size 500x333pixels

72dpi
120kb

Same image compressed to JPEG low

File size 500x333pixels

10.2kb

Same image compressed to PNG 24

File size 500x33pixels
212kb

Images that are on the website to be viewed as work such as photographs in the gallery, I will use JPEG compression to decrease the file size of the images whereas for graphics such as a title logo I will make use of PNG compression.

This is necessary to address because if an images data is too large it may take too long to load on a standard broadband connection and require high graphics capabilities whereas if the image is suitably sized and reformatted then this will not subtract from the viewers experience.

However this is a compromise because it is a balance between the quality of the image and the file size that is right for the developer.