Как подготовить картинки и иконки для адаптива?

Question

[Oleg Urievich]

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

Answer 1

[Руслан Галиев]

1) Большие растровые картинки без прозрачности - в jpg со сжатием около 70% + копия в двойном размере, при необходимости (в случае с фоновыми картинками, где нет мелких деталей, часто можно обойтись и одинарным размером)
2) Маленькие растровые (с прозрачностью) - в png и оптимизировать tinypng.com (или каким-нибудь софтом) + копия в двойном размере для ретины.
3) Все что может быть векторным - в SVG.
4) Иконки можно собрать в спрайты.

Вот интересное видео по теме - https://www.youtube.com/watch?list=UUH8zwr3rJOcgCA...

Comments

[Oleg Urievich]

По поводу размеров @2x и @3x
Скачав фото со стока в большом разрешении, необходимо первым делом подобрать размер для @1x , а потом пропорционально для @2x ?
В фотошопе это делать изменением размера для изображения?

[Руслан Галиев]

Если вы делаете макет в 1х, то соответственно и базовый размер изображения будет в 1x (заключенный в смарт объект, где лежит исходная картинка в максимальном разрешении).

Прописываете слою название: filename.png, 200% filename.png и у вас сгенерируется картинка в базовом и двойном разрешении.

Но есть практика создания макетов изначально в 2x размере.

Прописываете слою название: filename.png, 50% filename.png и у вас сгенерируется картинка в базовом (двойном) и уменьшенном вдвое разрешении.

Предварительно включите: Файл - Генерировать (File - Generate - Image Assets)
Файлы будут сохраняться в папке, где лежит ваш PSD файл.

Можно сохранять jpg, png, svg (если это векторный смарт объект, или вектор непосредственно в фотошопе)

[Oleg Urievich]

Спасибо за такой развёрнутый ответ.
Руслан, если вас не затруднит, можете скинуть наглядное видео как работать со смарт объектами? Или снимите короткое видео сами?

[Руслан Галиев]

Oleg Urievich, снять видео?))

Там нет ничего сложного - тыкаете ПКМ по слою и в контекстом меню выбираете "Преобразовать в смарт объект", либо при импорте изображения в появившемся диалоговом окне выбираете смарт объект. Чтобы редактировать, тыкаете ПКМ по слою и выбираете "Редактировать содержимое"

Answer 2

[Mikalai Bulava]

Иконки в svg, картинки в png и готово. Какие проблемы?

Comments

[Oleg Urievich]

Почему только в png? Jpg уже не используют?

Answer 3

[Максим Глобак]

Хорошим тоном будет позаботиться о каждом =)
Например Apple для iOS рекомендует использовать PDF для ветровых изображений.
Для Web все привыкли использовать SVG и так далее
Сейчас экспортировать во все форматы, например из Sketch, не является большой проблемой, но для разработчиков вы станете супер дизайнером.