Responsive Web Design - Images

Hello, I'm intending to create an image intensive website which will be responsive.

The main issue I'm trying to figure out is around the images. Say for example I'm scrolling through a gallery of images, for each I wouldn't want to store one big hi-res image for it to be resized to a postage-stamped size thumbnail, while it still holds the same weight as the full image itself. For this problem, I assume a thumbnail image is created on each image upload?

Also, I'd only want the full image to be shown if the user clicks on the image from the image gallery. The other problem is mobiles surely wouldn't need the same hi-res image a desktop would require. Is there any way around this, or is the only option to upload another version for the same image (which would make it thumbnail, mobile, and a desktop image)?

The next problem is knowing how to select that "mobile" vs "desktop" image. Is it a case of using some sort of CSS to select that specific image depending on the browser width? I noticed adaptive-images.com caters for this use-case, but I'm not too familiar about this...

Thanks for any advice!

 

Look into Lazyloaders: https://github.com/aFarkas/lazysizes (there could be a better one than this, it's just an example)

You will definitely need to create different size thumbnails for your project. Resizing on load is going to be very slow. You can set different images to load for certain device screen width with the lazyloader and the images wont be loaded until needed.

 

You have to use lazy load plugin. You should get perfect one for your website. This decrease the image sample quality & display quick. When some interested on that image, this open in big size.