Хотя они не являются абсолютно необходимыми для функциональности веб-сайта, изображения помогают улучшить внешний вид сайта. Благодаря нескольким качественным высоко оптимизированным изображениям вы можете придать своему сайту преимущество, необходимое для создания неизгладимого впечатления. Проблема в том, что многие веб-мастера, как начинающие, так и опытные, не чувствуют уверенности в том, что касается создания чисто выглядящей графики и ее оптимизации для Интернета.
В настоящее время в Интернете GIF, PNG и JPEG являются наиболее распространенными и широко поддерживаемыми форматами графических файлов. Но что вы должны использовать? Ну, на этот вопрос невозможно ответить без нескольких дополнительных соображений. В этой статье мы рассмотрим некоторые важные различия между изображениями GIF, PNG и JPEG, а также обсудим, как добиться наилучшего качества всей веб-графики.
Борьба между GIF и PNG
Форматы GIF и PNG идеально подходят для сжатия графики, содержащей плоские области простого цвета, а также текста.
Верный GIF
В течение многих лет единственными данными, которые входили и выходили из наших модемов, был текст: текст ASCII. Одна из главных задач модема — отправлять и получать буквы, цифры и 66 других символов.
Это не особенно удивительно, если учесть, что компьютерная графика была редкостью, а модемы были такими медленными, что для передачи одного предложения потребовалось от 3 до 4 секунд.
Формат файла GIF, созданный Compuserve в 1987 году, был разработан таким образом, чтобы разместить как можно больше информации об изображении в минимальном пространстве. Он использует алгоритм сжатия без потерь (LZW), который сегодня не редкость.
Цвета в файле GIF индексируются в палитре. Первоначально компьютерная графика отображала только определенное количество цветов одновременно из-за памяти и скорости. Эти цвета были названы палитрой. Изначально графические адаптеры были двухцветными (черно-белыми). Графические режимы CGA могут достигать максимум 4 цветов, EGA дает нам впечатляющие 16, а VGA — потрясающие 256 цветов одновременно. Цвета, отображаемые графической картой, были определены не по их фактическому цвету, а по номеру индекса, который относится к одному из цветов в палитре. Это сэкономило много места на дисплее и позволило использовать выбор цветов.
Инновационный PNG
Формат изображения PNG был разработан как преемник формата GIF. Оригинальная аббревиатура происходит от слов «PNG’s Not GIF», хотя этот формат сейчас наиболее известен как формат Portable Network Graphics.
Формат PNG был разработан в 1995 году в ответ на две основные проблемы с форматом GIF. Первая и наиболее насущная проблема заключалась в том, что в 1995 году Unisys и Compuserve объявили, что на программное обеспечение, реализующее формат изображений GIF, будут распространяться лицензионные платежи, основанные на патенте Unisys на алгоритм сжатия LZW, используемый в формате GIF. GIF технически не является бесплатным. Вторая проблема с форматом GIF заключалась в том, что его набор функций был ограничен, а потребность в изображениях с такими функциями, как 24-битный цвет или 8-битные альфа-каналы, увеличивалась.
PNG поддерживает более эффективный алгоритм сжатия, чем GIF, не имеет патентов, способен хранить больше форматов изображений и включает в себя некоторые отличные функции проверки ошибок. При сохранении идентичных изображений GIF и PNG полученный файл PNG будет на 5-20% меньше, чем файл GIF.
С точки зрения графического художника, формат PNG практически идентичен существующему формату GIF, но он обеспечивает лучшую степень сжатия и поддерживает новые форматы, которые GIF не поддерживал. Теперь я использую PNG в каждой ситуации, в которой я использовал GIF в прошлом.
Поскольку методы работы с изображениями GIF и PNG очень похожи, я буду обсуждать их в этой статье, как если бы они были одним форматом. Методы создания изображений GIF и PNG в основном одинаковы.
Космическая эра JPEG
JPEG идеально подходит для графики, полученной из фотографий, поскольку он очень эффективен при сжатии естественных изображений.
JPEG использует более сложный алгоритм сжатия изображений, чем GIF и PNG, и требует большего понимания графическими дизайнерами. JPEG является относительно новым, по сравнению со сжатием без потерь, таким как GIF. Алгоритм, используемый для сжатия JPEG, просто занял бы слишком много времени для сжатия или распаковки на самых ранних компьютерах.
JPEG на самом деле использует алгоритм с потерями. Вместо того, чтобы записывать изображение, подобное компьютеру, оно записывает изображение, более похожее на то, которое описал бы человек. Он ищет области, узоры и цвета, а не просто описывает каждый пиксель отдельно.
Фактический алгоритм сжатия основан на дискретном косинусном преобразовании (DCT). Это математическое преобразование аналогично алгоритмам, используемым в настоящее время для звука движущихся изображений, DVD-видео и обычного звука MP3.
Что хорошего в GIF или PNG?
Сильные стороны: скорость, резкость, чистый цвет и прозрачность.
Поскольку алгоритм сжатия, используемый изображениями GIF и PNG, намного проще, чем алгоритм, используемый для JPEG, вашему компьютеру требуется меньше времени для его распаковки и просмотра. С быстродействием современных настольных компьютеров, это больше не проблема, которая когда-то была.
Поскольку сжатие в формате GIF или PNG без потерь, после его сохранения не будет никакого дальнейшего ухудшения качества или резкости изображения. Изображение можно распаковать, отредактировать и повторно сжать, и оно будет таким же четким, как и в день его создания.
Изображения в формате GIF и PNG процветают в сплошных смежных цветах. Это идеально подходит для вашего корпоративного логотипа или сплошных областей и линий в навигации вашего сайта. Сплошные цвета не будут вызывать звона, коробок или размытия.
GIF и PNG оба способны двоичной прозрачности. Бинарная прозрачность позволяет каждому пикселю на изображении быть либо полностью непрозрачным, либо полностью прозрачным. Одна запись палитры изображения зарезервирована для прозрачных областей. Вместо того, чтобы показывать определенный цвет, все экземпляры этого индекса палитры кажутся невидимыми, показывая то, что изображение показано перед. Это может быть удобно, когда изображение повторно используется перед различными фонами на вашем сайте. Изображение может позволить фону «просвечивать».
PNG расширяет функциональность GIF. В то время как изображения GIF ограничены цветовой палитрой максимум из 256 цветов, PNG поддерживает изображения с истинным цветом. PNG также поддерживает другую форму прозрачности, называемую альфа-прозрачностью, в которой каждый пиксель может иметь цвет и определенную степень прозрачности, позволяя фону просвечивать частично в областях. Однако у этих дополнительных функций PNG есть некоторые недостатки, которые будут обсуждаться ниже.
Хотя в прошлом поддержка изображений PNG в браузерах была низкой, базовые изображения PNG теперь можно безопасно использовать во всех современных браузерах, включая Microsoft Internet Explorer (4.0b1 и более поздние версии, Mac и ПК), Mozilla, Netscape (6.0 или более поздние версии). , Химера (2.0 или более поздняя версия) и Сафари. Netscape 4.04 поддерживает PNG, но без прозрачности.
Слабые стороны
Практически все недостатки формата файла GIF или PNG можно объяснить одним из двух факторов: размером и палитрой.
Размер является очевидным недостатком. Форматы GIF и PNG плохо сжимают сложные естественные изображения. Если изображение не было специально оптимизировано для этого формата, очень большое изображение может занимать в 2–10 раз больше пространства JPEG той же области. Вот почему GIF и PNG обычно ограничиваются небольшими изображениями в Интернете, в дополнение к изображениям, которые особенно подходят для этого формата.
Использование палитр в веб-изображении может принести огромную пользу. Однако, если они не используются должным образом, они могут стать кошмаром. Если изображение в формате GIF или PNG содержит плавный градиент или плавный край, графический дизайнер должен разделить эту область на конечное число различных цветов, чтобы соответствовать ограничениям 256-цветовой палитры. В худшем случае это может вызвать чрезмерные артефакты, такие как размывание или полосатость.
Неправильное использование формата GIF или PNG. Это изображение было уменьшено до 16 цветов (без сглаживания), чтобы показать артефакты полос. Эти артефакты возникают, когда слишком сложное изображение сохраняется в виде GIF или PNG с палитрой. Исходное изображение имеет мягкие градиенты, поэтому JPEG был бы гораздо более подходящим здесь.
Можно обойти ограничение палитры, используя функции, доступные в формате PNG, которые GIF не поддерживает. Однако при создании изображений для Интернета еще не практично использовать одну из этих двух новых функций PNG по нескольким причинам. Во-первых, поддержка PNG в браузере Microsoft Internet Explorer глючит и пока не способна показывать альфа-прозрачность, как предполагалось. В дополнение к этому, использование формата изображения с истинным цветом или альфа-прозрачности в изображении потребляет значительно большую полосу пропускания, что делает его непрактичным для использования через Интернет. На данный момент PNG можно безопасно использовать с палитрами изображений, как в GIF.
JPEG с первого взгляда
Сильные стороны: Размер файла, диапазон цветов.
JPEG — очень хороший формат для сжатия естественных изображений в очень маленький размер. Уровень качества JPEG может быть выбран пользователем при создании JPEG, что позволяет достичь компромисса между размером файла и качеством изображения.
Поскольку JPEG использует естественные цвета, а не палитру, он очень подходит для изображений, которые содержат плавные или естественные цветовые градиенты, текстуры и узоры, такие как те, которые встречаются в реальной жизни. JPEG превосходен, когда используется для фотографий, где области цвета являются гладкими и естественными, и смешиваются друг с другом.
Недостатки: артефакты сжатия, скорость и отсутствие прозрачности.
Сжатие JPEG не идеально. На самом деле с некоторыми типами изображений это далеко не идеально. В качестве алгоритма сжатия с потерями существуют некоторые «артефакты» сжатия — небольшие ошибки в распакованном изображении. Если сжатие JPEG используется правильно и при правильных обстоятельствах, эти артефакты вообще не заметны.
Неправильное использование формата JPEG. Это было увеличено в 3 раза, чтобы преувеличить эффект артефактов JPEG. Вокруг текста виден шум комаров, а внутри синего квадрата виден шум блока JPEG. Из-за плоских областей цвета это изображение должно было быть сжато, используя GIF или PNG.
JPEG использует более сложный алгоритм сжатия, и, естественно, для его вычисления требуется немного больше времени. Обычно это больше не проблема. Еще одним небольшим недостатком JPEG является то, что он не может включать прозрачные области.
PNG Совершенство
При правильном использовании изображение в формате GIF или PNG всегда будет выполнять то, что вам нужно. Во-первых, вы должны убедиться, что изображение, которое вы используете, подходит для формата.
Как определить, подходит ли изображение для формата GIF или PNG?
При сохранении изображения для Интернета лучше использовать изображение с палитрой, чем изображение с истинным цветом. Это связано с тем, что каждый пиксель в палитровом изображении использует не более трети полосы пропускания пикселя в изображении с истинным цветом.
Эта палитра имеет максимум 256 цветов. Поэтому хорошее правило — смотреть на изображение и пытаться решить, будет ли оно уменьшено до 256 цветов или менее благоприятным образом. Когда вы принимаете это решение, помните, что любые плавные градиенты по цвету или сглаженные края при затенении должны быть разделены на цветные полосы, и каждая из этих полос будет иметь одну запись палитры. Приложив немного практики, становится легко определить, будет ли изображение выглядеть хорошо в формате GIF или PNG.
Если изображение естественное, как фотография, оно будет иметь большое количество произвольных цветов. В этом случае он вряд ли будет хорошо выглядеть в формате GIF или PNG, если только он не очень маленький.
Попробуйте и посмотрите
Помните, независимо от того, выводите ли вы изображение в формате GIF, PNG или JPEG, вам необходимо сохранить копию несжатого изображения. Экспорт изображения в формат GIF, PNG или JPEG должен выполняться только в качестве самого последнего шага перед публикацией изображения, поскольку дальнейшее редактирование после этого момента может заметно ухудшить качество изображения.
Сохранение копии несжатого изображения позволит вам повторно сжать изображение в другом формате или с другим количеством цветов.
Уменьшение количества цветов
При сохранении изображения в формате палитры графическое приложение потребует уменьшения количества цветов. Большинство приложений могут сохранять конечный GIF или PNG с выбором 256, 16 или 2 цветов. Функция Adobe Photoshop «Сохранить для Web» идеально подходит для этой цели, поскольку дает вам большой контроль над готовым файлом. Фотошоп называет PNG с палитрой «PNG-8», а PNG с истинным цветом — «PNG-24». Выберите сжатие PNG-8 или GIF.
Есть два способа уменьшить цвета в изображении. Одним из них является метод «ближайшего цвета» или «без сглаживания», в котором каждая часть изображения сопоставляется с ближайшим цветом в уменьшенной цветовой палитре. Другой метод называется «дизеринг» или «диффузия ошибок».
Может быть очень заманчиво использовать дизеринг или диффузию ошибок. Распространение ошибок имеет тенденцию выглядеть довольно хорошо в некоторых обстоятельствах. Однако, точка распространения ошибок заключается в том, чтобы скрыть недостатки в малой палитре путем «моделирования» градиентов со случайным (или шаблонным) шумом.
Когда вы оптимизируете GIF или PNG для веб-отображения, обычно следует выбирать метод «ближайший цвет». Это создает файл меньшего размера и более чистый файл. Если изображение выглядит слишком полосатым с помощью этого метода, вам следует рассмотреть возможность увеличения размера палитры или использования сжатия JPEG, прежде чем пытаться распространять ошибки.
Правильное использование формата GIF или PNG. Некоторые детали этого изображения были утеряны, когда мы сократили количество цветов до 16. Вероятно, было бы лучше сохранить этот файл с более чем 16 и менее чем 256 цветами.
Дизайн сверху вниз для изображений в формате GIF или PNG
Если вы создаете изображение, которое позже намереваетесь использовать в файле GIF или PNG, часто рекомендуется предпринять шаги для оптимизации изображения на этапе его создания, прежде чем вы закончите создание изображения. Например, когда вы создаете изображение, лучше избегать слишком большого количества текстур или градиентов. Можно использовать тени, но для достижения наилучших результатов старайтесь не смягчать края тени более чем на два или три пикселя. Старайтесь проектировать, используя геометрические, сплошные области, а не мягкие края и сложные детали.
Потрясающий JPEG
Для больших и более естественных изображений JPEG — отличный формат. Это гибкий инструмент, который требует гораздо меньше работы или внимания, чем изображение в формате GIF. Короче говоря, это просто в использовании.
Все, что вам нужно сделать, чтобы сохранить JPEG, это нажать «Сохранить» и выбрать «JPEG».
Какой уровень детализации?
Большинство приложений позволит вам выбрать уровень сжатия для JPEG. Обычно это находится в том же диалоговом окне «Сохранить как». Опять же, функция «Сохранить для Интернета» в Photoshop хороша в этом. Выберите «JPEG» в качестве метода сжатия. Вы можете изменить уровень сжатия, используя предустановку или ползунок «Качество».
Поскольку JPEG — это формат сжатия с потерями, он уменьшит некоторые детали изображения. Хитрость для получения наилучшего JPEG в Интернете — это лучший компромисс между качеством визуального изображения и размером файла. Чем выше уровень сжатия, тем ниже качество и меньше размер файла. Уровень сжатия от 10 до 16 обычно хорошо работает в Интернете. В Photoshop это соответствует уровню качества около 60 или 70.
Вы уверены, что используете правильный формат?
Одной из наиболее распространенных ошибок является использование JPEG для изображения, которое больше подходит для формата GIF. Часто изображения, такие как логотипы, текст, графики, заголовки или кнопки, создаются с использованием ограниченного количества сплошных, четких цветовых областей. Если ваша графика такая же базовая, как вы, и вы используете формат JPEG, артефакты сжатия могут стать видимыми в сплошных областях изображения, особенно в окружающих деталях и линиях. Это иногда называют «комариным шумом» или «звонком», и это определенно не то, что вы хотели бы видеть вокруг логотипа вашей компании!
Если вы подозреваете, что несоответствия формата JPEG будут отображаться в некоторых сплошных областях вашей графики, попробуйте сжать это изображение, используя GIF или PNG, и посмотрите, как оно сравнивается (как по размеру, так и по качеству).
Правильное использование формата JPEG. Это изображение выглядит приемлемым при просмотре в нормальном размере, хотя при увеличении можно заметить шум комаров и блокировку. В зависимости от вашей суетливости, вы можете немного улучшить качество этого JPEG.
Проверка вашего окончательного изображения
Чтобы полностью оценить ваше изображение, после того, как вы преобразовали его в GIF, PNG или JPEG, вам потребуется перезагрузить изображение в графическом приложении, чтобы убедиться, что вы просматриваете сжатый конечный продукт. Убедитесь, что компьютер, который вы используете, настроен на отображение цветов в 24 битах (истинный цвет), чтобы вы могли лучше видеть фактические особенности изображения.
Увеличить!
Используя инструмент масштабирования, найдите мелкие детали, которые можно исправить. В файле GIF или PNG ищите полосы. Если вы использовали распространение ошибок, осмотрите области изображения при большом увеличении, чтобы убедиться, что на больших сплошных участках нет шума. Шум должен появляться только в градиентных областях или областях с деталями. В файле JPEG ищите артефакты звонка в сплошных областях. Помните, что файл JPEG был оптимизирован, чтобы лучше всего выглядеть при 100% -ном увеличении, поэтому снижение качества обычно становится более очевидным при дальнейшем увеличении. Внимательное изучение изображения даст вам хорошее представление о том, следует ли увеличивать или уменьшать сжатие, но имейте в виду, что артефакты звона или комара не будут столь очевидными при просмотре со 100% -ным увеличением.
Попробуйте другие форматы
Я настоятельно рекомендую, чтобы после проверки вашего изображения в окончательном сжатом виде вы вернулись к несжатому изображению и посмотрели, можете ли вы попробовать другой формат, количество цветов или качество. Чтобы получить наилучшее качество и максимально оптимизированные изображения, я часто пытаюсь использовать несколько различных форматов, прежде чем меня устраивает.
Вывод
В этой статье мы обсудили некоторые основные концепции изображений GIF, PNG и JPEG. Об этих форматах можно узнать гораздо больше, например, о прозрачности в изображениях GIF и PNG, сопоставлении цветов с цветами фона или ячеек и использовании пользовательских палитр. В дополнение к этому, мы можем сделать несколько изящных вещей с PNG, которые мы не можем сделать с GIF.
Тем не менее, я надеюсь, что дал разумное введение в оптимизацию изображений GIF, PNG и JPEG для Интернета. Удачи!