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

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

Форматы картинок png, gif и jpeg

В Интернете на сегодняшний день практически не осталось сайтов, на страницах которых бы не было графических элементов. На сегодняшний день самыми популярными форматами картинок являются JPEG, PNG, GIF . Все они различаются между собой по назначению. Некому не секрет что страничка должна "весить" как можно меньше. Размер ("вес") графики на сайте зависит как от форматов картинок , так и от их размеров . Конечно, для уменьшения изображений используют разные методы сжатия, которые могут работать как с уменьшением качества изображения, так и без него.

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

PNG (Portable Network Graphics) – изначально разрабатывался как альтернатива расширению GIF. Изначально PNG предназначался для применения в вебе. На сегодняшний день картинки формата PNG не приобрели большой популярности. Если быть честным, то я начал использовать PNG изображения у себя на блоге, когда перешел на прозрачный фон картинки. При сжатии данного формата мы не получим потерь в качестве цвета и это дает преимущества сохранять незаконченные изображения в PNG. С помощью вариаций PNG можно легко заменить JPEG и GIF:

• PNG 8 – восьмерка обозначает, что при сохранении будет использоваться не больше 256 цветов (по аналогии, как и в GIF). Вообще PNG 8 был разработан, что б заменить картинки формата GIF, но при этом он отличается тем, что не может отображать анимацию ни в каком виде. Можно использовать низкоуровневую прозрачность.
• PNG 24 – 24 означает, что используется 24-битная палитра цвета. Данная вариация предназначалась для замены формата JPEG. Как и в формате JPEG, PNG 24 сохраняет яркость и оттенки цветов в фотографиях. Данный формат картинок использует около 16.7 млн. цветов из-за чего пришел на смену полноцветных изображений, как в JPEG. Имеет поддержку многоуровневой прозрачности, что позволяет сделать плавный переход от прозрачной области к цветной.
• PNG 32 – похож на вариацию 24, но отличается тем, что можно указать изменение степени прозрачности, а это дает хорошо видимое изображение на любых веб страницах с любым фоном.

Если брать во внимание нагрузку на веб страницу, то размер PNG 8 практически в два раза меньше чем размер PNG 24, но это не удивительно, ведь они предназначались для замены форматов GIF и JPEG (качество соответствует размеру).

GIF (Graphics Interchange Format) – это первый исторический формат, используемый в . Даже на сегодняшний день это расширение имеет большую популярность. Картинки формата GIF имеют маленький размер, поэтому нагрузка на сервер минимальная. Особенность GIF – это наличие анимации .

Маленький размер картинок объясняется тем, что GIF может иметь не больше 256 цветов. Именно из-за этого GIF не используют для вывода полноцветных изображений и фотографий.

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

Еще одним плюсом использования GIF будет служить примитивная прозрачность изображений. Для любого пикселя можно установить только два значения – прозрачный и непрозрачный .

JPEG (Joint Photographic Experts Group) – это расширение является собственностью ассоциаций американских фотографов (можно понять с аббревиатуры). Был создан для хранения полноцветных изображений, передачи хорошего качества изображения.

Использование JPEG может привести к большим нагрузкам. Если на веб-сайте необходимо передать качество (в деталях) фотографию, то конечно без JPEG не обойтись. Если вести блог, то в использовании JPEG острой необходимости нет, потому что размеры картинок формата JPEG очень велики в весе, что дает нагрузку на хостинг.

Каждый файл обладает собственным форматом, указываемым после точки в его названии (по умолчанию он скрыт). Так, для файлов Word используется docx (или doc в старых версиях), для видеозаписей это AVI, ASF, 3gp и т. д. Для изображений созданы другие. Их мы и рассмотрим.

Gif

Это расширение было создано в 1977 году израильскими специалистами по теории информации, и изначально имело аббревиатуру LZ (Lempel-Ziv). А 1984 году был изменен алгоритм, улучшен процесс сжатия. После такой процедуры LZ изменил своё название на LZW. Через 7 лет компания CompuServe изменила алгоритм для передачи графического изображения между компьютерами.

