Ну а если изначальная фото как раз маленькая? Я кстати часто вижу при пролистывании страницы некоторых сайтов что сначала фотки мутноваты, но потом мгновенно становятся в хорошем качестве..
А вообще, какой подход правильный? ) Их очень много, я не могу остановить свой выбор..
В этом топике предлагали вариант с picture (sizes и srcset), я попытался разобраться , но знаете что-то реальных примеров работающих на ведущих сайтах (напр в туризме) практически так и не нашел.
Скажите, какое адаптивное решение с картинками наиболее распространено в данный момент? Подмена картинки через javascript?
Ну да.. вроде бы можно и без теги picture
<img src="image.jpg" alt="My image" [srcset="<список URL с дескрипторами>"] [sizes="<ваши размеры в зависимости от раскладки>"]>
Вообще никто не использовал в своих проектах что ли? ) Значит похоже рано, а какой наиболее распространенный подход в настоящее время для адаптивных картинок тогда?
Хотелось бы услышать также мнение тех, кто делал на конкретном сайте, хорошо бы с ссылкой, хоть в личку. Или пример какого нибудь другого сайта..
Вот пример view-source:https://tonkosti.ru/%D0%92%D0%B8%D0%B7%D0%B0_%D0%B2_%D0%98%D1%82%D0%B0%D0%BB%D0%B8%D1%8E
Вот кусок
<picture><source srcset="//static.tonkosti.ru/images/f/f0/%D0%92%D0%B8%D0%B7%D0%B0_%D0%B2_%D0%98%D1%82%D0%B0%D0%BB%D0%B8%D1%8E.jpg" media="(-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi)"><img src="//static.tonkosti.ru/images/f/f0/%D0%92%D0%B8%D0%B7%D0%B0_%D0%B2_%D0%98%D1%82%D0%B0%D0%BB%D0%B8%D1%8E.jpg" alt="">
Но что странно.. не закрывается тег <picture>, кроме этого ссылки на одну и то же фото.. в чем тогда суть?
Спасибо всем, разбираюсь по-тихоньку.. если есть какие либо еще комменты - буду рад услышать.
Я уже немного запутался.. правильно ли я понимаю, что для телефоно с низких разрешением будет достаточно скажем картинки 600px.. для десктопов 900.. а вот для ай-фоном ретина, где как бы около 600 разрешения, но реально высокое разрешение и нужно картинку аж 1200? Прощу прощения если несу чушь, просто "плаваю" еще..
Если примерно так, то какие получается размеры картинок мне нужно? Сколько вариантов и каких размеров?
Пример с сайта 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 это не две параллельные технологии, или вместе работают?
Спасибо, читаю..
Пара вопросов:
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 файлов на диске? Если да, то какую фото поисковики будут считать основной? И как поисковики не будут воспринимать этот подход как своего рода клоакинга? Т.е. замена контента в зависимости от конкретного серфера.. ведь они же не понимают, что изображение идентичное, просто разный размер? Или понимают?
Суппорт яндекса не смог по фото сказать что это за блок ))---------- Добавлено 06.03.2018 в 17:50 ----------
Вспомнил, я в коде смотрел, там было RTB...
Т.е. это из директа? выходит я не могу у себя в панеле уже есть взять, разве что на этом сайте (что в скрине) и поставить свой ID?---------- Добавлено 06.03.2018 в 11:09 ----------
В том то и дело, что прошарился - не нашел. Я виже такой много где стоит, а найти у себя не могу, придется в яндекс написать..
