Форматы jpg gif png. Какой формат картинок лучше - png, gif или jpeg? Графика с монотонными цветами

Всем привет! Все видели у картинок в интернете такую приписку, как bmp , png, jpg или gif (ну или другие)? Например, foto.png или foto.jpg. Это графические файлы разных форматов . Думаю, не я один задумывался над тем, в чем различие этих форматов изображений ? Давайте попробуем разобраться.

Что такое форматы изображений бывают и зачем они нужны?

Не буду засорять статью избытком умных слов. Тем более, сам не всегда понимаю их смысл. Формат изображения применительно к интернету и компьютеру (под изображением я имею в виду какую-то графическую информацию – фотографии или рисунки) – это способ хранить и, соответственно, передавать картинки как элемент информации.

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

Возьмем некомпьютерный пример. Допустим, вы решили сохранить для потомков свой светлый образ, и заказали свой портрет. Но портрет портрету – рознь. Он может быть выполнен разными материалами, разными инструментами, разными техниками. Вы можете обратиться к фотографу, художнику или даже скульптору.

(В качестве иллюстрации своих слов я взял портреты В. Высоцкого)

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

В общем, вариантом бесчисленное количество. Но любой из них буде являться вашим портретом.

То же самой и с форматами изображений – вариантов множество.

Но их всех можно разделить на две большие группы – растровые и векторные. А нет, есть еще одна группа – смешанные, или комплексные, куда ж без них в современном мире 🙂

Нас больше интересуют растровые форматы – с ними чаще всего приходится сталкиваться. Но по паре слов нужно сказать и о других группах.

Векторные изображения основаны на геометрических фигурах – точках, кривых, кругах, многоугольниках. Векторные изображения можно увеличивать без потери качества. Примеры векторных файлов – svg, cdr, eps . Но, честно говоря, я не сталкивался с такими форматами.

Комплексные форматы, как следует из названия, обладают признаками и векторных, и растровых изображений. Наиболее известный пример такого формата – файлы pdf . Наверняка каждый сталкивался с ними: многие электронные книжки и документы как раз и хранятся в PDF-формате.

Растровые изображения

Наиболее распространённые форматы изображений – jpg (jpeg), gif, png, bmp . Все они относятся к растровой группе.

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

Вот пример растрового рисунка и его части под увеличением.

Видите, как размыт рисунок при увеличении?

Зато редактировать, хранить и передавать растровые изображения намного проще, чем векторные. Это очень важно для простых пользователей.

Работать с растром можно в таких удобных и известных редакторах, как Adobe Photoshop и Paint.

Характеристики растровых изображений

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

Самые распространенные форматы изображений, безусловно, BMP, GIF, PNG , JPEG .

К первой группе относятся форматы BMP, GIF, PNG, ко второй – JPEG. Сжатие без потерь основано на удалении избыточной информации, а сжатие с потерями – на отбрасывании информации, которую зрение человека не воспринимает.

В чем отличия форматов изображений bmp, png, jpg, gif

Я много-много написал выше, но так и не дал ответа на вопрос, выведенный в заголовок. Не знаю, смогу ли ответить, но попытаюсь.

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

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

Кроме того, «весят» jpeg-файлы мало. Их легко можно переслать с телефона на телефон, по email или выложить в интернет. Также небольшой размер позволяет хранить большое количество изображений.

Формат BMP (Bitmap Picture ) – растровое изображение. Качество изображений на высоте, потому что информация почти не сжимается. Но и размер таких файлов по сравнению с jpeg – огого.

Формат GIF (Graphics Interchange Format ) – формат обмена графическими данными. Очень популярный формат. Он позволяет сохранять анимированные изображения. Хотя считается, что он устарел. Но, судя по популярности гифок, со сцены этот формат сойдет не скоро. Конечно, для фотографов gif не пойдет – количество цветов в этом формате сильно ограничено 256. Зато в интернете это едва ли не основной формат. Еще один немаловажный плюс – файлы gif поддерживают режим прозрачности.

