Почему srcset не работает в Chrome?

Question

[Uladzimir A]

Здравствуйте, есть тег img вот с такими атрибутами

<img src="main_bckg_480.jpg" sizes="(min-width: 600px) 80vw, 90vw" srcset="main_bckg_800.jpg 800w, main_bckg_1000.jpg 1000w, main_bckg_1200.jpg 1200w" alt="background">

В firefox все отрабатывает на ура, и изображения при ресайзе меняются и размер под viewport подстраивается. А вот в Chrome ну никак это не работает. Выставляется первое значение в srcset, и плевать chrome хотел на ресайз и vw единицы. В Опере тоже самое (на сколько я понимаю у них движок общий?). Может нужны префиксы? Но на can i use у него поддержка хорошая. В общем я в замешательстве, может кто уже решил такую задачу для себя, поделитесь.

Answer 1

[call007]

В Chrome тоже всё работает, но есть один неприятный момент (для разработчиков). Дело в том, что Chrome кеширует картинку. И если первый раз он "проглотил" большую картинку, то он её будет показывать всегда. Проверить же, что всё работает можно через режим "Инкогнито". Главное, не забыть сделать размер окна браузера поменьше, прежде чем грузить сайт для проверки.

Comments

[trinitiwowka]

Спасибо, не знал, очень важный момент

Answer 2

[ой всё]

всё работает в хроме, но не в таком виде как у вас
https://www.w3schools.com/tags/att_source_srcset.asp

Comments

[Uladzimir A]

Спасибо, но там тег picture, а это еще только 88% поддержка, хотелось бы через img.

[ой всё]

Uladzimir Abramkin, зачем вы удаляете мои ответы на ваши комментарии, тем более, что ваши комментарии совершенно некорректны?

[Модератор]

ой всё, зачем вы пишите Uladzimir Abramkin об удалении комментариев, если у него нет такой возможности?

[ой всё]

Модератор, значит он пожаловался на совершенно корректный комментарий, что говорит о том, что он не понимает о чем спрашивает, но не ленится пожаловаться вместо того, чтобы почитать документацию

[Uladzimir A]

ой всё, послушайте, не надо обижаться. Я ни чего не удалял и не жаловался. Почитайте мой вопрос. Меня интересует работа srcset именно с img, а про picture я и так знал. Ведь в firefox все работает. Так почему же в продвинутом chrome этого не происходит и ему нужна более замудреная конструкция.
P.S. А я вот думал, что здесь люди могут задать вопрос если чего-то не понимают, но оказывается все нужно понять с полу слова и знать спецификацию.

[Максим]

Uladzimir Abramkin, мне казалось что srcset пишется так :

<img src="image-src.png" srcset="image-1x.png 1x, image-2x.png 2x">

а у вас по другому почему то

[ой всё]

Uladzimir Abramkin, на что обижаться? на то что вы не знаете что есть тэг picture?
сугубо ваши проблемы

[Илья Герасимов]

ой всё, ~30 ответов в день, вы вообще код пишите или только тут залипаете?)

[Uladzimir A]

Максим Ленский, Насколько я понял, это указания изображений для Retina дисплеев. Вот здесь все описывается.

[Danila]

ой всё, на ваш комментарий пожаловался не автор, и не я один устал читать ваши токсичные попытки самоутердиться за чужой счет. Не в обиду
Uladzimir Abramkin Предлагаю посмотреть поддержку самого srcset, которая еще ниже чем у picture, https://caniuse.com/#search=srcset

[ой всё]

Данила, держите ваше мнение обо мне при себе
оно ничуть не менее токсично, если вы вдруг об этом не знали
на ваш комментарий отправлена жалоба

[Danila]

ой всё, как и ваш ответ, ничуточки не токсичен
будьте добрей и терпимей к людям

[ой всё]

Данила, еще раз не рекомендую вам участвовать в травле в мой адрес
учитесь уважать чужое мнение сами, если мама вас этому не научила
все ваши подобные комментарии будут помечаться как оскорбительные

[Uladzimir A]

ой всё, Данила, Да ладно вам товарищи разработчики, в споре рождается истина. Я учту мнение всех, спасибо за советы. Про тег picture я знал давно, еще когда его начал продвигать Вадим Макеев, но я жду более лучшей поддержки. Насчет того, что сам srcset плохо поддерживается я как-то не подумал. Хотя от Chrome я ожидал большего... Еще раз всем спасибо, давайте жить дружно.

[ой всё]

Uladzimir Abramkin, вы, кроме тэга picture, других тэгов не знаете?
или все, что вы умеете, - это копипаст готовых примеров?

[Uladzimir A]

ой всё, Да я пробовал изображения в разные теги впихнуть..., но как-то не очень. А вот ctrl+c и ctrl+v - это да, это круто. И вот интересно, использование атрибутов, это копипаст чего? Спецификации? Да простит тогда меня W3C. Из-за чего вы злитесь, ой всё? Если вы такая опытная, то поделитесь знанием, имейте терпение объяснить, ведь для этого данный ресурс создан.

[ой всё]

Uladzimir Abramkin, смысл делиться есть только с теми, кто сам работает, и таким людям я всегда помогаю, а не с теми, кто пришел сюда за халявой с претензиями, как вы

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

[Uladzimir A]

ой всё, Слушайте дамочка, я не просил вас написать мне бооольшущий кусок кода. Я попросил объяснить почему в браузере не отрабатывает стандартный тег и атрибут. В чем халява?

[ой всё]

Uladzimir Abramkin, читайте мой ответ выше, мужчинка :))

[Saboteur]

ой всё, доигралась