Спасибо за беспокойство, но я рано или поздно разберусь, никуда не тороплюсь :)
А вообще тема тонкая, по-моему есть больше десятка способов как это сейчас реализуют, непросто разобраться.
Это думаю можно проверить. По идее скрипт запуститься только при выполнении в медиа запросе условия на ширину экрана более, скажем, 800px.. изначально загружается фотка1 из <img src= фотка1.. с чего же будет загружаться фотка из аттрибута data-src=фотка2 если скрипт еще не отработает?
Поправка:
1) то что в этом примере на travelask грузятся две фотки это я понял.. это делается я так понял для того, чтобы сразу не перегружать бендвич и загружать только при необходимости. Кстати, когда это необходимость возникает, только когда фотка показывается в фокусе?
2) Я же хочу сделать немного по-другому.. изначально у меня фотка будет 500 (или 350) скажем, и на мобилах сразу загружаться будет. А большая фото для десктопов только если экраны будут больше 800 к примеру. Так можно сделать с помощью javascript и медиазапросов?
Вы уверены что две картинки? Ведь через джаваскрипт фотка загрузиться только в случае десктопа, в случае мобильной версии только одна, верно? Ну а на скоростной интернет на десктоп загрузиться фотка лишняя в 30К (в сумме допустим 300К) не так страшно.. не отпимум конечно, но все-таки.. ---------- Добавлено 05.04.2018 в 12:41 ----------
Спасибо за ответ, конечно, искать я и не прошу. Просто если было бы это на виду (как мне кажется), то можно было бы тыкнуть в любой практически сайт, и там бы был такой подход. А я посмотрел около 5-6 ведущих по туризму, только на тонкостях есть srcset и то криво.. ок поищу еще )
"нормально" это сколько? ) А так у меня жена юрист ) она понемногу знакомится с темой, но я решил поинтересоваться у знающих.
Я сразу возьмусь за вариант с srcset, как только увижу рабочий вариант на известном сайте (желательно на турсайте, но не обязательно), буду очень благодарен. Я пока не нашел, а экспериментировать не хочется если честно.
Чем фиговый? :)
Вы про это?
https://yandex.ru/legal/fotki_termsofuse/
А именно
В моем случае это будет ИП..
Не смешно будет звучать
? :)
Спасибо посмотрел
Ну да.. вот нашел рабочий пример на ведущем сайте по туризму
<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?