Формат PNG (Portable Network Graphics) – переносимая сетевая графика. Формат был разработан на смену формату GIF. Существует даже неофициальная расшифровка аббревиатуру как «PNG is Not GIF» — PNG не GIF. Этот формат поддерживает не только прозрачность, но и полупрозрачность от 1% до 99%, что является большим плюсом. Но PNG не может в одном файле хранить несколько изображений, как gif. Поэтому он не может использоваться для создания анимированных картинок.

Конечно, я рассказал не обо всех форматах изображений. Но эти – самые распространенные. Поэтому, думаю, вам была полезна моя статья «Чем отличаются форматы изображений bmp, png, jpg, gif» .

Если информация была интересна и полезна, подписывайтесь на анонсы статей на , а так же поделитесь статьей с друзьями в соцсетях. Кнопки соцсетей – под статьей, форма подписки – по ссылке выше или в форме вверху слева.

Удачи вам во всех ваших благородных начинаниях!

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

Краткий анализ графических форматов файлов

1. JPG / JPEG / JFIF
2. TIF / TIFF

Растр против вектора

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

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

Сжатие файлов

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

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

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

Изображения JPG / JPEG / JFIF

Аббревиатура от : Joint Photographic Experts Group - Объединённая группа экспертов по фотографиям.

Расширения файлов : .jpg / .jpeg

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

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

Применяемость : непрозрачные изображения, устройства захвата изображений (гаджеты, фотокамеры, экш-камеры).

Формат изображения PNG

Аббревиатура от : Portable Network Graphics - портативная сетевая графика.

Расширение файлов : .png

Эта бесплатная альтернатива GIF с открытым исходным кодом, которая поддерживает 16 миллионов цветов, в отличие от GIF, максимум которого 256-цветовая палитра. Это лучший формат файлов для изображений с сохранением источника цветов. Формат подходит для передачи идеального баланса тона. Анимированный файл PNG доступен в формате APNG. Эти файлы, как правило, имеют прозрачный фон.

Минусы : Больше всего подходит для файлов больших размеров. Сам формат PNG не поддерживает анимированную графику.

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

Расширение файла TIF

Аббревиатура от : Tagged Image File Format - формат для хранения растровых графических изображений.

Расширение файлов : .tif / .tiff

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

Минусы : Не идеальны для веб-браузеров.

Применяемость : Начальный этап фотографических файлов в печати. Программные пакеты OCR.

Формат файла GIF

Аббревиатура от : Graphics Interchange Format - формат для обмена изображениями.

Расширение файлов : .gif

Хотя GIF имеет низкую степень сжатия по сравнению с большинством видеоформатов, этот формат наиболее популярен среди пользователей для анимации изображений.

Минусы : формат ограничен 8-битной палитрой (256 цветов) и не подходит для фотографических изображений или сглаживания.

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

Формат файла изображения BMP

Аббревиатура от : Bitmap Picture - дословно формат для хранения растровых изображений

Расширение файлов : .bmp

Этот формат разработан компанией Microsoft и предназначен для хранения больших несжатых файлов внутри ОС Windows.

Минусы : этот формат не использует сжатие.

Применяемость : упрощенная структура формата делает файлы bmp идеальными для программ Windows.

Это самые распространенные форматы файлов изображений, которые используются пользователями в настоящее время. Теперь, когда Вы знаете какой из них идеально подходит для какой-либо цели, Вы сможете лучше понимать файлы каких графических форматов использовать для себя.

Форматы изображений можно разделить на три широкие категории:

• сжатие с потерями,
• сжатие без потерь,
• несжатых

Несжатые форматы занимают наибольшее количество данных, но они являются точными изображениями изображения. Растровые форматы, такие как BMP, обычно несжаты, хотя есть также сжатые BMP файлы.

