Connection speeds & Image compression

Connection speeds:

When outputting or even designing a website I need to think about what connection speeds will the users be using, I need to make the site file size as small as possible so that the site loads quickly for users. So that my finished website file size is small I will need to do and remember certain things when designing my site:

Image compression:

For my images i will need to make the file size as small as possible so i need to make all my images the correct size (width & height) in pixels DPI does not matter:

As you can see the 72dpi is the same size as the 300dpi version saved at both a png and a jpeg, the only thing that will make the image file size smaller is reducing the size of the image or optimising for the web.

Optimising images:

Using photoshop's save for web and devices i can optimise my image to make them a lot smaller so that they load quicker, photoshop has a wide variety o fop tins in which you can choose to get the smallest file size.

In this window I can choose which format I save the image out at as well as seeing the compared file sizes which help me decide on which file to choose for the web.

I have the ability not only to change the file format but choose how many colours the image uses  and the quality of the image as well as the how the pixel style is changed using different types of dither/cubic etc.

As you can see some of the images are not great quality and are still quite large, i have chosen the bottom right image as it has the smallest file, the best image and will download quickly.

Here is a comparison between the original jpeg and optimised one.

Original

Optimised

 There is no noticeable visual difference between the two images, its just that one is far smaller and better suited for the web.

Bandwidth:

Dependent on the server it is possible to remotely host images externally which will free up bandwidth on the server where the main site is held, a reason for doing this is that you may have a maximum download capacity so hosting files externally will dramatically reduce the about of data the user is receiving from your server, this will help if you have a limited budget/limited download/bandwidth capacity.