Ну да.. вот нашел рабочий пример на ведущем сайте по туризму
<a href="http://s2.travelask.ru/system/images/files/000/092/188/original/File_008.jpeg?1486426374" class="lazy" rel="nofollow"> <img src="http://s3.travelask.ru/system/images/files/000/092/188/mobile/File_008.jpeg?1486426374" data-src="http://s1.travelask.ru/system/images/files/000/092/188/wysiwyg/File_008.jpeg?1486426374" width="820" height="820"> </a>
Т.е. в src фото 200х200, она сначала загружается и в мобильной и в десктопной версии. Это можно заметить, потому как при просмотре фоток на странице они только при остановке на них становятся четкими.
Но вот что меня беспокоит. В настоящий момент у меня фотки размером 500, я не хочу их менять на 200х200, потому как все пользователи у меня с поисковиков, и как они прореагируют на "ухудшение" контента неизвестно. Даже изменение в 1-2 позиции может существенно сказаться на доходе.
Если рассматривать все-таки этот подход, то может оставить фотки 500 для существующих статей? Конечно не круто для мобильных, но они все равно сейчас так показываются (наверное глупый аргумент :) ).. зато для десктопов будут больше..
А для новых статей уже делать 200х200, например (это можно автоматизировать).
Ну а если изначальная фото как раз маленькая? Я кстати часто вижу при пролистывании страницы некоторых сайтов что сначала фотки мутноваты, но потом мгновенно становятся в хорошем качестве..
А вообще, какой подход правильный? ) Их очень много, я не могу остановить свой выбор..
В этом топике предлагали вариант с 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...