После всех изменений и появился формат изображений GIF, и соперничать с ним может, пожалуй, JPEG. Но компания CompuServe пошла дальше - решила подзаработать и разрешила использовать формат GIF только лицам, которые имеют лицензию. Дело дошло до того, что компаниям пришлось создавать другой формат, который не требует лицензию, и они стали использовать PNG. Но в наше время всё чаще и чаще применяется именно GIF, причем бесплатно. К примеру, в социальных сетях для передачи эмоций используют не только смайлы, но и забавные анимированные картинки, которые способны передать настроение собеседника.

Данный формат, как было описано выше, использовался как альтернатива платному GIF и более сложному TIFF. Также он превосходит анимационный формат по качеству сжатия и количеству цветов от 1-бита до 48-бит и расширение до двух пикселей. Png формат был создан компанией PNG Development Group. Он был представлен на конференции Useter в январе 1995 года. После нее было разработано четыре версии PNG. Изначально он назывался PBF. Немного позже получил своё окончательное название. Он позиционировался как инструмент для редактирования графики и работы в Интернете.

PNG подходит для трех основных типов изображения: полутоновых изображений, цветовых индексированных изображений и полноцветного изображения. Ещё одним плюсом является то, что в отличие от JPEG сжатие проходит без потерь. А также он обладает опциональной поддержкой альфа канала, возможностью гамма коррекции и двумерной чересстрочной развёрткой. И другое достоинство в том, что картинки в формате PNG выглядят насыщенными.

Однако этот формат обладает и недостатками. Одним из них является неспособность к множественному изображению и анимации. Для движущихся картинок был разработан отдельный формат MNG и был опубликован в середине 1999 года.

JPEG

Своё название данное расширение получило от компании Joint Photographic Experts Group и компании ISO. Сегодня он является форматом, который способен достаточно хорошо сжимать изображение.

Данное расширение было создано для работы с картинками и фотографиями, содержащими реальные природные явления или элементы человеческого быта (дерево, закат, стул, компьютер и т. д.).

Но такой формат совершенно не подходит для сжатия чертежей картинок с текстом или знаками, для них не подойдет формат JPEG. PNG или GIF же будут намного лучше справляться с этой функцией.

Вывод

Мы рассмотрели три самых популярных формата, которые встречаются нам постоянно: это PNG формат, GIF и JPEG. Узнали о достоинствах и недостатках каждого из них.

Теперь, когда вы знаете о них немного больше, вы наверняка не будете конвертировать картинку с животными в PNG формат или не будете ломать голову, почему не получается сохранить анимированное изображение в GIF.

1. Выберите одно изображение для преобразования.
2. Нажмите кнопку Конвертировать .




7. Пользуйтесь на здоровье

1. Выберите один ZIP файл содержащий изображения для преобразования. Только 20 файлов могут быть конвертированы одновременно.
2. Нажмите кнопку Конвертировать .
3. Файл отсылается на наш сервер и преобразование начинается немедленно.
4. Скорость преобразования зависит от размера файла, скорости Вашего интернет соединения и доступных ресурсов на наших серверах.
5. Когда преобразование закончено, файл возвращается в то же самое окно браузера (не закрывайте Ваш браузер).
6. В случае невозможности преобразования, причина будет указана красным цветом.
7. Пользуйтесь на здоровье

Выберите изображение для конвертирования Поддерживаются только JPG/JPEG/JFIF/PNG/BMP/GIF/TIF/TIFF/ICO файлы

JPEG изображение JFIF изображение BMP изображение GIF изображение PNG изображение TIF изображение ICO изображение исходного размера ICO 16x16 изображение ICO 32x32 изображение Распознавание OCR (Русский)

Идет конвертация

Это может занять несколько минут

На данной странице возможно конвертирование только JPG JPEG JFIF PNG BMP GIF TIF ICO в другие форматы изображений и распознавание Русского текста в изображениях.

• Для конвертирования MS Word (DOC DOCX) в PDF воспользуйтесь ссылкой Word в PDF .
• Для конвертирования RTF ODT MHT HTM HTML TXT FB2 DOT DOTX XLS XLSX XLSB ODS XLT XLTX PPT PPTX PPS PPSX ODP POT POTX в PDF воспользуйтесь ссылкой Другие документы в PDF .
• Для конвертирования JPG JPEG PNG BMP GIF TIF TIFF в PDF воспользуйтесь ссылкой Изображение в PDF .
• Для извлечения текста из PDF документа воспользуйтесь ссылкой PDF в TXT .
• Для конвертирования DOC DOCX RTF ODT MHT HTM HTML TXT FB2 DOT DOTX в DOC DOCX DOT ODT RTF TXT или XLS XLSX XLSB XLT XLTX ODS в XLS XLSX или PPT PPTX PPS PPSX ODP POT POTX в PPT PPTX PPS PPSX JPG TIF PNG GIF BMP воспользуйтесь ссылкой Другие форматы .
• Для конвертирования DOC DOCX DOT DOTX RTF ODT MHT HTM HTML TXT в FB2 воспользуйтесь ссылкой Документы в FB2 .
• Для конвертирования PDF в MS Word (DOC, DOCX), воспользуйтесь ссылкой Конвертировать PDF в Word .
• Для конвертирования PDF в JPG, воспользуйтесь ссылкой Конвертировать PDF в JPG .
• Для конвертирования DJVU в PDF, воспользуйтесь ссылкой Конвертировать DJVU в PDF .
• Для распознавания текста в PDF или изображениях, воспользуйтесь ссылкой Распознать PDF или изображение .

Выберите ZIP архив для конвертирования Поддерживаются только ZIP файлы

JPEG изображение JFIF изображение BMP изображение GIF изображение PNG изображение TIF изображение ICO изображение исходного размера ICO 16x16 изображение ICO 32x32 изображение

22 ноября 2008 в 07:17

О формате PNG. Краткий тест-драйв

• Веб-дизайн

Осторожно, много картинок! Все кликабельны.

PNG

Растровый графический формат PNG , набирающий всё большую популярность в эпоху веб 2.0, появился в далеком 1995 году как замена старому доброму GIF (и, частично, TIFF). К тому времени хозяева запатентованного GIF"а решили сбивать четырёхзначные суммы со всех разработчиков, использующих формат, и свободному сообществу ничего не осталось кроме как предложить бесплатную альтернативу.

Так в чем же преимущества формата?

• Полноценная поддержка alpha-transparency - прозрачности. Позволяет сделать участки изображения прозрачными и полупрозрачными.
• Качественный алгоритм сжатия без потери качества. Похожий на LZW, но немного эффективнее.
• Возможность черезстрочной развёртки, причем (в отличии от GIF) как по вертикали, так и по горизонтали одновременно.
• Встроенная гамма-коррекция. Позволяет прикрепить к изображению настройки его отображения, для того чтобы на разных мониторах изображение отображалось точно так же, как и у автора.

Существуют 2 версии формата: PNG-8 (похож на GIF - использует индексные цвета) и PNG-24 (ближе к JPEG - полноцветная палитра).

Так как 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 самый распространенный, потому что по сравнению с другими:

1. Весит меньше (но это вопрос спорный увидим дальше).
2. Легко поддается сжатию.
3. Высокое количество цветов в передаче.

Самый распространенный формат png-8 в сайтостроении, потому что по сравнению с его собратом png-24, имеют колоссальную разницу в размере файла, поэтому второй применяется очень редко.

Основное различие двух форматов что jpeg это стационар и цвета из него уже не вытянешь, чтобы убрать лишние, и тем самым понизить объем картинки, и что у jpg нет прозрачного фона этот формат его не поддерживает.

Разрушаю мифы.

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

Как правильно формат выбрать?

Смотрите для примера давайте я возьму картинку предположим нашего российского флага.

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

А вот что если я его сохраню в png.

Размер уменьшился в 6 раз почти. Я ничего не делал лишь задал минимально число цветов, просто супер я думаю. Этот способ подойдет для тех кому не принципиальна цветопередача, как у меня на блоге, все скриншоты именно так сделаны, выставляю минимум цветов, чтобы было читаемо и все нормально.

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

Разумеется если картинка многоцветная со множеством цветов и тенями, то png не поможет, и тогда я советую пользоваться

• Пересмотреть все изображения на блоге и выбрать какой формат лучше jpeg или png применить для разного рода картинок. Даже те которые уже сжимали и оптимизировали, потому что их можно еще больше урезать, и не потеряв при этом качество.
• При написании новых статей, оценивать этот момент, знаю что времени уйдет больше, но