---
title: "Swimburger - Blog - Responsive"
description: "Swimburger.net is a blog about .NET, cloud, web development, and whatever comes across Swimburger's plate. Swimburger.net is run by Niels Swimberghe."
canonical: "https://swimburger.net/blog/responsive"
---

[

<picture><img class="blog-post-card__image" src="/cdn-cgi/image/width=250,format=auto,quality=90,height=250,fit=cover/media/0xmbgtlb/umbraco-images-square.png" srcset="/cdn-cgi/image/width=250,format=auto,quality=90,height=250,fit=cover/media/0xmbgtlb/umbraco-images-square.png 250w, /cdn-cgi/image/width=375,format=auto,quality=90,height=375,fit=cover/media/0xmbgtlb/umbraco-images-square.png 375w, /cdn-cgi/image/width=500,format=auto,quality=90,height=500,fit=cover/media/0xmbgtlb/umbraco-images-square.png 500w" sizes="250px" width="250" height="250" alt="Phone/Tablet/Laptop displaying Umbraco logo" decoding="async" loading="lazy" style="background-color:#2D2D2D"></picture>

## Implementing Responsive Images in Umbraco

12/24/2019 - Umbraco

The web platform has responsive image capabilities such as the srcset-attribute, sizes-attribute, and the picture-element. These capabilities may seem daunting sometimes. We'll learn how to make them available and maintainable to Umbraco content editors.



](/blog/umbraco/implementing-responsive-images-in-umbraco)[

<picture><img class="blog-post-card__image" src="/cdn-cgi/image/width=250,format=auto,quality=90,height=250,fit=cover,gravity=0.5x0.5/media/1100/phone-speed-square.png" srcset="/cdn-cgi/image/width=250,format=auto,quality=90,height=250,fit=cover,gravity=0.5x0.5/media/1100/phone-speed-square.png 250w, /cdn-cgi/image/width=375,format=auto,quality=90,height=375,fit=cover,gravity=0.5x0.5/media/1100/phone-speed-square.png 375w, /cdn-cgi/image/width=500,format=auto,quality=90,height=500,fit=cover,gravity=0.5x0.5/media/1100/phone-speed-square.png 500w" sizes="250px" width="250" height="250" alt="Phone with speedometer" decoding="async" loading="lazy" style="background-color:#2D2D2D"></picture>

## Web performance: prevent wasteful hidden image requests (display: none)

1/1/2019 - Web

We often hide images using CSS with "display: none", but this doesn't actually prevent the browser from downloading these images. Using the HTML Picture element, we can serve different versions of an image depending on media queries. We can even use a data-img to prevent images from being downloaded at all and optimize our website speed.



](/blog/web/web-performance-prevent-wasteful-hidden-image-requests)