Вы должны знать о нескольких ключевых факторах...

Во-первых, есть два типа сжатия: Lossless и Lossy .

Lossless означает, что изображение уменьшено, но не ухудшает качество. Lossy означает, что изображение сделано (даже) меньше, но в ущерб качеству. Если вы сохранили изображение в формате Lossy снова и снова, качество изображения будет становиться все хуже и хуже.

С индексированным это означает, что изображение может хранить только ограниченное количество цветов (обычно 256), которые выбраны автором изображения, с Прямой , это означает, что вы может хранить много тысяч цветов, которые не были выбраны автором.

BMP - Lossless/Indexed и Direct

Это старый формат. Это Lossless (данные об изображении не теряются при сохранении), но также практически никакого сжатия, что означает сохранение, поскольку BMP приводит к ОЧЕНЬ большим размерам файлов. Он может иметь палитры как Indexed, так и Direct, но это небольшое утешение. Размеры файлов настолько неоправданны, что никто никогда не использует этот формат.

Хорошо: ничего действительно. Существует не что-то, что BMP превосходит или не улучшается другими форматами.

GIF - Без потерь/Только индексирование

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

Изображения GIF также могут быть анимированы и иметь прозрачность.

Хорошо для: Логотипы, чертежи линий и другие простые изображения, которые должны быть небольшими. Только на самом деле используется для веб-сайтов.

JPEG - Lossy/Direct

Изображения JPEG были предназначены для того, чтобы сделать как можно более подробные фотографические изображения, удалив информацию, которую человеческий глаз не заметит. В результате формат Lossy и сохранение одного и того же файла снова и снова будут приводить к тому, что с течением времени будет потеряно больше данных. У него есть палитра тысяч цветов, и это отлично подходит для фотографий, но сжатие с потерями означает, что это плохо для логотипов и линейных рисунков: они не только выглядят нечеткими, но и такие изображения также будут иметь больший размер файла по сравнению с GIF!

Хорошо для: Фотографии. Кроме того, градиенты.

PNG-8 - Lossless/Indexed

PNG - более новый формат, а PNG-8 (индексированная версия PNG) - действительно хорошая замена для GIF. Однако, к сожалению, у него есть несколько недостатков: во-первых, он не может поддерживать анимацию, как GIF (может, она может, но только Firefox, похоже, поддерживает ее, в отличие от анимации GIF, которая поддерживается каждым браузером). Во-вторых, он имеет некоторые проблемы с поддержкой старых браузеров, таких как IE6. В-третьих, важное программное обеспечение, такое как Photoshop, имеет очень плохую реализацию формата. (Черт вас, Adobe!) PNG-8 может хранить только 256 цветов, например GIF.

Хорошо для: Главное, что PNG-8 работает лучше, чем GIF, поддерживает Alpha Transparency.

Важное примечание: Photoshop не поддерживает Alpha Transparency для файлов PNG-8. (Черт вас, Photoshop!) Есть способы конвертировать PNG-24 в PNG-8 файлы, сохраняя при этом свою прозрачность. Один из методов - PNGQuant , другой - сохранение ваших файлов с помощью Fireworks .

PNG-24 - Lossless/Direct

PNG-24 - отличный формат, который сочетает кодировку Lossless с прямым цветом (тысячи цветов, как JPEG). Это очень похоже на BMP в этом отношении, за исключением того, что PNG фактически сжимает изображения, поэтому это приводит к значительно меньшим файлам. К сожалению, файлы PNG-24 по-прежнему будут намного больше, чем JPEG, GIF и PNG-8, поэтому вам все равно нужно подумать, хотите ли вы его использовать.

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

Как и PNG-8, PNG-24 поддерживает альфа-прозрачность.

Я надеюсь, что это поможет!

Обычно они либо:

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

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

Каждый формат отличается, как описано ниже:

JPEG Файлы JPEG (Joint Photographic Experts Group) - это (в большинстве случаев) формат с потерями; расширение имени файла DOS - JPG (другая ОС может использовать JPEG). Почти каждая цифровая камера может сохранять изображения в формате JPEG, который поддерживает 8 бит на цвет (красный, зеленый, синий) для 24-битного итога, создавая относительно небольшие файлы. Когда это не слишком велико, сжатие заметно не ухудшает качество изображения, но файлы JPEG ухудшают деградацию поколений при многократном редактировании и сохранении. Фотографические изображения могут быть лучше сохранены в формате без потерь JPEG, если они будут повторно отредактированы, или если небольшие "артефакты" (дефекты, вызванные алгоритмом сжатия JPEG) неприемлемы. Формат JPEG также используется в качестве алгоритма сжатия изображений во многих файлах Adobe PDF.

TIFF TIFF (Tagged Image File Format) - это гибкий формат, который обычно сохраняет 8 бит или 16 бит на цвет (красный, зеленый, синий) для 24-битных и 48-разрядных итогов соответственно, используя либо TIFF, либо имена файлов TIF. Гибкость TIFF - это и благословение, и проклятие, потому что ни один читатель не читает каждый тип файла TIFF. TIFF являются потерями и без потерь; некоторые предлагают относительно хорошее сжатие без потерь для двухуровневых (черно-белых) изображений. Некоторые цифровые камеры могут сохранять в формате TIFF, используя алгоритм сжатия LZW для хранения без потерь. Формат изображения TIFF широко не поддерживается веб-браузерами. TIFF по-прежнему широко используется в качестве стандартного файла фотографии в полиграфическом бизнесе. TIFF может обрабатывать цветовые пространства, специфичные для устройства, такие как CMYK, определенные конкретным набором чернил для печати. ​​

PNG Формат PNG (Portable Network Graphics) был создан как свободный, с открытым исходным кодом, преемник GIF. Формат файла PNG поддерживает truecolor (16 миллионов цветов), в то время как GIF поддерживает только 256 цветов. Файл PNG отличается тем, что изображение имеет большие, равномерно окрашенные области. Формат PNG без потерь лучше всего подходит для редактирования изображений, а форматы с потерями, такие как JPG, лучше всего подходят для окончательного распределения фотографических изображений, поскольку файлы JPG меньше, чем файлы PNG. Многие старые браузеры в настоящее время не поддерживают формат файла PNG, однако в Internet Explorer 7 все современные веб-браузеры полностью поддерживают формат PNG. Адаптация Adam7 позволяет раннее предварительное просмотрение, даже если передан только небольшой процент данных изображения.

GIF GIF (формат обмена изображениями) ограничен 8-битной палитрой или 256 цветами. Это делает формат GIF подходящим для хранения графики с относительно небольшим количеством цветов, таких как простые диаграммы, формы, логотипы и изображения в стиле мультяшного стиля. Формат GIF поддерживает анимацию и по-прежнему широко используется для обеспечения эффектов анимации изображения. Он также использует сжатие без потерь, которое более эффективно, когда большие области имеют один цвет и неэффективны для подробных изображений или затухающих изображений.

BMP Формат BMP файла (растровое изображение Windows) обрабатывает графические файлы в ОС Microsoft Windows. Как правило, файлы BMP несжаты, поэтому они большие; Преимуществом является их простота, широкое признание и использование в программах Windows.

Использование для веб-страниц/веб-приложений

Ниже приведен краткий обзор этих форматов изображений при использовании их с веб-страницей/приложением.

PNG отлично подходит для IE6 и выше (для обеспечения прозрачности работы потребуется небольшой CSS-патч). Отлично подходит для иллюстраций и фотографий. JPG отлично подходит для фотографий в Интернете. GIF хорош для иллюстраций, когда вы не хотите переходить на PNG BMP не следует использовать онлайн в веб-страницах - тратит трафик

