places
For inline images
image on the appropriate element, give the element dimensions, and define higher resolution
By dahusidah | places | 2018-03-26
For background images, this is quite simple: define the background image on the appropriate element, give the element dimensions, and define higher resolution sources of the image within media queries. The image above illustrates how this is done on our demo. Notice that we are setting the height property to 0, providing bottom padding, and setting the background-size property to cover. This is a technique known as “Uncle Dave’s Ol' Padded Box”, and allows us to maintain an aspect ratio by percentage padding based on the width of the parent element.
For
“appropriate”
SHARE ON twetterinline images, we now have an HTML specification that allows us to extend the img and source elements to provide a list of available image sources and their sizes. This allows browsers to use this information to pick the best image source. The image below details how this is implemented on our demo, in which we are defining additional image sources and their sizes with srcset and sizes attributes. This enables the browser to switch image resolution based on screen size and pixel density, thus providing the most appropriate image.
