Каким способом, лучше всего, делать графику адаптивной?

Question

[Gustov]

1. Создавать блок и размещать через backround-image jpg картинки, используя при этом медиа-запросы что бы подгружать файл того или иного размера при разных разрешениях браузера.
2. Использовать тег picture, а для опера мини и мелкософтоподобных использовать Picturefill подключаемый в теге head?
3. Возможно как-то еще?

В целом какой именно способ надо использовать, если в требованиях к верстке указано адаптивная вёрстка? Или вообще задавать картинке max-width: 100% и более не надо (я заметил что именно так сделано большинство сайтов), если заказчик не просит? А то возиться с ретиной, областью видимости, по 8 картинок делать ради 1 изображения, а заказчик все равно не поймет и не оценит, если не оговаривать отдельно.

Comments

[zooks]

тег picture - вы где это откопали?

[Gustov]

zooks: https://developer.mozilla.org/ru/docs/Web/HTML/Ele... Вы чего?

[Андрей Верх]

Gustov: Если заказчик этого не просит, то зачем вы себе жизнь усложняете? max-width достаточно. А уж представление контента, оставьте хозяину.

[zooks]

Gustov: экспериментальная фича, причем очень спорная. Вам это надо?

[zooks]

MaxKorz:

This is an experimental technology

[zooks]

MaxKorz: IE11 не поддерживает, а его отбрасывать рано.

[Gustov]

zooks: вы удивляетесь тегу picture 2014года, а потом у себя в блоге сетуете что публика на тостере неблагодарная =)

[zooks]

Gustov: офтоп пошел, просто публика не помечает правильные ответы

Answer 1

[sergski]

<img src="small.jpg"
     srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w"
     sizes="100vw"
     alt="" />

img {
    width: 100%;
    max-width: 100%;
    height: auto;
}

по сути всё.

Comments

[Gustov]

Спасибо, так гораздо удобнее!) Правда есть пару вопросов:
1. Для чего нам задавать sizes, если мы указываем max-width?
2. Для чего указывать max-height: 100% и width: 100%; , если можно указать max-width: 100%, а не авто и пропорции будут соблюдены и картинка будет адаптивной?

[sergski]

Gustov: Это обобщеный пример. В sizes можно указать через запятую размеры img для разных размеров ширины страницы. Например:
sizes="(max-width: 400px) 100vw, (max-width: 800px) 75vw, 50vw".
п2 — да, поправил, сорри) ширина дб 100%, (но если задан sizes, то и необязательно), но это для случаев, если sizes не указан или не поддерживается.