Так как другие рассмотрели различия, я порадую использование.

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

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

GIF использовался повсюду в Интернете, но он не понравился, поскольку он поддерживает только ограниченное количество цветов и запатентован.

JPG/JPEG в основном используется для любого качества фотографии, но не для текста. Используемое сжатие с потерями имеет тенденцию к резким линиям.

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

Лично я обычно использую PNG везде, где только могу. Это хороший компромисс между JPG и GIF.

JPG > Совместная группа экспертов по фотографиям

1 JPG-изображения поддерживают 16 миллионов цветов и лучше всего подходят для фотографий и сложной графики

2 JPG не поддерживают прозрачность.

PNG > Портативная сетевая графика

1 Он использовался как альтернатива файлу GIF, когда технология GIF защищалась авторским правом и требовала разрешения на использование.

2 PNG позволяют на 5-25% больше сжатия, чем GIF, и с более широким диапазоном цветов. PNG используют двумерное чередование, что заставляет их загружаться в два раза быстрее, чем изображения GIF ".

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

GIF > Формат обмена графикой

1 Уменьшает количество цветов в изображении до 256.

2 GIF также поддерживают прозрачность.

3 GIF имеют уникальную возможность отображать последовательность изображений, похожую на видео, называемую анимированным GIF.

4 Если изображение имеет несколько цветов и не требует какого-либо расширенного эффекта альфа-прозрачности, GIF - это путь.

SVG > Масштабируемая векторная графика

1 SVG - это веб-стандарт на основе XML, который описывает как статические изображения, так и анимации в двух измерениях.

2 SVG позволяет создавать очень качественную графику и анимацию, которые не теряют деталей, поскольку их размер увеличивается/уменьшается.

Эти имена относятся к различным способам кодирования данных пиксельных изображений (JPG и JPEG - одно и то же, и TIFF может просто заключать jpeg с некоторыми дополнительными метаданными).

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

Для веб-приложений я бы сказал, что jpeg или gif достаточно хороши. Jpeg используется чаще из-за его более высокой степени сжатия, а gif обычно используется для легкой анимации, когда вспышка (или что-то подобное) является более убитым или места, где требуется прозрачный фон. PNG также можно использовать, но у меня нет большого опыта в этом. BMP и TIFF, вероятно, не являются хорошими кандидатами для веб-приложений.

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

• Веб-дизайн

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

PNG

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

• Полноценная поддержка 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"а или сжимаем дальше

Гуглим и качаем - . Программка около 1.5 Мб с минимальным количеством настроек позволяет прогонять (в том числе пакетно) PNG-файлы со сжатием.

На пакете иконок (90 файлов с прозрачным фоном без особых наворотов) выигрыш в объёме составил в среднем около 10-15%. Не особо, конечно, впечатляет. Но для рассмотренных выше файлов-примеров процент сжатия колебался от 10% (большой постер без прозрачности) до 72% (полупрозрачные прямоугольники). Так что, попробовать стоит, тем более работа с утилитой много времени не занимает.

Кроме PNGOut, существует ещё много программ, детальным обзором которых сейчас заниматься не хочется:

• OptiPNG - не имеет графической оболочки и работает из командной строки. По непроверенным данным процент сжатия меньше. UPD но её пользователи утверждают обратное.
• Pngcrush - сам не пробовал, говорят «пытается оптимизировать файл всеми доступными способами», но главное ведь не «как пытается», а «как оптимизирует».
• и ещё ряд утилиток просто вычищающих служебный мусор из файлов.

Adobe Fireworks

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 больше.

Вердикт

Для прозрачных элементов дизайна стоит использовать 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 применить для разного рода картинок. Даже те которые уже сжимали и оптимизировали, потому что их можно еще больше урезать, и не потеряв при этом качество.
• При написании новых статей, оценивать этот момент, знаю что времени уйдет больше, но