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?

_“I think i remember reading somewhere that splitting the image into two parts will speed up the page”_ – for most cases not; rather on the contrary. It will add the overhead of an additional HTTP request, and in many cases the file size of those two images might also be greater than the file size of the original one, because breaking it into parts will most likely reduce efficiency of the applied compression mechanisms. — CBroe, May 12 '14 at 01:54
Delaying the image load *start* time until after you download jQuery probably delays things quite a bit. I would move the script as high as possible and remove the dependency so it can download in parallel. Responsive CSS would be good if possible. — Brian Nickel, May 12 '14 at 02:22
you should look into caching it at user side or storing it in local storage...this includes handling headers and cookies. — Muhammad Umer, May 12 '14 at 02:33

Ben · Answer 1 · 2014-05-12T02:17:21.550

0

151 KB is not so much with todays internet speed. you can execute the javascript in a $(document).ready(function(){}); block to make sure the document is loaded before the background is fetched to speed up page rendering if desired.

I found this resource by google that refers to a broken link on how to optimize images with photoshop

edited May 12 '14 at 02:17

answered May 12 '14 at 01:08

Ben

13,297
4
47
68

you forgot that it should the `);` at the end, and thanks. Also, according to google an average website is 320kb, this image isn't giving me a good chance in being above average :( – May 12 '14 at 01:12

score 0 · Accepted Answer · answered May 12 '14 at 02:21

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.

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

2 Answers2