Изображения для вэба

[eandr_67]

Основная ошибка — забыть, что современный HTML позволяет задать для изображения несколько ссылок на картинки разного размера/формата из которых браузер сам выберет и загрузит одну наиболее подходящую.

Ориентация на мифический «самый популярный размер» сразу отсекает тех, кто сидит за большими настольными мониторами.

Ppi/dpi никакого отношения к оптимизации изображений на сайте не имеют: эти параметры реально нужны только для расчёта физического размера изображений в полиграфии. А для сайта важен только размер изображения в пикселах.

[meanymouser]

Ошибка так же считать что браузер сам выберет какую картинку когда показывать из предоставленного списка - браузер будет показывать то что ему предписывает фрейморк (т.е. надстройка над стандартными HTML CSS) - удаляем (блокируем) надстройку и браузер ничего подбирать не будет а будет брать то что прописано явным образом в стиле/коде

[eandr_67]

Ознакомьтесь с HTML-тегом picture и атрибутами srcset и sizes HTML-тега img.

Именно браузер и именно сам — без какого-либо фреймворка. В полном соответствии со стандартом HTML5.

[skymal4ik]

>На деле же нет никакой необходимости в загрузке такого контента на сайт, пользователь просто не сможет оценить превосходную детализацию снимка на маленьком экране смартфона.

Зум есть давно, а с характеристиками и разрешением современных смартфонов вероятность увидеть артефакты и пиксели довольна высок. За других не скажу, но мне иногда приятно рассмотреть детали на фото.

[PereslavlFoto]

Как правило, пользователю нужно не всё изображение, а его часть. Поэтому он будет просматривать и анализировать полученное изображение отдельно, в другой программе. И поэтому очень важно обеспечить клиентам доступ к полноценному и крупному изображению.

[SlavikF]

WebP?
А почему не avif?

[eugenehr]

На одном из сайтов сделал так:

<picture>
    <source srcset="/static/.../image.jpg.640x360q75.webp">
    <source srcset="/static/.../image.jpg.640x360q75.avif">
    <img itemprop="image" src="/static/.../image.jpg.c1280x720q75.jpg" alt="" loading="lazy">
</picture>

Пробовал менять местами элементы source webp и avif, но в папке с кэшем в основном сохраняются webp. AVIF тоже есть, но мало. Решил пока не заменять webp на avif.