I have been practicing with images and how to make them as best responsive and preforming as I could. I use the same code to test on an iMAC 5K Retina 2x display and a macbook pro 13.3 1x display. Here is my test code:
<img
class="img-responsive img-thumbnail"
src="images/sea-x-small.jpg" alt="Sea"
sizes="(min-width: 769px) 30vw, 100vw"
srcset="images/sea-x-small.jpg 360w,
images/sea-small.jpg 768w,
images/sea-medium.jpg 992w,
images/sea-large.jpg 1200w,
images/sea.jpg 1920w">
The thing is on the iMac 2x display, no matter what size the window is, it is always downloading the latest one which is sea.jpg (1920px) but it still also downloads another variation according to window size. The macbook on the other hand, only download the best appropriate picture, saving the surfer lots of not needed bandwidth. Here are two illustrating screenshots for the chrome developer tools network usage. Here is the iMac image. As you can see, it downloaded the sea-small.jpg at window size 400px but it still also downloads the sea.jpg and $0.currentSrc shows the large image sea.jpg
Here is the macbook pro image:
Please note that I took pixel density in consideration, but it is still weird for the iMac to still download the largest 1920px image.
