Должен ли DPI изображения быть 72 пикселей / дюйм в 2018 году? - PullRequest
Новая
       120

Должен ли DPI изображения быть 72 пикселей / дюйм в 2018 году?

0 голосов
/ 05 декабря 2018

Сначала немного статистики DPI:

Mack Book Pro 13,3 "имеет 227 DPI (2560x1600px / 13,3 дюйма).

iPhone 6s имеет 326 DPI (750x1334px / 4,7 дюйма).

Планшет Sony Xperia Z имеет 224 точек на дюйм (1920x1200px / 10,10 дюйма).

Однако при сохранении изображения JPEG для веб-сайтаимеет 72 DPI , и изображение выглядит хорошо, только если я установлю разрешение контейнера в 2 раза ниже, чем разрешение изображения.

Например, 

<img src="200x200px_72dpi_image.jpg" width="100px" height="100px">

дает хорошие результаты дляДисплеи Retina (iPhone 6s, Mac Book Pro 13,3 "и т. д.) и 

<img src="100x100px_72dpi_image.jpg" width="100px" height="100px">

дают плохие результаты.

Что я могу сделать с этим в 2018 году?Нужно ли использовать изображение 300 DPI для Интернета?

1 Ответ

0 голосов
/ 05 декабря 2018

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

Все сводится к веб-сайтам, обслуживающим 2x изображения IF клиентский браузер МОЖЕТ * поддерживать - иначе по умолчанию вернуться обратно к стандарту 72 DPI.

Должно ли значение DPI изображения составлять 72 пикселя / дюйм в 2018 году?

Да.Устройства, которые поддерживают более высокое разрешение, относительно новы и еще не достигли 100% насыщения рынка.

Следует ли использовать изображение 300 DPI для веб-сайтов?

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

Что я могу сделать с этим в 2018 году?

Мои два цента ...

  • Исследуйте другие форматы, кроме JPEG.Исследуйте SVG для линейной графики. WebP также стоит изучить для фотографий.

  • По умолчанию 72dpi и выбор более высокого DPI.Благодаря медиа-запросам и многим популярным современным CSS / JS-фреймворкам устройству требуется очень мало усилий для загрузки ресурса 2x по умолчанию с низким разрешением.Правда, вам нужно будет рендерить одни и те же активы изображения в разных разрешениях, но это можно автоматизировать.

  • Время.Даже в 2018 году этот материал все еще меняется, и производители конкурируют в этом HDR-пространстве.Ожидайте префиксы -webkit, -moz & -ms до достижения стандарта (если не все готовы).

...