![fluid image techniques fluid image techniques](http://i1.ytimg.com/vi/lXhRGRrWa7E/maxresdefault.jpg)
This attribute can be used in the and elements.īoth the sizes and media attributes are nearly identical. This can be done by defining the absolute or relative path to the images and optionally the pixel density descriptors (e.g. The srcset attribute allows image sources to be defined. This offers browsers the ability to display a specific image when a rule is met. The srcset, sizes, and media attributes allow the and elements to be extended by offering the browser additional information, such as different image sources as well as different display sizes and media conditions. What are the srcset, sizes, and media attributes? As you may recall from our Image CDN article, images take up 51% of the average web page size, which means serving scaled images is critical to reduce your web page sizes. This is advantageous because of the significant performance improvements that can be gained. Instead of taking a single image and only making it responsive with CSS, which is then delivered to all devices, you can deliver completely different images based on the requesting device. This allows you to further optimize your image delivery to improve the overall performance of your website or application. Responsive image techniques, such as the srcset, sizes, and media HTML attributes, allow different scaled images to be delivered based on the size and resolution of the accessing device.