По какому принципу выдаются изображения в адаптивной верстке?

Изучайте

Особое внимание на атрибуты srcset и sizes

Спасибо, читаю..

Пара вопросов:

1) Насколько вириант с srcset считается уже рабочим и общепринятым? Поддерживается всеми основными браузерами?

2) Я пока не понял, сколько вариантов изображения физически у меня должно быть на сайте? Скажем 500 и 1000 в ширину? Какие именно размеры общеприняты для этих целей?

---------- Добавлено 12.03.2018 в 21:54 ----------

<img srcset="elva-fairy-320w.jpg 320w,

             elva-fairy-480w.jpg 480w,

             elva-fairy-800w.jpg 800w"

     sizes="(max-width: 320px) 280px,

            (max-width: 480px) 440px,

            800px"

     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

Правильно ли я понимаю, что физически 5 файлов на диске? Если да, то какую фото поисковики будут считать основной? И как поисковики не будут воспринимать этот подход как своего рода клоакинга? Т.е. замена контента в зависимости от конкретного серфера.. ведь они же не понимают, что изображение идентичное, просто разный размер? Или понимают?

alexverem,

1. Поддерживается всеми браузерами кроме опера мини и IE (кто бы сомневался)

2. хоть 100, зависит от ваших потребностей. Обычно 3-4 хватает.

Почитайте еще про sizes и srcset, все вопросы про количество отпадут. Про поисковиков не подскажу, не сеошник, но скорее всего поисковики тоже следят за тенденциями и понимают что веб развивается, и появляются новые атрибуты/тэги, не кастомные какие нибудь а описанные в стандарте w3c, если из за этого будет фильтр значит там работают идиоты, что маловероятно.

и еще вопрос на засыпку - намек про 1200, какой размер экрана у iphone X и Galaxy S9 ?

ну медиа запросы оно конечно да, но так себе... почитайте для начала про бутстрап хотя бы...

имхо соотношение сторон...обдумать надо... так как теоретичеки можно ж весь дизайн в svg сделать...и тогда % а не px

ну да фото и тд... но опять же дикие разрешения экранов современных флагманов...

Какое отношение к вопросу имеет буцтрап, даже стесняюсь спросить?

Пример с сайта tonkosti.ru/%D0%92%D0%B8%D0%B7%D0%B0_%D0%B2_%D0%98%D1%82%D0%B0%D0%BB%D0%B8%D1%8E

Я еще не разобрался, разве тег pictures и подход с srcset это не две параллельные технологии, или вместе работают?

https://www.w3schools.com/tags/tag_picture.asp

важно какой device-pixel-ratio по умолчанию, а не размер экрана.

если по простому.

например, у меня старенький samsung s4 1920x1080, но device-pixel-ratio = 3, п.э. считается, что 640x360.

судя по статкаунтеру уже весьма много с css px 1000 и более разрешением по одной из сторон, и не только планшетов, но смартов, в основном пока из азии... но это только пока... кстати посмотрите требования к картикам иконок и сплэш скринов у Эпла... точно не разбирался но вроде там уже 4к, так что возможно логическое позиционирование элементов (css разрешение) уже отстало и меньше того разрешения с которым Эпл может выводить картинки на экран

опять точно не разбирался, но вроде скажем 640x360 на iPhone X это на самом деле теперь стал формат с плавающей точкой

то есть 640.0х360.0, вот так плавно и незаметно позиционирование, размер и толщина линий может задаваться с точностью

намного превышающей формат целых чисел, например width=2.9765in

Еще для Ретины нужны изображения в 2 раза больше, чем обычно. :)

Получается, кроме 1200 часто достаточно еще одной картинки - на 700px.

Ну и ресайз через стили в любом случае придется использовать.

Что-то вроде этого: