Retina-дисплеи: подготовка графики 2x/3x

25.10.2026 22:01

Как готовите графику 2x/3x и проверяете, что она не раздувает загрузку страницы?

Анна Модератор

Сообщений

404

С нами

16.10.2026

Реакции

4

25.10.2026 22:03

Я обычно экспортирую PNG в двойном размере, а в CSS задаю нужные физические размеры. Для иконок чаще удобнее SVG.

Аленка

Сообщений

295

С нами

26.10.2026

25.10.2026 22:05

А для фотографий есть смысл всегда хранить версии 2x и 3x? На мобильном разница в весе файлов заметная.

Лучик

Сообщений

360

С нами

26.10.2026

25.10.2026 22:07

С фотографиями лучше не делать один огромный файл на все случаи. Подбираю размер через srcset, чтобы браузер выбрал подходящий вариант.

Winston

Сообщений

401

С нами

26.10.2026

25.10.2026 22:09

В макете обязательно проверяю, что исходник действительно достаточно большой. Растянуть маленькую картинку до 3x — не значит получить чёткое изображение.

Lopata

Сообщений

351

С нами

26.10.2026

25.10.2026 22:11

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

Олеся

Сообщений

374

С нами

26.10.2026

25.10.2026 22:13

У нас спор: дизайнер отдаёт PNG 3x вообще для всего, а я потом пытаюсь объяснить, почему это тяжело. Как договориться о правилах экспорта?

Primat

Сообщений

421

С нами

26.10.2026

25.10.2026 22:15

Я бы завёл в проекте понятные требования: какие форматы для фото, иконок и логотипов, плюс максимальные размеры. Тогда меньше сюрпризов при сборке.

Лариса

Сообщений

360

С нами

26.10.2026

25.10.2026 22:17

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

Лучик

Сообщений

360

С нами

26.10.2026

25.10.2026 22:19

А кто-нибудь использует AVIF или WebP для фотографий с несколькими плотностями? Интересно, как это удобнее организовать вместе с srcset.

Archi

Сообщений

390

С нами

26.10.2026