Как экспортировать изображения без мыла на ретина дисплэях?

Question

[Владимир Красильников]

Взял себе macbook pro 2018 c ретиной - теперь все экспортируемые из фигмы изображения мыльные.
Дело не в отображение на экране а именно в том что сохраняются c блюром (отправлял на проверку - все говорят что размыты картинки).
Собственно на каком бубне играть чтобы это исправить

Comments

[Rustam Bainazarov]

Никогда не видел такой проблемы в Figma. Дайте больше конкретики.

У меня тоже Macbook.

[Владимир Красильников]

Рустам Байназаров, у меня на старом маке тоже не было таких проблем но тут ретина.
Ну вот собственно разница на скрине видна сверху фигма снизу просмотр того что сохранилось
(скрин с ретины тоже х2 - т/е это не блур при зуме)

[Rustam Bainazarov]

Владимир Красильников, а как retina на что-то влияет? Это просто маркетинговое название экрана с высоким разрешением.

[Rustam Bainazarov]

Владимир Красильников, через приложение работаете? Попробуйте из браузера открыть и оттуда сделать экспорт.

[Владимир Красильников]

Рустам Байназаров, ОКЕЙ как скажешь
ну кроме этого разрешение экрана еще 2880 на 18800 - но это видимо тоже "маркетинг"

[Rustam Bainazarov]

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

[Владимир Красильников]

Рустам Байназаров, из браузера такая же фигня. Вот заметил в информации о файле - где это поменять ?

[Владимир Красильников]

Рустам Байназаров, я о том что даже обычные скрины у меня х2 по размеру и в этом соль ретины что она в тех же самых 15дюймах дает картинку х2

[Rustam Bainazarov]

Владимир Красильников, retina может давать и x3, и x4 и так далее. Все зависит от масштабирования. Принцип работы Retina аналогичен viewport в web. 72×72 — это для печати информация. 72 точки на дюйм.

Я не знаю у Figma экспорт исходников в их реальном разрешении. Его нет, к сожалению. Только либо в том разрешении, какие они на артборде, либо х2 и т. д., либо своё.

Просто реальное разрешение картинки-исходника гораздо выше, чем у объекта на артборде. А т. к. на экспорте имеет исходное разрешение х1 равно размеру объекта, то даже при экспорте в х2 сея картинка выглядит мутной. Всё из-за небольшого размера объекта на артборде. Экспортируйте в x6, например, или ещё выше — это решит проблему.

Проверить, что картинка выглядит мутной именно из-за этого, можно с помощью режима Pixel Preview:

[Владимир Красильников]

Рустам Байназаров, при экспорте хN как раз таки и меняется разрешение (при х6 становится 432х432). но размер естественно тоже меняется. Это касается не только экспорта растра но и вектора

[Rustam Bainazarov]

Владимир Красильников, да, меняется, как разрешение, так и размеры, ибо за основу берётся размер объекта на артборде.

У вектора меняет только размер viewbox'a, у него нет разрешения как такового, это можно даже и не делать в целом для вектора.

Поле разрешение вас вообще не нужно. Вас интересует именно значение поля размеры (dimensions). Это и есть то, что мы все называем разрешением в обиходе. Если не верите, сделайте в Photoshop картинку 1000×1000 и сохраните. Это значение будет прописано в поле размеров изображения, а не разрешения.

В итоге, экспорт в большем разрешении (размере) помог?

[Владимир Красильников]

Рустам Байназаров, нет - мне нужно отдать картинку х1 размера, при эксопрте х6 и обратном ресайзе сторонними тулзами изображение естественно искажается (кто бы мог подумать).

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

[Rustam Bainazarov]

Владимир Красильников, не знаю, такое поведение стандартно. Оно не может зависеть от размера экрана. Ну можете, конечно, открыть этот же макет на старом ноутбуке, LOL, или на любом другом устройстве. И оттуда сделать экспорт. Результат будет тот же самый. Либо же мой опыт с сотнями макетов мне врёт.

[lamer350]

Что тут происходит)
Блин все как 2х2, у вас блюр именно потому что вы выгружаете x1 для ретины нужно x2. Все, больше тут нечего обсуждать. Магии никакой нет, то что вы там писали что вы хотите x6 в x1 это что вообще?
Это работает так - к примеру у вас картинка 72x72 (это ее размер, разрешение одно и то же). Это и есть нативное x1, то что вам нужно сверстать в css/html. Но для ретины нужно x2, тоисть на выходе (размер/разрешение, называйте как хотите но это одно и то же) вы должны получить 144х144 и сверстать ее так чтобы она на выходе в css/html получилась 72х72 тоисть кропнута в 2 раза. Если это background-image, то изначально задать все параметры background отдельно и вставить пункт background-size: 72px 72px; при этом подгружать именно background-image: url([e-mail]);

[lamer350]

Есть отдельные медиа запросы который вы потом вставляете в css и для "ретины" грузите отдельные картинки @2x.

[lamer350]

И стоит добавить что да, даже если вы картинку сохраните x2 то в "быстром просмотре" она всеравно будет размыта, но на выходе на вебстранице если сделаете как писал - все будет ок.
Но есть общепринятый способ по названию таких картинок. в названии картинки вам надо добавить просто @2x, к примеру у вас image.png - 72х72, сохраняете такую же 144x144 и называете [e-mail], но в код html всеравно нужно все заверстать.
Просто благодаря такому названию mac OS Catalina умеет в быстром просмотре отображать картинки нормально, тоисть она должна ее отобразить как 72x72 и при этом не будет мыла. Но работает к сожалению почему то не всегда, с jpg нормально, с png как раз не очень.

[Владимир Красильников]

lamer350, верстка тут не причем = про х2 и медазапросы вкурсе. Тут дело именно в экспорте макетов - они экспортируются с блюром

[lamer350]

Вот по параметрам чтобы было понятнее и на практике.


А вот такой media запрос в css для отслеживания екранов с высокой плотностью пикселей и подменой для них картинок с большим разрешением.

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {
	#man{
		background-image: url(/img/[e-mail]);
	}
}

[lamer350]

Владимир Красильников,

верстка тут не причем = про х2 и медазапросы вкурсе. Тут дело именно в экспорте макетов - они экспортируются с блюром

Давайте проверим, сбросьте картинку x1 и x2 которые вы експортировали с фигмы

Answer 1

[Athanor]

Как раз для этого в Figma и Sketch есть специальные режимы экспорта растровых изображений: x1, x2, x3 и т.д. для разрешения 72ppi x1 = 72ppi, 72 x2=144ppi и так далее. Для векторных, соответственно, только один размер.

Как пользоваться в Figma:
1. Выделяем фрейм/группу элементов/элемент, который нужно экспортировать
2. Ищем кнопку Export внизу панели инструментов
3. Жмём экспорт, настраиваем параметры и отгружаем
4. PROFIT

Comments

[TedMarsh]

Сравнил. На 1x пиксели, на 2x разрешение больше без пикселей, но компьютер сам подставил пиксели и сделал мыло. Так и делается ретина?