Most effective way of reducing load times and bandwidth usage of images

Question

I have a giant image that loads on the main page of my website, 1366*690px I realized that is gigantic and decided to take considerations on speeding up the load times.

I first ran it through Smush.it

Then I coded some javascript to load different images dynamically dependent on the browser resolution :

<img id="poster" src=""/>

<script type="text/javascript">
    var width = $(window).width();

    //Attempt to lower bandwidth usage and load times by delivering a dynamic poster size
    if(width<=320) {
        $("#poster").attr('src', 'theme/images/poster/width320.jpg');
    } else if(width>320 && width<=800) {
        $("#poster").attr('src', 'theme/images/poster/width800.jpg');
    } else if(width>800 && width<=1024) {
        $("#poster").attr('src', 'theme/images/poster/width1024.jpg');
    } else if(width>1024 && width<=1280) {
        $("#poster").attr('src', 'theme/images/poster/width1280.jpg');
    } else {
        $("#poster").attr('src', 'theme/images/poster/width1366.jpg');
    }
</script>

I am now asking for suggestions on how to speed up the process even more, I think i remember reading somewhere that splitting the image into two parts will speed up the page, Isn't this why when making gradients out of images, you make them 1px wide?(and repeat)?

The current file size by browser width looks like this:

<= 320px                         ||   15.1 KB
>  320px   &&   <= 800px         ||   67.8 KB
>  800px   &&   <= 1024px        ||   101  KB
>  1024px  &&   <= 1280px        ||   142  KB
>  1280px                        ||   151  KB

NOTE: All of these images have a width of 100% in the css

I also know something is related to the amount of bit depth(8,16,24,32) and aplha I do not wish to lower the picture quality too much, how much do you consider acceptable for the web? My current bit depth is at 24, is that too much?

How else would you optimize such an image for the web?

Answer 1

Use what you need. Nothing more.

If your website has content that requires a 1MB image to serve its purpose, then so be it... use it. If you can get away with a 50KB version because it isn't central to your content, then go that route.

Guidelines are just that... unspecific suggestions for what works for most. You need to weigh out the situation specific to you. What do you require for your site to be effective? How many users are you going to lose because they can't (or won't) load your giant website? Do you have some compelling content that will keep people around?

Now with that out of the way, move on to optimization. In most cases, I wouldn't do what you are suggesting in your question, as you're getting into the territory of over-optimization. However, there are plenty of good reasons (such as with mobile devices) where you may want to have at least two versions of your content available. (And, don't even get me started on "retina" resolution images.)

Are you using the right image format to begin with? Use JPEG for photos, PNG for anything you need to be lossless or have an alpha channel. I think you will find compatibility issues with some of those bit depths on PNGs.