Я хочу сделать адаптивное изображение с помощью тэга img и его атрибутов: srcset, sizes. Так как атрибут sizes работает только тогда, когда изображению задают дескриптор w, я задаю дескриптор каждому альтернативному изображения для ретины (у меня их три). Но изображение перестает отображаться совсем. В чем моя ошибка? Вот код:
И еще - мне интересно, для мобильной и десктопной версии правильно делать два разных изображения (для мобильной - меньше ppi, для десктопной - больше ppi). Или же делается одно изображение, к которому просто задаются или стили, или медиа-запросы? Как правильнее?
Удобнее пользоваться тегом <picture>, в нем можно задавать разные изображения для разной ширины вьюпорта, плотности пикселей, а также использовать webp для поддерживающих этот формат устройств.
На счет плотности пикселей: декстопы могут быть с ретиной и без, а вот почти все современные мобилки имеют повышенную плотность.
