Optimisation... (:

Image Compression

I can understand this part of the website design quite well as I come from a graphic design background. For instance, I am familiar with references to 150dpi and 300dpi being used in printed graphics. However, in web design, lower resolutions are required. This is mainly due to increased loading times with larger, less compressed image files. The typical resolution required for web is anywhere between 72dpi and 200dpi (although these are the extremes!)

I have experimented with an image I found on Google by searching "300 dpi image". I originally saved it as a jpeg, then resized it to 500 pixels in width and 150dpi, then resaved as jpeg, gif, png, bmp and tiff files. I did this to observe which file types and sizes are most effective for the web. These are my examples.

Original 300dpi image (jpeg)

150dpi compressed jpeg

150dpi compressed gif

150dpi compressed png

From observing these, it is hard to tell the difference at first, however, jpeg images tend to have more colours and detail in them, and are therefore most commonly used in web. gif files are less used now due to their limited colours and detail. png are often used for logos and detailed images, but have the disadvantage of larger file sizes. (TIFF files are not compatible on Blogger, therefore this has helped my decide against using this straight away!)


Video Compression

We have also looked into compression of film and video files for web. This is very important as large film files such as h.264 take a long time to upload onto a host such as Vimeo or Youtube. For example, my last film project's outcome was a file of over 600mb and I had to join Vimeo plus to upload it for my deadline! It also took a very long time to upload to the my account. However, I feel, once it is uploaded, this from of video embedding is the most simple and successful in terms of my portfolio. If I used flash videos it may not run as fast or be lower quality. To increase the loading speed of my film when embedded on my site, I could compress the original film file using Adobe Media Encoder to something such as an avi or mpg file and then reupload to my Vimeo before embedding this file onto my site.

H.264 file (600+mb)

"Ticket" Group Edit from Samantha Freeman on Vimeo.

MPG file (93mb)


"Ticket" compressed film from Samantha Freeman on Vimeo.