Day 10 of⚡️ #30DaysOfWebPerf ⚡️
So you want to take advantage of WEBP or other new image formats for speed, but Safari still doesn't support them - what can you do??
Luckily, the <picture> tag can help us...15:40 PM - 21 Nov 2019
With this tag, we can provide several sources and information about them with the <source> tag. The browser will pick the first one it understands to load.15:40 PM - 21 Nov 2019
We can also use it for art direction - to show different images for different screen sizes.
On a large screen, we might want to show a large field of view, but on a small screen, we want to focus on what matters in the shot:15:40 PM - 21 Nov 2019
Tips for combining <picture> with srcsets and sizes:
- put srcsets with their source
- always have a fallback <img> with a src attribute for older browsers
P.S. The <video> tag works similarly to <picture>!15:40 PM - 21 Nov 2019
P.S. Sorry for the delay - I was locked out of Twitter for a week!
Top comments (0)