Оптимальные размеры изображений и множитель в веб-дизайне

Веб-дизайн: нужно учитывать множество размеров экрана. Устройства с особенно высоким разрешением используют множитель. Я прочитал эту очень полезную статью о теории:

https://sebastien-gabriel.com/designers-guide-to-dpi/

Он ссылается на это руководство для размеров iPhone:

https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-разрешения

В конце концов, в нем говорится, что вы должны использовать разные размеры экрана, такие как 1920 × 1080, 1280 × 800 или 375 × 812, а затем предоставлять разные множители для устройств с высоким разрешением, таких как @2 и @3.

В настоящее время я создаю небольшой веб-сайт с большим изображением героя. Нужно ли мне предоставлять около двадцати разных разрешений с их множителем? Кажется, что много Photoshop (и CSS Media Query) работает только для одного главного изображения?

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

Если я просто рассмотрю три-четыре резолюции, вроде упомянутых выше, их будет достаточно? Или я должен использовать другие разрешения?

Ответы (1)

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

Вполне возможно использовать 1 изображение для каждого возможного разрешения экрана. Вы можете использовать 1 маленькое изображение, и оно будет плохо выглядеть на большем количестве экранов 4k/retina. Или вы можете использовать 1 большое изображение и позволить ему замедлять время загрузки для экранов, где это не нужно.

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

Учитывая общую целевую аудиторию и доступность рабочей нагрузки, я лично «разделяю ребенка» и работаю для @1x и @2x, чтобы ориентироваться на максимально возможное количество пользователей, понимая, что пользователи за пределами этих разрешений могут видеть менее благоприятные версии изображений . Но я также просматриваю работу над этими разрешениями, просто чтобы убедиться, что ничего визуально ужасного не отображается. Если есть, я могу решить приспособиться к чему-то вроде 1x и 3x.