Search code examples
jquerytwitter-bootstrapresponsive-designpagespeedimage-scaling

Serve scaled image with responsive layout


on Gmetrix I get the recommendation to serve scaled images. I get the idea but my website is responsive and the images change size relative to the browser width. Is possible to fix this issue and keeping the responsive design? Btw the images are inside a bootstrap-carousel


Solution

  • little late for the answer, but you can use srcset, I think this is the simplest method to handle this, be aware that this is not supported by opera mini or IE10, but have a good browser support for the other browsers (including edge), here's an example from css-tricks really self explanatory:

    <img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah">