Is it better to let the browser resize the image based on resolution breakpoint or is it better to have duplicate images and only the one appropriate for that breakpoint is visible? The QBQ is does invisible items such as images still visible to the search engines A duplicates and do they still add weight to the page even though the site visitor does not see them? Just curious.

 

In other words, which is better - to have a 1280 px image resized to 320 in the browser or to duplicate the image, make it smaller / lighter in weight, and only allow the smaller image on the smaller resolution?

it's better to have the seperate than one huge image as some mobile devices for example might take a lot of time to load very large images especially on 3G, it's always best to keep mobile sites as light as possible.

it's better to have the seperate than one huge image as some mobile devices for example might take a lot of time to load very large images especially on 3G, it's always best to keep mobile sites as light as possible.

 

This. You can write some JavaScript that will swap out the images and stick all the urls in data-attributes. You can roll with the new-ish picture element to let the browser to decide what images to serve up but it won't work on older browsers. The JS solution, for the time being I find the best.

 

The images should also be lazy loaded, whereby you download the image as the user scrolls down to it, I load mine in when the window is about 800px above the said image, so it doesn't really hinder the browsing experience.

 

Doing both of these don't just benefit the user, they also reduce the load on the server.

 

Just bear in mind that a lot of mobiles now run at 2x or even 3x pixel density so you might want to serve up higher resolution images to users with these screens.

Edited December 5, 201411 yr by rbrtsmith