Веб-дизайн – чаще всего недешевое удовольствие. Но стоит подумать и о том, чего дизайн стоит пользователям. Пользователи мобильных устройств платят за каждый скаченный (или закаченный) байт, если они не подключены к wi-fi. И хотя HTML и CSS файлы с каждым годом становятся все больше, они не так огромны, как JPG, PNG и GIF. Профессиональные дизайнеры знают, что лучше всего создавать сайты и приложения, которые загружаются настолько быстро, насколько это возможно. Для этого нужно избавиться от всего лишнего (как от ненужных наречий в тексте статьи). Пользователям не нужны пиксели. Однако использовать «адаптивные» изображения не значит просто внести изменения в код. При работе с ними существуют определенные трудности, которые предстоит преодолеть дизайнерам. Чтобы создать сайт, который хорошо работает и отлично выглядит на различных экранах, нужно с самого начала следовать определенной стратегии. Слишком сложно? Может быть. Стоит ли оно того? Определенно. Изображение может быть не менее важным, чем текст, но если оно весит миллион байт, то пользователи, скорее всего, не дождутся его загрузки.

Выбор подходящего формата

JPG, SVG, GIF и PNG (а еще PNG-24) – новичкам в дизайне с этими форматами нелегко разобраться. Однако и ветераны часто совершают ошибки: выбирают JPG там, где подошел бы SVG, или устанавливают по умолчанию PNG-24 вместо PNG-8.

JPG

Или JPEG, сокращение от Joint Photographic Experts Group, был разработан в 1991 и опубликован в 1992 с целью стандартизировать изображения, передающиеся через интернет. Формат JPG использует сжатие с потерями, это значит, что после него нельзя вернуть первоначальное качество изображения. Сжатие происходит по шкале от 0 до 100. Как ни странно, у файлов JPG со 100% сжатием самое высокое качество и больший размер. 0% сжатие предлагает меньшие изображения худшего качества. Дефекты – те части JPG изображения, которые изменило сжатие в целях уменьшения размера файла. Это участки одного цвета, которые заметны при размере больше 20 квадратных пикселей. Проявляются они, прежде всего, в острых углах. Поэтому лучше использовать этот тип сжатия на сложных изображениях, например, фотографиях. Вывод: сжатие JPG подходит для сложных изображений с множеством деталей, например, фото.

PNG (8-бит)

В отличие от JPG PNG (Portable Network Graphics) файлы используют сжатие без потерь, открытое и сохраненное изображения могут различаться. К тому же в файлах PNG-8 есть список использующихся уникальных цветов. Уникальные, то есть #FFFFFF отличается от #FFFFFE, хотя различить эти цвета человеческим глазом практически невозможно. Каждый пиксель обозначен определенным цветом в списке, поэтому нет необходимости тратить на это драгоценные байты. Если в первой сотне пикселей используется RGB (255,255,255), достаточно будет обозначить, что пиксели 1-500 относятся к цвету №1. Вот почему формат PNG отлично подходит для сжатия малоконтрастных изображений. Вывод: формат PNG-8 содержит до 256 уникальных цветов в своем списке, также он позволяет делать пиксели совершенно прозрачными. Поэтому он идеально подходит для сжатия изображений в популярном сегодня «плоском» стиле.

PNG (24-бит)

Файлы формата PNG-24 выглядят отлично, потому что для них не используется сжатие. В них также нет списка цветов. При сохранении PNG-24 файлов фиксируется каждая деталь, и в это проблема. Непрозрачность – еще одна. Вывод: пиксели в файлах PNG-24 могут быть частично прозрачными, но за ними просто будут скрываться элементы. Конечно, все это за счет размеров изображения.

GIF

Формат GIF (Graphical Interchange Format) во многом напоминает PNG-8. С ним работают все браузеры. Этот формат появился в 1987 (PNG при этом только в 1996). В нем используются списки цветов. Сжатие таких файлов чуть менее эффективно, чем PNG. GIF делает пиксели совершенно прозрачными. Несомненное преимущество GIF – возможность хранить более одного изображения и демонстрировать их в определенной последовательности, то есть показывать анимацию. Чаще всего такие файлы используются в качестве элемента контента, а не дизайна, так как нельзя остановить или запустить их показ, они не интерактивны. Этот факт наравне с тем, что размер GIF файлов немного больше, заставляет дизайнеров делать выбор в пользу формата PNG для «плоских» изображений. Вывод: если вам нужна простая анимация, GIF – идеальный вариант. Однако сжатие PNG-8 немного более эффективно для простых изображений (например, одноцветных иллюстраций), а JPEG – для сложных изображений (например, фото).

Сжимаем каждый байт

Сжатие изображений – процесс уменьшения размера файла за счет удаления ненужных данных или изменения изображения для лучшей загрузки, что значительно влияет на скорость загрузки сайта. Чем быстрее загружается сайт, тем больше на него заходит пользователей. Большинство графических редакторов, например, Photoshop, Sketch и Pixelmator без проблем экспортируют сжатые и подходящие для сети файлы. Но и они не идеальны. Другие инструменты также способны отлично справляться с этой задачей.

Инструменты для сжатия изображений

Compress JPEG

Как понятно из названия, этот бесплатный онлайн-сервис избавляет JPG файлы от лишних байтов, не ухудшая качество изображений. Compress JPG уменьшил это сохраненное в Photoshop изображение на 70% (с 217KB до 160KB). Качество при этом не пострадало.

TinyPNG

Еще один бесплатный сервис сжимает файлы PNG 8-бит и 24-бит для ускорения времени загрузки. TinyPNG сжал это изображение с 16KB до 12KB, устранив практически ненужные цвета. Качество осталось прежним.

