Какое разрешение использовать для картинок на сайте?
На сайте есть контейнер фиксированной ширины. В зависимости от ширины экрана его ширина меняется.
1170px - ширина по умолчанию.
940px - если ширина экрана <= 1200px (медиа запрос max-width: 1200px).
720px - если ширина экрана <= 992px.
Дальше - 100%, но слева и справа padding'и по 15px.
Внутри контейнера текст и картинки.
Какое разрешение использовать для картинок?
Мне кажется, что не имеет смысла использовать картинки, разрешение которых по ширине больше 1170, так как они все равно сожмутся до этой ширины, чтобы влезть в контейнер.
Но есть другое мнение - на телефонах с высоким разрешением картинки будут смотреться не очень хорошо.
Но у меня нет телефона с высоким разрешением. Поэтому проверить я не могу.
Какое мнение правдивое? Если несложно, можете привести ссылки, где это расписывается?
Всегда используется разрешения не больше, чем область показа. Это связано исключительно с тем, что избыточный размер будет передаваться клиенту и там средствами браузера масштабироваться. Это приведёт к замедлению загрузки контента с сайта, не более того.
eugene159, даже если пиксели визуально сольются в один, это будет выглядеть как уменьшение разрешения, но никак не увеличение. Попробуйте сжать изображение в 2-4 раза. Примерно так, возможно, вы увидите изображение. От того, что вы уменьшите разрешение картинки она лучше не станет выглядеть, а излишне большое разрешение не будет отображено из-за ограничений контейнера.
Другое дело, что картинку на смартфоне можно увеличить, и вот тогда скажутся искажения, которые вы сделали для уменьшения разрешения меньше размеров контейнера.
Средний
Простой
Средний
Средний
