Экспорт изображений из figma в 1x или 2x?

Question

[ksenialershina]

Встретилось на одном из обучающих курсов по верстке, что желательно всегда экспортировать все изображения из фигмы в 2х под большие экраны (4к). Как правильно?

Answer 1

[Вадим]

1. Нет понятия правильно и не правильно. Есть то, что соответствуют задаче, и остальное.

2. Это делают не для 4к разрешения, а для мониторов с большей плотностью пикселей. Например, ретина экраны. Но современные десктоп мониторы уже тоже с так называемой одинарной плотностью редко встречаются. Таким образом, для мониторов с маленькой плотностью пикселей загрузится картинка х1, для остальных х2. Таким образом, на мониторах с большей плотностью пикселей картинка сохранит свою чёткость, а не поплывёт.

3. В идеальном мире Вы должны отдавать пользователю и х1 и х2 в зависимости от его девайса. Ибо зачем пользователю с х1 экраном грузить более тяжёлую х2 картинкку? А так же в нескольких разных форматах (с помощью picture). Например, jpg, webp, avif (браузер загрузит тот что поддерживает). Итого получаем 2*3 = 6 экземпляров одной картинки. А раз наш мир в этом пункте идеальный, то для разных разрешений ещё и разные картинки отдавать, которые больше под это разрешение подходят. Например, обрезают лишнее и сохраняют фокус на важном. Тогда, скажем, возьмём ещё 3 разрешения, получаем 18 экземпляров одной картинки :-) Но, конечно же, даже в идеальном мире, такое делать желательно только с тяжёлыми, размером больше "среднего" и контентно значимыми изображениями.

Answer 2

[cssfish]

если речь про растр и исходник в фигме позволяет, то в большинстве случае да, @2x делайте.
только дело тут не в 4к а плотности пикселей на устройствах

Comments

[Sergey Subbotin]

А как в Figma узнать какое исходное разрешение у изображения в проекте? Смысл экспортировать x2, если при этом исходное разрешение просто вдвое растянется?

[cssfish]

Sergey Subbotin, хз как там узнать напрямую, но
1) можно сохранить в 2x и оценить прост овизуально - если запаса по разрешению не было, то будет пикселизация
2) можно выделить изображение и на вкладке inspect-code-table щелкнуть по file name и сохранить оригинал, и его потом оценивать.
но первое быстрее...

[Sergey Subbotin]

cssfish, спасибо за быстрый ответ! Первый способ не очень надёжный, а вот второй то, что надо. Пусть и костыль, но работает. Странно, что нативно Figma не позволяет узнавать исходные данные изображений, добавленных в проект...

[cssfish]

Sergey Subbotin, да там много чего странного )