Sometimes we want that picture on page shrinks when browser window shrins. This can be easily achieved by using a short css entry.
For a parent element – usually a div – we set the maximum width to 500px. In this example I also set a red frame so that I can see div border.
Next, we set image width to 100% parents width. Image height we set to auto.
The effect is as shown below. Try to change the browser window and see how the photo width is changing with it.
Code is on codepen:
See the Pen YoBwrR by Joanna (@JoannaEl) on CodePen.
Well, the image adjusts its size to the screen size, but it doesn’t change its weight. The photo of the parrot above is 59 KB no matter if it is displayed on a large or a small screen.
In this case, if someone opens the page on the phone, he will needlessly “download” such a large photo, which will not only consume more transfer, but also slow down loading of the page.