что такое веб графика
Чёткость до последнего байта: как делать веб-графику хорошо — часть 1
По-серьёзному о графике в интернете: основы форматов изображений, инструменты для оптимизации и то, как люди воспринимают веб-графику.
Мы заботливо подготовили перевод крутой статьи от наших коллег из блога Evil Martians (оригинал материала авторства Полины Гуртовой, Риты Клубочкиной и Энди Барнова ищите здесь). Статья будет полезна фронтендерам, ПМ-мам, контентщикам и вообще всем, кто имеет дело с изображениями в интернетах (возможно, даже вашей маме).
Знаете ли вы, что средняя веб-страница для десктопа в 2019 занимала 2 МБ трафика, и половина всего, что веб-сервер отправляет браузеру пользователя, — это графика? JPEG, PNG, SVG, GIF и некоторые другие аббревиатуры известны каждому, кто когда-либо создавал хоть что-либо в «цифре». Может показаться, что всё отображаемое на странице касается только фронтенд-разработки, но на самом деле понимание специфики веб-изображений важно для всех членов продуктовой группы: от тех, кто отвечает за серверную часть, до дизайнеров, менеджеров и специалистов техподдержки клиентов.
Если у вас не так много времени, чтобы читать эту длинную и извилистую статью, вот инфографика.
Технически гипертекст (текст, который ссылается на другой текст), представленный Дугласом Энгельбартом в 1968 году как основа современной веб-коммуникации, не нуждается в изображениях для передачи информации. Но реальность такова, что вниманием пользователя нужно управлять с помощью графического контента. Изображения, видео, CSS-анимация, рисованная графика Canvas API, WebGL, даже Flash — тёмная технология древних времен — все средства хороши в постоянной борьбе за удержание пользователя.
Для компьютера каждое изображение — это просто последовательность конкретных инструкций. То, как они переводятся в аппаратные пиксели, отображаемые на экране, — само по себе захватывающая история. Большинство форматов изображений, за исключением BMP (кто там
в пейнте ещё рисует?), в точности не хранит значения пикселей. Немножко математики, и данные, содержащиеся в файле, декодируются в массив значений с цветовой кодировкой. Кодировка RGB (red, green, blue) — самая очевидная для передачи цвета.
Кодировка YCbCr тоньше, поскольку учитывает работу человеческого глаза и мозга: на самом деле мы более восприимчивы к изменениям яркости, чем к изменениям цвета.
Когда мы имеем дело с векторной графикой, то особенно не задумываемся о тройных или четверных кодировках (CMYK), как в растровых форматах. Больше интересуют геометрические примитивы: линии, круги и квадраты, которые по факту являются просто кривыми Безье.
PNG, GIF, JPEG, WebP, HEIC, AVIF (для видео) — растровые форматы, SVG — векторный формат. Ниже о каждом будет поподробнее.
Исходный размер изображения ниже, полученного на профессиональную видеокамеру — 37,8 МБ. Из уважения к вашему интернет-провайдеру, его сжали его до 3,5 МБ без потери качества.
Но оптимизация самого изображения — это не первое, что стоит учитывать при работе с визуальным контентом в интернете. Для начала, оцените весь стек, стоящий за доставкой этих сочных байтов по сети к конечному пользователю. Для этого задайте себе пару вопросов:
Запишите эти вопросы себе шпаргалочкой, а теперь — поговорим о самих изображениях.
Ваша ответственность перед пользователями в том, чтобы предоставить им изображения самого высокого качества, используя при этом минимум ресурсов: вычислительной мощности (как сервера, так и клиента), памяти компьютера и пропускной способности канала связи.
Мы будем говорить о техническом качестве изображения и не будем учитывать композицию, перспективу или цветовую гармонию. Просто представим, что у нас уже есть идеальное изображение, которое нужно разместить в интернете самым оптимальным способом.
Качество изображения — степень, в которой полученное изображение отличается от идеального. И под качеством имеется в виду следующее:
Что такое графический дизайн и зачем он нужен
Английский — глобальный язык? Пф-ф! А вот с помощью графики даже трёхлетний японский карапуз легко поймёт немецкую бабушку.
Упаковки продуктов в вашем холодильнике, вывески и указатели на улицах, плакаты, флаеры и оформление ваших любимых пабликов в VK — всё это сделали графические дизайнеры. Каждый день нам на глаза попадаются сотни рекламных объявлений, брендированных продуктов и элементов визуальной коммуникации.
Графический дизайн — широкое понятие, затрагивающее почти все сферы нашей жизни и в реальном, и в цифровом мире. Давайте разберёмся, где он используется и какие функции выполняет.
Пишущий дизайнер. Пришла в профессию, получив второе образование, ранее занималась когнитивными исследованиями, SMM и копирайтингом. Пишет о визуальных трендах, делится наблюдениями из отрасли и техническими лайфхаками.
Способ донести информацию
Мы по максимуму используем визуальное восприятие, чтобы ориентироваться в мире и выполнять рутинные дела.
Хотите дойти до супермаркета? Вам необходимы указатели на домах, стрелочки в Яндекс.Навигаторе или хотя бы вывеска с названием магазина, заметная издалека. Хотите почитать книжку? Нужно, чтобы графический дизайнер позаботился о подходящем шрифте и единообразии страниц. Собираетесь выступать перед аудиторией? Визуальное сопровождение поможет резюмировать всё самое важное.
Важная миссия графического дизайнера — упорядочивать хаос вокруг и раскладывать информацию по полочкам.
Вывески и указатели
Эти инструменты коммуникации нужны, чтобы человек сориентировался на незнакомой территории или понял, каких действий от него ожидают в конкретной ситуации. Иногда слова содержат всю необходимую информацию, тогда задача дизайнера — сделать надпись легко читаемой и приятной глазу.
Часто слова сопровождаются картинками: это нужно для структурирования разных сообщений, когда в них трудно ориентироваться. Человек гораздо быстрее охватит взглядом картинку, чем прочтёт несколько предложений. А иногда визуальный язык становится единственно возможным способом коммуникации: вывески в аэропортах, на международных конференциях и в туристических местах всегда дополняются изображениями.
Бывает, что слова вовсе не нужны. Например, в дорожных знаках. Все водители знают их значение и быстро ориентируются по картинкам: читать текст во время движения просто нет времени. В разных странах знаки могут незначительно различаться: дизайнеры трудятся над тем, чтобы сделать их максимально лаконичными, понятными, узнаваемыми. Это особенно важно, когда от участников дорожного движения требуется быстрая реакция.
Вывески, таблички и короткие инструкции окружают нас повсюду и помогают нам спокойно жить. Мы воспринимаем массу информации бессознательно — это работа графических дизайнеров, которая часто остаётся незамеченной.
Дизайн презентаций и инфографика
Перейдём к продуктам визуальной коммуникации, с которыми мы взаимодействуем осознанно. Таблицы, схемы, инфографика и презентации нужны, чтобы структурировать большой объём информации. Слушая выступление интересного спикера или читая инструкцию к стиральной машине, мы концентрируемся. Поэтому дизайн этих материалов может быть более детализированным, чем уличный знак.
Задача дизайнера при разработке инфографики или презентации — сделать язык картинок простым и понятным. Хорошие иллюстрации бывают эффективнее длинных текстов и понятны носителям любых языков.
Вёрстка книг, журналов и веб-страниц
Дизайн бывает и без картинок. Читая хорошую бумажную книгу, вы можете даже не догадываться, сколько часов дизайнер провёл за вёрсткой. Правильно подобранные шрифты, межстрочные интервалы, поля и переносы слов позволяют глазам меньше уставать.
Если вы думаете, что значение типографики преувеличено, полистайте дешёвые книги из девяностых годов: тогда процветала некачественная печать, строки на двух страницах одного листа не совпадали и просвечивали через тонкую бумагу. Читая такую книгу, вы быстро устанете.
В «цифре» есть свои нюансы: дизайнер заботится, чтобы вам не приходилось бегать глазами по большому экрану, чтобы абзацы отличались от межстрочных интервалов, а переход на новую строку не осложнял чтение.
Инструмент маркетинга
При упоминании Apple перед глазами всплывает надкушенное яблоко, а вспоминая Сбербанк, мы представляем себе зелёный логотип. Графический дизайн служит для узнаваемости брендов и их продвижения на рынке.
Фирменный стиль
У каждой серьёзной компании есть логотип. Однако понятие фирменного стиля гораздо шире: это набор цветов, шрифтов, паттернов и правил их сочетания между собой. Целый комплекс графических элементов позволяет поддерживать образ бренда.
Хороший фирменный стиль разрабатывается как минимум на пять лет, если компания планирует долго жить. Поэтому такая графика в меньшей степени подвержена влиянию трендов, чем реклама или веб-дизайн.
Дизайн фирменного стиля обычно представляют в формате брендбука. Это краткое руководство, в котором показаны допустимые и недопустимые варианты использования логотипа, гармоничные сочетания цветов, шрифтовые пары и другие рекомендации. Также в брендбуках представляют дизайн основных носителей — он может иметь специфические особенности в зависимости от необходимой формы или размера.
Что дают логотип и фирменный стиль? Во-первых, они создают позитивный образ бренда в головах потребителей, сотрудников и партнёров. Во-вторых, они позволяют привести к единообразию все брендированные продукты и упростить текущие дизайнерские задачи.
Наружная реклама и полиграфия
Разработка рекламы — это более креативная область графического дизайна. Рекламные кампании меняются быстро, так что строгая лаконичность и планирование на годы вперёд здесь не требуются.
Цель рекламы — продать конкретный товар определённому сегменту целевой аудитории в заданные сроки. И первая задача на пути к этой цели — привлечь внимание зрителя, удивить его чем-то ярким и необычным, заставить задержать взгляд.
Дизайн рекламы — это маркер нашего времени, потому что он очень быстро меняется в зависимости от моды. Если вы посмотрите на фотографии двадцатилетней давности, архитектура или даже одежда людей могут выглядеть вполне современно, а плакаты и баннеры будут старомодными.
В рекламе используют модные графические приёмы и декоративные шрифты, чтобы выделить сообщение на фоне других. Но за счёт эксплуатации трендов реклама недолговечна, и каждый раз дизайнерам приходится искать новые способы удивить публику.
Продвижение в интернете
Среднестатистический городской житель не расстаётся с гаджетами. Если лет двадцать назад почти любой графический дизайн готовили под печать в типографии, сейчас это далеко не так. Рекламные баннеры на сайтах, оформление сообществ в соцсетях, лендинги и продающие сайты пользуются огромным спросом.
Не нужно быть гуру в технологиях, чтобы создавать красивые посты или рекламу для интернета. А вот при разработке целого сайта (этим занимаются веб-дизайнеры) пригодятся даже знания в программировании.
С одной стороны, интернет упростил работу дизайнерам: не нужно заниматься предпечатной подготовкой. С другой стороны, на первый план выходят другие важные критерии — например, размер файла и лёгкая читаемость картинки с любого экрана. Также интернет открыл для рекламы возможности анимации: моушн-графику активно используют и в соцсетях, и на сайтах.
Элемент цифровых и печатных продуктов
Графический дизайн помогает доносить до людей информацию и продвигать продукты. Но иногда он может являться непосредственно частью продукта. Посмотрите, что изображено на ваших обоях, любимой футболке или чехле смартфона. Технологии печати позволяют работать с любыми материалами, поэтому печатные принты заменили нам вышивку и роспись.
Теперь вспомните заставку с титрами к вашему любимому сериалу или меню приложения на телефоне, которым вы ежедневно пользуетесь. К этим продуктам графические дизайнеры тоже приложили руку.
Чем сложнее задача, тем больше компетенций требуется для работы. В широком смысле к графическому дизайну можно отнести и иллюстрацию, и 3D-моделирование, и анимацию, и веб-разработку. Все эти сферы связаны с созданием графики.
Многие дизайнеры обладают компетенциями в смежных областях, но объять всё невозможно. В узком смысле под графическим дизайном принято понимать создание статичной графики для печати или размещения в сети. Некоторые сужают свою специализацию ещё больше и занимаются тем, чем душе угодно, — например, исключительно логотипами или вёрсткой.
Хотите овладеть навыками для создания фирменного стиля, рекламных креативов и визуальных коммуникаций? Записывайтесь на наш курс по графическому дизайну.
Истории успешных графических дизайнеров и их советы, как стать
арт-директором студии за полгода и найти свой уникальный стиль, — в этом материале.
Графика в Web-дизайне
Параметры картинок на сайте могут не соответствовать заявленным в статье.
способы представления изображений;
форматы графических файлов;
сжатие с потерей данных;
требования к графике в Web;
оптимизация JPEG и GIF;
вставка изображений в HTML;
некоторые удобные приемы работы с графикой;
. а также — курьезная история одной фотографии из журнала Playboy.
В прошлом номере мы говорили о самых общих подходах к дизайну как таковому и к Web-дизайну в частности. Теперь пора понемногу переходить к деталям, разбирая их в теории и на практике. Начнем, пожалуй, с графики. Разумеется, это достаточно обширная тема, поэтому в будущем мы наверняка еще вернемся к ней, чтобы окинуть пристальным взглядом тот или иной ее аспект. А пока начнем, как водится, с начала.
Два слова о двух измерениях
Традиционно двумерная графика делится на растровую и векторную. Предполагая, что большинству читателей известно это разделение, я скажу о нем совсем вкратце. Растровая картинка представляет изображение в виде прямоугольной матрицы-сетки, каждая ячейка которой окрашена в определенный цвет (а иногда обладает еще некоторыми свойствами, к примеру, прозрачностью). Векторное же изображение строится геометрически, на основе графических примитивов (линий, кругов, прямоугольников и так далее).
Это важно: внешне отличить растровый рисунок от векторного можно только масштабированием. Векторный рисунок при приближении останется «гладким», а растровый — неизбежно распадется на «кирпичи», то есть на увеличенные во много раз одиночные пиксели. Собственно, в этом и состоит одно из главных достоинств векторных изображений.
В настоящей статье мы будем говорить только о растровой графике. Не потому, что она популярнее (тот же Flash, к примеру — яркий пример популярного векторного формата для Web, да еще и с поддержкой анимации), а потому, что векторное представление само по себе — один из способов оптимизации картинки, а дальнейшая его оптимизация очень специфична и нуждается в отдельном рассмотрении.
Представление растровых изображений
Любой формат растровой картинки тем или иным способом хранит информацию о цвете каждой точки изображения, а также некоторые другие ее свойства — линейные размеры, глубину цвета, цветовую схему, палитру и т.п.
С размерами вроде как все ясно. Столько-то точек по горизонтали, столько-то по вертикали. А вот с глубиной цвета не все так просто. Формально — это число бит, приходящееся на каждую точку изображения в неупакованном виде. Но для того, чтобы вышеупомянутые биты превратились в точку, необходимо знать, в какой цветовой схеме они заданы.
Цветовая схема — это как раз и есть тот способ, по которому информация о пикселе превращается в сам пиксель. Иначе говоря, для того, чтобы отобразить некий цвет, программе недостаточно знать, что он закодирован последовательностью 5F72A0 — ей нужна информация, каким именно образом он в ней «зашит».
Существующие цветовые схемы можно условно разбить на две группы:
C прямой передачей цвета. Для каждой точки хранится прямое описание ее цвета. К таким схемам можно отнести Black&White, Grayscale, RGB, CMYK и еще серию подобных. У черно-белой картинки один бит соответствует одной точке: 0 — черный, 1 — белый. Grayscale (оттенки серого) выделяет на точку байт, принимая 0 за черный цвет, 255 — за белый, с плавным переходом яркости между ними.
Отдельного внимания заслуживают схемы RGB и CMY. Обе они созданы для передачи цветных изображений во всей видимой области спектра, но делают это по-разному. Схема RGB (Red, Green, Blue) работает подобно тому, как строится картинка на экране телевизора или ЭЛТ-монитора: варьированием яркости свечения близко расположенных ячеек люминофора. Одни ячейки при попадании в них электрона вспыхивают синим, другие — зеленым, третьи — красным, но с расстояния мы видим суммарный цвет — желтый, фиолетовый, белый — в зависимости от пропорции. Здесь важен тот факт, что экран выключенного телевизора — черный: именно на черном фоне работает такой способ смешения цветов. Обычно в схеме RGB на каждый цветовой канал выделяется один байт: получается по 256 градаций каждого исходного цвета.
Схема CMY использует другой набор базовых цветов: бирюзовый (Cyan), малиновый (Magenta) и желтый (Yellow). Они смешиваются по другому принципу: изначальный цвет — белый, а итоговый определяется концентрацией каждой краски: чем ее больше, тем темнее. Другими словами, схема RGB описывает смешение лучей света на черном экране монитора, а CMY — смешение красок на белом листе бумаги. Универсальность у схемы CMY появляется, когда в ее состав вносят четвертый канал — так называемый ключевой. Называется она CMYK, где буквой K и обозначен этот самый четвертый канал, обычно — черный. Существует расхожее заблуждение, что буква K взята из слова Black, чтобы не было путаницы между Black и Blue. На самом же деле ноги у буквы растут из словосочетания «Key Color», и черным он быть вовсе не обязан.
С палитрой. В случае передачи цвета с помощью палитры информация о точке представляет собой не сам цвет, а его порядковый номер. Все цвета один раз описаны в начале графического файла, обычно — по схеме RGB, а дальше следуют только ссылки на них: «Сюда поставим цвет номер пять, а сюда — номер восемнадцать». Единственная цель палитры — экономия объема, занимаемого картинкой. Если у нас, допустим, на изображении всего четыре цвета, то для хранения информации о точке достаточно двух бит, плюс еще двенадцать байт для описания самих цветов, если мы говорим об RGB.
На заметку: если требуется особая палитра, то она записывается в сам файл с картинкой. Иногда используется и стандартная палитра — одна из предопределенных. Тогда даже эта информация не лежит в каждом файле, а существует только на стороне клиента.
Форматы файлов
Различные способы представления растровой графики реализованы в виде разных форматов файлов. Наиболее классический и, соответственно, наименее используемый — Bitmap, или же BMP. Там все просто. Сначала заголовок, в котором кратко перечислены общие параметры картинки, а потом пикселы: ровно по три байта на штуку. Несложно сосчитать, что изображение 320Ч240 будет занимать примерно 225 КБ: для этого достаточно умножить число точек на 3.
BMP применяется крайне редко именно ввиду огромных объемов неупакованных данных и лучше всего подходит разве что для хранения оригиналов ценных изображений для их дальнейшего преобразования.
В Сети наибольшей популярностью пользуются два формата — GIF и JPEG. На протяжении какого-то времени большие перспективы пророчили формату PNG, потом пророчить перестали, а формат так и не прижился. Видимо, потому, что в попытке совместить плюсы первых двух он успешно совместил все минусы, и в одних областях его «обставляет» JPEG, а в других — GIF. Давайте остановимся на них подробнее.
Graphics Interchange Format (GIF). Дословно — «формат обмена графическими данными», но это ни о чем не говорит. Важнее, пожалуй, будет упомянуть, что он по сей день остается лидирующим графическим форматом в Сети, особенно в том, что касается элементов оформления сайтов. Достоинств у GIF великое множество: незначительные размеры, достаточно точная передача изображения, сжатие данных без потерь. Кроме того, он поддерживает простенькую анимацию и прозрачность (правда, только в виде одного цвета, который или полностью прозрачен, или нет). Другими словами, GIF прост, незатейлив и чрезвычайно удобен для подавляющего большинства задач. Единственное ограничение — 256 цветов. Но, учитывая, что формат поддерживает пользовательскую палитру, эти цвета могут быть произвольными: ограничение налагается только на общее число уникальных цветов в пределах картинки.
Joint Photographic Experts Group (JPEG). Назначение этого формата напрямую следует из названия: JPEG «заточен» под упаковку фотографий и схожих с ними картинок. Иначе говоря, таких изображений, где почти гарантированно не хватает 256 цветов, но каждый отдельный пиксель не играет существенной роли. Главная отличительная черта JPEG — резкое сокращение объема файла за счет незначительных потерь в самой картинке.
Это важно: никогда не задавайтесь вопросом: что лучше — JPEG или GIF? Они не подлежат сравнению, потому как созданы для абсолютно разных задач. Считайте, что каждый из них — лидер в своей области, причем эти области почти не пересекаются.
За счет чего же возникает такая разница между форматами? В первую очередь, за счет способа упаковки графических данных.
| История одной Лены | |||
Практически каждому, кто интересовался вопросом сжатия графики, наверняка попадалось на глаза фото симпатичной девушки в немного старомодной шляпке с пером. Действительно, уже третий десяток лет именно эта фотография традиционно используется для испытания новых алгоритмов компрессии цветных изображений, для их сравнительного анализа и других технических нужд подобного плана. Это своего рода Lorem Ipsum мира двумерной компьютерной графики. Без нее не обходится каждая вторая (если не каждая первая) книга, где хоть зачем-то нужно привести в пример какую-нибудь картинку. Так что же это за девушка и откуда взялась? Зовут ее Лена, а если точнее — Lena Soderberg. Пусть вас не вводит в заблуждение имя: у нее, насколько мне известно, нет русских корней. Родилась она в Швеции и жива по сей день, давно замужем, вырастила троих детей. А вот о том, какая судьба постигла ее давно забытое фото для журнала Playboy, она узнала достаточно недавно и была очень удивлена. Началась история еще в 1973 году с банального происшествия. Паре западных инженеров из НИИ обработки сигналов и изображений (USC Signal and Image Processing Institute) срочно понадобилась яркая картинка, чтобы засунуть ее в сканер. Несколько замусоленных тестовых фотографий, которые удалось откопать по ящикам, ученых не устроили, и тогда кому-то пришла в голову идея взять свеженький номер Playboy. Учитывая, что инженерам нужна была картинка 512 на 512 пикселей, они отсняли не всю фигуру, а только портрет, предусмотрительно оставив за кадром наиболее содержательные детали. Чуть позднее эту картинку у них кто-то позаимствовал, и она ушла в массы, регулярно играя роль «просто хорошей фотки» для любых тестов. А затем разразилось сразу два громких скандала, продлившихся несколько лет. С одной стороны звучали требования немедленно прекратить использование фотографии с настолько недвусмысленным эротическим прошлым. С другой — журнал Playboy всерьез заинтересовался незаконным тиражированием его материалов, начав сразу несколько судебных тяжб. Буря бушевала долго, но потом как-то сама собой улеглась. Даже журнал в итоге махнул рукой и прекратил преследование нарушителей. Судя по всему, впереди у знаменитой картинки еще немало перевоплощений. И, если встретите ее где-то, не забудьте. Ее зовут Лена, Lena Soderberg. Порноактриса ушедших лет. Сжатие изображенийСамо слово «сжатие» подразумевает некое обратимое преобразование исходных данных, в результате которого они начинают занимать меньший объем. Важно помнить, что далеко не все данные в принципе могут быть сжаты, ведь в противном случае мы бы могли, сжимая их несчетное множество раз, упаковать произвольную информацию в один бит, а впоследствии распаковать этот бит до изначального вида. А это, естественно, не так. Для успешного сжатия информации в исходных данных должны прослеживаться закономерности и повторяющиеся элементы, за счет которых и достигается уплотнение при упаковке (выражаясь академически — в ней должна наблюдаться автокорреляция). Способов упаковки — великое множество. Поэтому, вместо того чтобы перечислять их, я приведу простенькую классификацию, сопровождая ее примерами, затрагивающими тему статьи. Для начала, компрессия бывает физическая и логическая. Логическая подразумевает понимание того, какие именно данные подвергаются сжатию, и смысловую замену одних информационных блоков на другие, более короткие. Типичный пример — вместо строки «Лучшие компьютерные игры» мы пишем аббревиатуру «ЛКИ». Смысл при этом не теряется, а длина строки сокращается во много раз. Применительно к графике логическая компрессия наблюдается во всех векторных форматах. Вместо того, чтобы описывать каждую точку линии, мы, имея в виду, что это именно линия, задаем координаты ее начала и конца, толщину и цвет. В итоге имеем ту же линию, заданную всего парой чисел, вместо огромного массива бессвязных точек, описанных по отдельности. Вот что представляет собой логическое сжатие. С физическим еще проще — это любые другие его виды. Еще сжатие бывает универсальное и специализированное. В первом случае программа-архиватор не имеет ни малейшего понятия, какого рода данные ей предстоит упаковывать, и относится к ним просто как к набору произвольных байт. По таким алгоритмам работают любые архиваторы широкого профиля: RAR, ZIP, ARJ и т.п. Специализированные алгоритмы сжатия, наоборот, созданы для упаковки данных определенного типа. Разумеется, это точно такие же байты, как и любые другие, — ну нету в природе «графических» или «музыкальных» байтов. Тем не менее знание специфики позволяет предугадать и учесть многие закономерности, ею вызванные. В графических файлах, например, соседние пиксели очень часто близки по цвету. Следовательно, если хранить только разницу между ними, в большинстве случаев можно значительно сэкономить объем. Этой, а также еще сотней других особенностей и пользуются алгоритмы упаковки графики. Естественно, специализированные компрессоры гораздо лучше справляются с упаковкой привычных им данных — в этом очень легко убедиться. Возьмем средних размеров фотографию и сохраним ее в BMP. А потом попробуем упаковать разными способами — с помощью универсальных архиваторов, а также средствами упаковки GIF 256 цветов и JPEG с минимальными потерями, и посмотрим на коэффициенты сжатия.
Результат достаточно очевиден. RAR закономерно работает лучше ZIP, но ни один из универсальных архиваторов не дотягивает по эффективности до графических форматов сжатия. Наконец, сжатие еще бывает с потерями и без потерь. Тут бытует еще одно популярное заблуждение, что сжатие с потерями синонимично некачественному, плохому сжатию в отличие от хорошего — которое, естественно, обходится без потери данных. Это утверждение в корне неверно. Потери при компрессии — явление полезное и преднамеренное. Зная специфику восприятия изображений человеческим глазом, программа-упаковщик сознательно «выбрасывает» несущественные, неразличимые глазом детали, за счет чего объем файла сокращается во много раз, а на вид картинка остается прежней. Именно по этому принципу работает алгоритм упаковки JPEG — варьируя степень потерь в каждом конкретном случае, пользователь может найти компромисс между качеством и объемом. Считается, что, в отличие от JPEG, формат GIF предлагает сжатие без потерь. Это не совсем так. Во-первых, для сохранения картинки в формате GIF ее необходимо преобразовать в 256-цветную, и, если изначальный материал был полноцветным (допустим, RGB 24bit), мы потеряем часть оттенков именно при этом преобразовании — они будут заменены на самые близкие. Кроме того, чтобы еще уменьшить размер файла, количество цветов можно сократить хоть до двух, и, если в исходном изображении их было больше, часть информации неизбежно потеряется. Утверждение об отсутствии потерь справедливо только в том случае, если при сохранении в GIF мы не урезаем изначальную палитру. Графика в СетиКак и в любой другой области применения графики, в интернете тоже своя специфика. Заключается она в том, что подавляющее большинство электронных изображений так и остаются электронными до конца своих дней: им не светит очутиться на постере или плакате. Графика, составляющая наполнение (и уж тем более — оформление) сайтов, обычно создана только для просмотра на экране и не подразумевает даже печати на принтере. В принципе, это обстоятельство значительно упрощает жизнь дизайнера: рисуя картинку, он видит ее ровно такой, какой ее увидит и конечный пользователь, а не пытается вообразить ее внешний вид после многочисленных полиграфических манипуляций. На первое место выходит другой показатель — размер файла. Искусство дизайна для Web, собственно, и состоит в том, чтобы уместить в крохотный объем изображение приемлемого качества. О том, как это делается, мы сейчас и поговорим. Выбор форматаИтак, перед нами картинка, которую нужно подготовить для показа в Web. Начинаем мы с того, что выбираем подходящий формат. На первый взгляд это достаточно просто: если речь о фотографии — сохраняем в JPEG, если элемент интерфейса, небольшая «иконка» или логотип — в GIF, и вопрос решен. В большинстве случаев это так и есть, но при этом стоит помнить: важен результат, а не «правильный» подход. Если вы видите, что при одинаковом объеме картинка, которой по всем правилам надлежало бы быть JPEG-ом, гораздо лучше смотрится в GIF-е, — плюньте на правила и делайте так, как лучше. Пример отнюдь не вымышленный: ввиду особенностей компрессии в JPEG ужасно смотрится практически любой мелкий повторяющийся рисунок. Если на фотографии у вас окажется пиджак в мелкую клеточку, даже при не очень значительном уровне потерь он может превратиться в цветную кашу весьма неаппетитного вида. Обычно в формате JPG имеет смысл сохранять: синтезированные изображения (к примеру, работы в 3DS Max); полноэкранные скриншоты из игр. А вот для чего чаще подходит GIF: элементы оформления сайта — рамки, кнопки, уголки; |
