Frontend Handbook

Графика

Правильно выбранный формат позволит сохранить картинку в минимальном размере с приличным качеством.

Изучите форматы файлов, используемых в вебе; разберитесь, какие форматы для каких картинок лучше подходят; научитесь оптимизировать изображения.

Предварительная подготовка

Форматы файлов

JPG, PNG и SVG — это основные форматы графических файлов на вебе.

Есть еще GIF, но его область использования ограничилась забавными анимациями. Относительно недавно появилось еще несколько форматов (APNG, WEBP), но они пока не поддерживаются всеми распространенными браузерами.

В таблице кратко описано, для каких картинок подходят те или иные форматы.

Формат Для каких изображений подходит
SVG

Векторные изображения, прежде всего иконки.

JPG
  • Фотографии, коллажи (несколько слепленных фотографий).
  • Полноцветные изображения, похожее на фотографии или содержащие их части.
  • Абстрактные, многоцветные, размытые фоны, не требующие высокого качества.
PNG
  • Растровая графика, созданная на компьютере с палитрой до 256 цветов: логотипы, небольшие арты, иконки и элементы дизайна (если нет возможности использовать SVG).
  • Файлы с 8-битной прозрачностью (нет переходов от прозрачности к цвету, четко видно, где есть цвет, а где прозрачность).
PNG24
  • Сложные градиентные переходы.
  • Полноцветные картинки с полупрозрачностью.

Обеспечивает максимальное качество, но файлы могут быть тяжеловатыми.

GIF

Анимация, если не получается ее сделать на CSS/JS/SVG.

Новые форматы, не все браузеры поддерживают
APNG

Анимированный PNG, сравнение с GIF и WEBP.

WEBP

Многообещающий формат от Гугл.

Подробнее про JPG

Формат jpg был придуман специально для хранения фотографий в цифровом виде. Отсюда следует, что в jpg нужно сохранять прежде всего фотки и фотко-подобные изображения.

jpg и jpeg — одно и то же. Просто два разных расширения для одного и того же формата файлов. Всегда используйте jpg.

jpg — формат с потерей качества. То есть при сохранении изображения в jpg оно подвергается воздействию ряда алгоритмов, оптимизирующих информацию о цветах и других параметрах. Если выставить 95% качества при сохранении, то едва ли можно будет заметить отличия от оригинала. При 30% будет заметно множество дефектов (их еще называют артефактами).

Если на изображении присутствуют мелкие контрастные детали, не следует выставлять качество ниже 51. Можно взять за правило: начинать оптимизацию фоток с 51% и смотреть, что получается (внешний вид и размер файла). Во многих случаях это будет золотая середина.

Именование файлов

Графические файлы именуются маленькими буквами без пробелов.

Расширение файла должно быть трехбуквенным, если такое имеется (jpg вместо jpeg).

Слова в названии разделяются -, префиксы и постфиксы — через _.

Примеры:

# Плохо
TopMenuBackground.png # использованы большие буквы в названии
girlPhoto.JPEG        # 4 буквы в расширении, большие буквы в имени файла и расширении

# Хорошо
bg_top-menu.png       # префикс дает больше информации о файле
teaser-girl.jpg       # понятно, что это завлекающая картинка с девушкой

Префиксы и постфиксы

Префикс информирует о том, что хранится в файле, пишется в начале названия файла и отделяется _.

Примеры:

  • bnr_ — баннер (banner): bnr_home-skin-category.png;
  • arr_ — для стрелки (arrow): arr_left.png;
  • bg_ — для фона (background): bg_top-menu.png;
  • ico_ — для иконки: ico_search.svg;
  • slide_ — для изображения в слайдере: slide_pdp-carousel_1.jpg.

Постфикс используется для вспомогательных деталей, пишется в конце названия и также отделяется _. Постфикс можно использовать, например, для номера слайда:

slide_pdp-carousel_1.png
slide_pdp-carousel_2.png

Макеты

Макеты от дизайнеров, как правило, приходят либо из Фотошопа, либо из Скетча. Для работы с ними мы используем Avocode.

Большие макеты из Фотошопа

Макеты из Фотошопа обычно имеют расширение .psd или .psb (спецформат для больших файлов).

Если размер PSD/PSB-файла меньше 500Mb, то он нормально откроется Авокодом. В файлах больше 500Мб, скорее всего, используются артборды (хранится сразу несколько макетов) и нужно попросить дизайнера сохранить каждый артборд отдельно. Если вы работаете недавно и еще не в курсе, где искать дизайнера — расскажите своему менеджеру о вашей проблеме, он поможет разобраться.

Оптимизация изображений

Для оптимизации изображений под МакОС подойдет ImageOptim, для других ОС тоже есть варианты с графическим или CLI-интерфейсом.

ImageOptim — графический интерфейс для набора утилит, которые оптимизируют, но не портят изображения:

ImageOptim is a GUI for lossless image optimization tools: PNGOUT, AdvPNG, Pngcrush, OptiPNG, JpegOptim, MozJPEG, Gifsicle, SVGO, and svgcleaner.

Можно использовать инструменты для командной строки. Например, Imagemin. В проекте также удобно иметь скрипт для оптимизации изображений, его можно запускать через Гальп-плагин.

Это самые простые варианты. Более продвинутые техники оптимизации изображений описаны по ссылкам:

← Видео →