Атрибуты srcset и sizes у картинок

UX  /  Вёрстка  /  Производительность Design  /  UX+Usability  /  Performance  /  HTML

Если вы помните, давным давно я писал про srcset и sizes для картинок. Эти атрибуты позволяют подсказать браузеру, какие картинки лучше грузить (работают для тэгов img и picture).

А сегодня увидел твит, который одной картинкой поясняет принципы работы. И решил напомнить вам эту тему.

Иногда используют вариант попроще:

<img src="one.png" srcset="two.png 2x, three.png 3x, four.png 4x">

Но, обычно, речь о подобной разметке:

<img src="/img/clear-off-the-table-small.gif" alt="clear-off-the-table.gif" style="overflow-x:hidden" srcset="/img/clear-off-the-table.gif 800w, /img/clear-off-the-table-small.gif 400w" sizes="(min-width: 1280px) 800px, (max-width: 1280px) and (min-width: 1024px) 600px, (max-width: 1024px) and (min-width: 800px) 520px, (max-width:800px) 90vw, 90vw">

Посмотреть на результат её работы можно в статье Удобное представление таблиц и диаграмм (осторожно — трафик).

А вот и обещанный твит:

Если он не показался вам наглядным, почитайте исходную статью или комментарии в твиттере — там есть ссылки на более подробные источники.

Обсудить в Twitter

UX  /  Вёрстка  /  Производительность Design  /  UX+Usability  /  Performance  /  HTML