Слишком или недостаточно?

Это зависит от изображения. Наша цель – изображение максимально хорошего качества и при этом минимального размера. Но иногда можно и переборщить. Существует ли золотая середина?

Для JPG

Фото выше было сжато разными способами. В результате при 0% сжатии вес файла составил 45KB, при 100% - 479KB. Не забывайте, что эффект здесь прямо противоположный: чем больше сжатие, тем больше качество и размер изображения. При снижении качества с 100% до 70% размер файла уменьшается практически вполовину. При более низком проценте сжатия разница небольшая. Однако при уменьшении числа байтов с 0 до 20% качество упало значительно. Изображение весит 45KB при 0% сжатии (слева) и 94KB при 30% сжатии (справа). И хотя сократить размер удалось почти в два раза, дефекты оказались слишком заметными. Вывод – оно того не стоит. Лучший вариант: не сжимайте JPG файлы выше, чем на 70% и ниже чем на 20%. Это правило работает в большинстве случаев, но не всегда.

Для PNG

Куда сложнее обстоят дела с PNG файлами. Возьмем, например, это изображение: Заметьте, что цвета не везде однородные, здесь используется градиент. С учетом этого нужно найти участок точек, которые создают этот плавный переход. В отличие от JPG формат PNG не использует процентные показатели. Качество и размер файла в данном случае определяется количеством цветов в списке. При 88% сглаживании результат оказался следующим: Существует определенная связь между числом цветов и весом файла, но она не такая ощутимая. При использовании 40 цветов размер примерно такой же, как и при использовании 25, при этом качество значительно отличается. Лучший вариант: при сжатии PNG файлов желательно поэкспериментировать с различными таблицами цветов. Выбор подходящего количества будет практически полностью зависеть от изображения.

SVG

В формате SVG (Scalable Vector Graphics) используются линии, а не пиксели – это векторные, а не растровые изображения. Файлы SVG – одна из форм XML, которые создаются в таких программах, как Inkscape и Adobe Illustrator. Изображения в формате SVG легко подстраиваются под любой размер – от смартфона до широкоэкранного телевизора. За счет векторов они не теряют при этом в качестве. Из них даже можно сделать анимацию при помощи JavaScript. При этом не нужно загружать все файлы отдельно, что отнимает время и ресурсы сервера, изображения SVG можно включить непосредственно в HTML документ. Слева – векторное изображение, справа – растровое. Однако как PNG and GIF, SVG страдает при более сложных изображениях. Этот формат не подходит для фото, так как стремительно увеличивает вес изображения с каждой новой линией. Лучший вариант: если ваша цель – «плоский» двухмерный дизайн с острыми углами и слабыми градиентами, тогда выбирайте SVG.

Изучение кода

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

Важные свойства CSS

Одно из самых распространенных и надежных решений – настроить параметры в CSS: img { max-width: 100%; } Эта команда адаптирует большинство изображений под заданные рамки. Например, если установлена граница в 300 пикселей в ширину, тогда ни одно изображение не будет шире 300 пикселей. Эта техника поддерживается большинством современных браузеров, вот почему сегодня она используется при создании почти всех адаптивных сайтов.

Будущие элементы изображения HTML

Сегодня мы ограничены возможностями CSS и элементом <img>. Но когда (и если) будет внедрена новая технология, появится возможность делать изображения такими же адаптивными, как сейчас сами страницы сайтов. Экспериментальный элемент <picture> включает в себя один или несколько дочерних элементов <source>, которые используют запросы для сообщения о времени загрузки. Браузеры заменяют атрибут src элемента <img> в <picture> подходящим источником, если такой есть. Например: <picture alt=”Descriptive text fallback”> <img src=”sample-default.png”> <source srcset=”sample-large.png” media=”(min-width: 640px)”> <source srcset=”sample-small.png” media=”(max-width: 639px)”> </picture> Этот код заменит sample-default.png большой или маленькой версией, в зависимости от требуемой ширины. В качестве бонуса браузеры, которые не поддерживают <picture>, смогут прочитать <img> как обычно. Это хорошие новости, так как сегодня только некоторые современные браузеры поддерживают новые элементы. Но скоро они получат все большее распространение, а, значит, дизайнеры должны пристально следить за развитием событий.

Отображение в браузере

Иногда лучшее изображение – это его отсутствие. Современные браузеры могут отображать собственную графику, включая градиенты, анимации, векторные изображения, тени и геометрические фигуры. При создании изображений в браузере не требуется скачивать файлы, что экономит трафик и время. Однако для этого нужен браузер с определенными функциями. Лучший вариант: используйте отображение в браузере для эстетических элементов (фоновых цветов и границ), но не для контента. Всегда тестируйте свой дизайн, проверяя как он будет смотреться в менее мощных браузерах.

UI-дизайн

От иконок до фона и контента, - изображения, без сомнения, невероятно важны для создания пользовательского интерфейса. Однако при использовании адаптивных изображений возникает множество препятствий. Все дизайнеры мечтают о возможности обрезать изображения, фокусироваться на самых важных частях или загружать разные изображения для разных контрольных точек. И основа этому уже положена. Но до повсеместного распространения <picture>  лучшим подходом будет тестирование изображений в различных размерах, на разных устройствах и в разных браузерах. Основные правила адаптивного веб-дизайна: используйте подходящий формат файлов, оптимизируйте сжатие и следите за новыми технологиями, дающими возможность моментально загружать любые сайты, которые будут отлично смотреться на экранах любых размеров и разрешений.