Разрешение DPI/PPI для увеличенных изображений продукта

Я работаю над сайтом электронной коммерции и пытаюсь выяснить, в каком разрешении сохранять изображения продуктов.

Обычно мы выбираем 72DPI, но я считаю, что теперь мы должны использовать PPI, но также и то, что для учета дисплеев Retina нам нужно сохранить две версии изображения; если мы хотим, чтобы максимальный размер масштабирования был, например, 300x300 пикселей, должна быть версия 600x600 пикселей, чтобы изображение не было размытым на сетчатке.

Означает ли это, что нам нужно разместить две версии или одну большую, уменьшенную для не-ретина, и если да, то влияет ли это на скорость веб-сайта?

Но на каком PPI я сохраняю эти изображения? Или это 144DPI при 2x?

Спасибо!

Я могу ошибаться. Но мы всегда используем 72 dpi. Общий размер пикселя имеет смысл для Retina, а не параметр dpi/ppi, хранящийся в метаописании. Если разница в килобайтах изображения 300x300 и 600x600 невелика, можно использовать более крупные и уменьшать масштаб на не-Retina дисплеях.
Вы должны ошибаться; DPI для принтеров, PPI для экрана.
ppi или dpi не вступают в игру, когда вы создаете изображения для других носителей, кроме печати. Только пиксели имеют значение. Это потому, что вы обращаетесь к координатам пикселей на этих устройствах.
Неважно, в каком dpi вы его сохраните. Веб-браузеры игнорируют его.

Ответы (2)

Я ответил на аналогичный вопрос здесь: Общая основа для размеров изображений при использовании Photoshop для сохранения в Интернете.

Короче говоря, очень распространенная практика в настоящее время такова:

  1. Сохраняйте ваши (растровые) изображения всегда в два раза больше размера пикселя, который вы будете отображать. Если изображение будет отображаться в размере 300x300 пикселей, сохраните его в размере 600x600 пикселей.
  2. Использование CSS указывает, что размер изображения на самом деле составляет 300x300 пикселей.

У этого есть небольшая оговорка: на устройствах с разрешением x1 (не Retina) посетитель будет загружать в два раза больше данных, чем ему действительно нужно. Это особенно плохо для мобильных пользователей с жесткими тарифными планами.

Решением для этого может быть сохранение двух версий изображения: одной с размером x1 (300x300), а другой с размером x2 (600x600), затем медиа-запросы к CSS для определения разрешения и предоставление изображений x2 только в том случае, если разрешение устройство больше 1 (устройства сетчатки).

Здесь есть несколько примеров медиа-запросов для различения устройств с высоким разрешением: http://css-tricks.com/snippets/css/retina-display-media-query/

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

cockypup в чем-то прав.

Для дисплеев Retina вам нужна версия с 2-кратным исходным размером — вы можете сделать это с помощью того, как вы называете файлы и некоторые сценарии на стороне клиента.

Что касается увеличенных изображений, «DPI» не имеет значения — используйте 72, так как вы все равно ограничены этим для Интернета. Вместо того, чтобы беспокоиться о том, сколько пикселей вы туда втиснете, просто беспокойтесь о методе увеличения.

Многие сайты используют 2-кратный подход, загружая увеличенное изображение и обрезая ненаведенную область. Они используют «направляющую рамку», чтобы показать, что увеличено.

Простым выходом было бы просто щелкнуть, чтобы увеличить (загрузить большое изображение), но я бы сделал это только как запасной вариант без javascript.

Обратите внимание, что для DPI нет «ограничения». Это просто немного метаданных. Он полностью игнорируется веб-браузерами.
Разрешение DPI/PPI для увеличенных изображений продукта
СпросиСетьПолитика конфиденциальности1y, 0v