In its most basic form, picture can serve your users with the most appropriate image file size and dimensions based on their viewport width. The example below offers the user the same image, but with different dimensions and thus file sizes. It's important to note that viewport width is not a direct indicator of bandwidth, but serving images that are too big for the user's viewport are an unecessary weight on their page speed.
As the layout of the page changes between media queries its sometimes necessary to recrop images so that still work within the design. A panorama image might be the best fit for a wider screen, when a thumbnail is required for smaller screens. We can use the picture element of this as well.
written by David Knight on
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.