Осторожно, много картинок! Все кликабельны.
PNG
Растровый графический формат PNG , набирающий всё большую популярность в эпоху веб 2.0, появился в далеком 1995 году как замена старому доброму GIF (и, частично, TIFF). К тому времени хозяева запатентованного GIF"а решили сбивать четырёхзначные суммы со всех разработчиков, использующих формат, и свободному сообществу ничего не осталось кроме как предложить бесплатную альтернативу.Так в чем же преимущества формата?
- Полноценная поддержка alpha-transparency - прозрачности. Позволяет сделать участки изображения прозрачными и полупрозрачными.
- Качественный алгоритм сжатия без потери качества. Похожий на LZW, но немного эффективнее.
- Возможность черезстрочной развёртки, причем (в отличии от GIF) как по вертикали, так и по горизонтали одновременно.
- Встроенная гамма-коррекция. Позволяет прикрепить к изображению настройки его отображения, для того чтобы на разных мониторах изображение отображалось точно так же, как и у автора.
Так как PNG-24 использует полную палитру цветов, сравнивать его с GIF довольно сложно. PNG-8 с его индексной палитрой здесь более схож. Приведу скриншоты для сравнения:
Практика (как и мнение коллег) показывает, что простые небольшие изображения GIF сжимает лучше. Но, когда речь заходит о больших изображениях, GIF всё же остаётся позади.
Кроме того, ещё одно немаленькое преимущество: на самом деле, вопреки распространённому мнению, PNG-8 тоже может использовать полноценный альфа-канал , как и PNG-24. Просто Photoshop его не поддерживает, поэтому Сергей Чикуенок из студии Лебедева рекомендует использовать Adobe Fireworks, чем я и решил заняться (Об этом немного ).
А в этой битве, если прозрачность нам не нужна, PNG проигрывает, так сказать, на «среднем сегменте рынка». Хотя, если прилинковать к JPEG"у ICC-профайл, разница в объёме становится незаметной. Мои замеры приводились на - JPEG 100%. А при меньшем качестве (с не особо заметной для глаза разницей) сравнение, к сожалению, становится ещё более печальным.
В общем, смотрите сами:
UPD А вообще, результаты значительно зависят от самого изображения: PNG лучше сжимает градиенты и однотонные участки, но для фотографий лучшее сжатие даёт JPEG. Хотя, говорят (самому с трудом верится), на больших фотографиях PNG и тут лидирует - проверено только что в процессе конвертирования скриншотов к статье (PNG против JPEG-70% - выигрыш раза в полтора).
Жизнь после Photoshop"а или сжимаем дальше
Во многих ситуациях PNG остаётся вообще незаменимым, так как прозрачность нормально не поддерживается ни одним из альтернативных веб-форматов, а какой простор он открывает дизайнерам и верстальщикам… UPD Кроме того, с учётом специфики формата, для элементов дизайна в вебе - это, наверное, лучшее решение.Гуглим и качаем - . Программка около 1.5 Мб с минимальным количеством настроек позволяет прогонять (в том числе пакетно) PNG-файлы со сжатием.
На пакете иконок (90 файлов с прозрачным фоном без особых наворотов) выигрыш в объёме составил в среднем около 10-15%. Не особо, конечно, впечатляет. Но для рассмотренных выше файлов-примеров процент сжатия колебался от 10% (большой постер без прозрачности) до 72% (полупрозрачные прямоугольники). Так что, попробовать стоит, тем более работа с утилитой много времени не занимает.
Кроме PNGOut, существует ещё много программ, детальным обзором которых сейчас заниматься не хочется:
- OptiPNG - не имеет графической оболочки и работает из командной строки. По непроверенным данным процент сжатия меньше. UPD но её пользователи утверждают обратное.
- Pngcrush - сам не пробовал, говорят «пытается оптимизировать файл всеми доступными способами», но главное ведь не «как пытается», а «как оптимизирует».
- и ещё ряд утилиток просто вычищающих служебный мусор из файлов.
Adobe Fireworks
Честно говоря, Adobe Fireworks стал для меня настоящим открытием: PNG-8, PNG-24 и PNG-32 + куча настроек!
PNG-24 и PNG-32 я подробно не рассматривал. Насколько я понял, в их терминологии 32 - с альфа-каналом, а 24 - без. По предварительным прикидкам Photoshop справляется с этй задачей лучше.
А вот PNG-8 разбил все мои (и большинства коллег) стереотипы. Итоговый файл гораздо меньше GIF"а и существует полноценная поддержка прозрачности двумя способами: alpha и index transparency. Единственным минусом по сравнению с PNG-24 остаётся индексная палитра, хотя всё зависит от потребностей. Моё личное мнение - PNG-8 в большинстве случаев уделывает и GIF, и PNG-24 .
PNG против GIF в AF, хотя как раз с привычными GIF-JPEG Fireworks работает по умолчанию не очень (с настройками я не игрался). Но даже в сравнении с Photoshop"овским результатом разница в пользу PNG:
И вот всё разнообразие PNG-8 - ради этого стоит устанавливать Adobe Fireworks:
Для сравнения: тот же файл стараниями Photoshop весил 3 188 байт против полученных теперь 450, то есть раз в 6 больше.
Вердикт
По-моему, GIF своё уже отжил. Теперь его существование - в первую очередь вопрос инертности общества. UPD Впрочем, сегмент разных анимационных приятностей Всё рано пока остаётся за GIF:).Для прозрачных элементов дизайна стоит использовать PNG-8 (реже PNG-24, когда палитры PNG-8 недостаточно для сохранения изображения без потерь).
Для фотографий и сложных графических элементов лидером по-прежнему остаётся JPEG из-за мощных возможностей оптимизации изображения. Хотя в некоторых случаях может оказаться достаточно и PNG-8 - как и раньше, с GIF"ом, смелые эксперименты - залог успеха. UPD Но для действительно больших изображений всё же JPEG проигрывает.
UPD Я действительно не специалист и обзор писался на коленке, о чём говорит эпитет «краткий»; возможно, не на лучших примерах. Поэтому спасибо всем, кто принял активное участие в обсуждении, особенно
Привет всем на блоге. В общем в данной статье хочу развеять миф про два данных расширения для картинок, это jpg и png лучший из них пока не найден. Все дело в том что и то и другое в зависимости от применения и от самой фактуры может повлиять на скорость сайта, и оптимизацию. Что маленько поставил вас в тупик? Тогда читаем дальше.
Два формата png и jpg в чем отличия.
Вроде картинка и что тут такого, но дело все в цветах. Формат jpg самый распространенный, потому что по сравнению с другими:
- Весит меньше (но это вопрос спорный увидим дальше).
- Легко поддается сжатию.
- Высокое количество цветов в передаче.
Самый распространенный формат png-8 в сайтостроении, потому что по сравнению с его собратом png-24, имеют колоссальную разницу в размере файла, поэтому второй применяется очень редко.
Основное различие двух форматов что jpeg это стационар и цвета из него уже не вытянешь, чтобы убрать лишние, и тем самым понизить объем картинки, и что у jpg нет прозрачного фона этот формат его не поддерживает.
Разрушаю мифы.
Самый главный миф всех сайтостроев, что ни в коем случае не применять png, это просто чушь, изображения этого формата сжать и оптимизировать можно лучше чем jpg, во много раз при правильном подходе.
Как правильно формат выбрать?
Смотрите для примера давайте я возьму картинку предположим нашего российского флага.
Я все операции буду рассматривать на примере фотошопа, так легче. Специально выбрал большой размер и малоцветный, всего три цвета, а теперь я хочу его сохранить, смотрите что происходит, для начала возьму jpg формат.
А вот что если я его сохраню в png.
Размер уменьшился в 6 раз почти. Я ничего не делал лишь задал минимально число цветов, просто супер я думаю. Этот способ подойдет для тех кому не принципиальна цветопередача, как у меня на блоге, все скриншоты именно так сделаны, выставляю минимум цветов, чтобы было читаемо и все нормально.
Вот этот момент и надо сканировать, это касается не только сайтов. Размер на жестком диске не резиновый, у моей мамы фотки и картинки по работе вообще 246 гигов занимают, и она удивляется почему так много и не хватает места. Просто надо пользоваться моим методом и все.
Разумеется если картинка многоцветная со множеством цветов и тенями, то png не поможет, и тогда я советую пользоваться
- Пересмотреть все изображения на блоге и выбрать какой формат лучше jpeg или png применить для разного рода картинок. Даже те которые уже сжимали и оптимизировали, потому что их можно еще больше урезать, и не потеряв при этом качество.
- При написании новых статей, оценивать этот момент, знаю что времени уйдет больше, но .
- Использовать программу риот, про которую говорил выше, либо воспользоваться вот для сжатия jpg.
- Не лениться потому что это и в правду нужно.
И дела у вас займут на две минуты больше, а пользы будет целый вагон с маленькой тележкой.
Ну что как вам статья, я думаю на некоторые вещи я вам открыл глаза, о которых вы даже и не знаете, так что применяйте и пользуйтесь, всем пока пока, жду вас в комментариях.
Теперь лидирующие позиции у формата jpeg. Благодаря своему умению сжимать фотографии и цветные картинки в несколько раз, он опережает по минимальному весу форматы gif и png, а bmp по-прежнему "пасет задних".
Сейчас пожалуй не найти в Интернете веб-страницу без наличия на ней каких-либо фотографий или картинок. Сегодня это стало нормой при верстке любых веб-страниц, ведь картинки оживляют, украшают, дополняют основное содержимое сайтов и с успехом применяются во всех областях веба. Кстати, первым браузером, который мог показывать графику, стал Mosaic (мозаика), появившийся практически одновременно с появлением языка гипертекстовой разметки Html.
Нынче практически все браузеры поддерживают три основных формата растровой графики используемых для веба - Gif, Png и Jpg. Исторически первым появился gif и именно с помощью него в первых браузерах можно было добавлять и отображать картинки и медийную информацию. Разработчики при его создании делали основной упор на максимальное уменьшение размера сохраняемой картинки.
Ведь в то время скорость Интернета была столь мала, и чтобы загрузка изображений не длилась "целую вечность", и был разработан и применен особый "формат графического обмена" (именно так расшифровывается аббревиатура GIF).
Особенность Gif в том, что он может включать палитру, состоящую всего лишь из 256 цветов. Т.е. изображение, преобразованное в этот формат, всегда будет содержать не более 256 оттенков, а все остальные цвета будут создаваться на основе подмешивания. Но именно из-за этого самого подмешивания и появляются различные неожиданные артефакты при преобразовании полноцветных фотографий в Гиф. Из-за этого очевидного и существенного недостатка, для вывода на страницы сайта полноцветных картинок и фото все чаще используют jpeg и png.
Но gif до сих популярен в отрасли веба по одной простой причине - он поддерживает анимацию, единственный из всех используемых в вебе. Анимированные смайлики и аватарки, открытки и баннеры - это результат работы формата Гиф. Правда сейчас не менее популярны флеш-технологии, но благодаря своей простоте gif в любимцах у вебмастеров, особенно начинающих.
Суть этой анимации заключается в том, что в контейнере Гиф находится не одна картинка, а сразу несколько и там же прописано время, через которые эти изображения будут сменять друг друга. При этом есть возможность зациклить анимацию и тогда за последним кадром будет опять начинаться показ первого. Сегодня в Интернете есть немало специализированных редакторов, в которых можно самостоятельно создавать Gif анимацию.
Также gif может поддерживать примитивный способ формирования прозрачности для создаваемых изображений. Почему примитивный? Да потому, что Гиф поддерживает всего два значения прозрачности - прозрачный либо непрозрачный, без всяких промежуточных состояний, каких можно добиться с помощью использования альфа-каналов в форматах Png.
Из-за этого возникают сложности с отображением плавно изменяющегося уровня прозрачности, поэтому все, что касается качественного прозрачного фона для изображений - это прерогатива уже Png. Почти все избражения с прозрачным фоном, что мы можем найти в Интернете, имеют расширение png.
Существует несколько вариаций Png, каждая из которых призвана выполнять свои задачи:
Png 8 - здесь по аналогии с Gif, при сохранении фотографии в Пнг 8 будет использоваться только 256 цветов., поэтому результаты сжатия изображений в этих двух форматах растровой графики будут практически идентичными. Так же как и в Gif - тут поддерживается прозрачность, но уже с альфа-каналом.
Png 24 - здесь на каждый пиксел фото выделяется три цветовых канала по 8 бит каждый (8*3=24), тем самым реализуется полноцветное формирование изображения без искажений. По качеству цветового отображения превосходит даже Jpg, но вот по весу будет тяжелее.
Png 32 - здесь три цветовых канала отвечают за формирование полноцветного изображения, а четвертый выделяется отдельно для формирования альфа-канала, позволяющего использовать Пнг 32 для получения картинок с прозрачным фоном. В Png 32 вы сможете выбрать любое изменение степени прозрачности, благодаря чему такие картинки будут одинаково хорошо смотреться на всех веб-страницах с любым фоном.
Теперь давайте обобщим всю информацию и сделаем кое-какие выводы.
