Как экспортировать изображения без мыла на ретина дисплэях?
Взял себе macbook pro 2018 c ретиной - теперь все экспортируемые из фигмы изображения мыльные.
Дело не в отображение на экране а именно в том что сохраняются c блюром (отправлял на проверку - все говорят что размыты картинки).
Собственно на каком бубне играть чтобы это исправить
Рустам Байназаров, у меня на старом маке тоже не было таких проблем но тут ретина.
Ну вот собственно разница на скрине видна сверху фигма снизу просмотр того что сохранилось
(скрин с ретины тоже х2 - т/е это не блур при зуме)
Владимир Красильников, не понял, как это отменяет мои слова, что это маркетинговое обозначение экранов с высоким разрешением? Вы не понимаете разницу между прямым значением слова маркетинг в данном контексте (название) и дополнительным значением (обман)? Тут никакого обмана нет, это просто название такое.
Владимир Красильников, retina может давать и x3, и x4 и так далее. Все зависит от масштабирования. Принцип работы Retina аналогичен viewport в web. 72×72 — это для печати информация. 72 точки на дюйм.
Я не знаю у Figma экспорт исходников в их реальном разрешении. Его нет, к сожалению. Только либо в том разрешении, какие они на артборде, либо х2 и т. д., либо своё.
Просто реальное разрешение картинки-исходника гораздо выше, чем у объекта на артборде. А т. к. на экспорте имеет исходное разрешение х1 равно размеру объекта, то даже при экспорте в х2 сея картинка выглядит мутной. Всё из-за небольшого размера объекта на артборде. Экспортируйте в x6, например, или ещё выше — это решит проблему.
Проверить, что картинка выглядит мутной именно из-за этого, можно с помощью режима Pixel Preview:
Рустам Байназаров, при экспорте хN как раз таки и меняется разрешение (при х6 становится 432х432). но размер естественно тоже меняется. Это касается не только экспорта растра но и вектора
Владимир Красильников, да, меняется, как разрешение, так и размеры, ибо за основу берётся размер объекта на артборде.
У вектора меняет только размер viewbox'a, у него нет разрешения как такового, это можно даже и не делать в целом для вектора.
Поле разрешение вас вообще не нужно. Вас интересует именно значение поля размеры (dimensions). Это и есть то, что мы все называем разрешением в обиходе. Если не верите, сделайте в Photoshop картинку 1000×1000 и сохраните. Это значение будет прописано в поле размеров изображения, а не разрешения.
В итоге, экспорт в большем разрешении (размере) помог?
Рустам Байназаров, нет - мне нужно отдать картинку х1 размера, при эксопрте х6 и обратном ресайзе сторонними тулзами изображение естественно искажается (кто бы мог подумать).
Проблема то в том что раньше такого не было на другом устройстве без ретины. Так что вот эти все х6 это исправление симпотомов а не причины - мне же интересно в чем именно причина такого размыливания вдруг
Владимир Красильников, не знаю, такое поведение стандартно. Оно не может зависеть от размера экрана. Ну можете, конечно, открыть этот же макет на старом ноутбуке, LOL, или на любом другом устройстве. И оттуда сделать экспорт. Результат будет тот же самый. Либо же мой опыт с сотнями макетов мне врёт.
Что тут происходит)
Блин все как 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(image@x2.png);
И стоит добавить что да, даже если вы картинку сохраните x2 то в "быстром просмотре" она всеравно будет размыта, но на выходе на вебстранице если сделаете как писал - все будет ок.
Но есть общепринятый способ по названию таких картинок. в названии картинки вам надо добавить просто @2x, к примеру у вас image.png - 72х72, сохраняете такую же 144x144 и называете image@2x.png, но в код html всеравно нужно все заверстать.
Просто благодаря такому названию mac OS Catalina умеет в быстром просмотре отображать картинки нормально, тоисть она должна ее отобразить как 72x72 и при этом не будет мыла. Но работает к сожалению почему то не всегда, с jpg нормально, с png как раз не очень.
Вот по параметрам чтобы было понятнее и на практике.
А вот такой 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/man@2x.jpg);
}
}
Как раз для этого в Figma и Sketch есть специальные режимы экспорта растровых изображений: x1, x2, x3 и т.д. для разрешения 72ppi x1 = 72ppi, 72 x2=144ppi и так далее. Для векторных, соответственно, только один размер.
Как пользоваться в Figma:
1. Выделяем фрейм/группу элементов/элемент, который нужно экспортировать
2. Ищем кнопку Export внизу панели инструментов
3. Жмём экспорт, настраиваем параметры и отгружаем
4. PROFIT
Простой
