Какой самый высокое качество формат изображения. Какой формат выбрать для изображений - jpeg, png или gif
От автора: на март 2017 изображения составляют свыше 65% веб-контента. И это не удивительно: изображения придают красоту, передают сообщения, рассказывают истории и налаживают контакт с посетителями вашего сайта. Обратная сторона вопроса – при неправильном использовании изображения зачастую являются главной причиной замедления сайта и плохого пользовательского опыта.
Правильное использование изображений в интернете подразумевает две вещи:
выбор правильного формата изображений;
оптимизация изображений.
В этой статье я раскрою первый пункт, в частности я расскажу вам про форматы изображений, которые больше других подходят для веба, а также для каких изображений нужно использовать эти форматы.
Но прежде давайте кратко пробежимся по терминологии.
Растровые или векторные изображения
В основе растровых изображений лежит двумерная сетка пикселей. В каждом пикселе хранится цвет и значение прозрачности.
Растровые изображения плохо масштабируются: если увеличить растровое изображение, оно потеряет четкость и качество. Популярные растровые форматы изображений для веб – JPEG, JPG, GIF и PNG.
Ниже представлено два растровых изображения (JPG) с яблоком. Первое изображение в натуральную величину. Второе показывает увеличенную часть первого изображения.
Пример растрового изображения в натуральном размере.
Увеличенная часть растрового изображения.
Обратите внимание на потерю качества в увеличенной версии изображения.
В отличие от растровых изображений векторная графика состоит из линий, фигур, точек маршрутов. Информация о векторных изображениях не хранится в пикселях, она хранится в математический инструкциях по отрисовке, которые никак не связаны с пикселями. Alex Walker очень понятно объяснил разницу на примере SVG – самого популярного формата векторных изображений в сети:
«SVG – это не формат изображения, это больше рецепт изображения.» — Почему JPEG-изображения похожи на яблочный пирог из McDonalds (а SVG нет)
Одно из следствий независимости от разрешения экрана – векторные изображения можно масштабировать под размер контента. Изображения будут четкими, идеально подходят для ретина экранов.
SVG-графика в маленьком масштабе.
Часть увеличенного SVG-изображения.
Оба изображения сверху представляют собой пример одного векторного изображения, однако второе изображение увеличено более чем в два раза по сравнению с первым. Потерь качества нет.
С потерей качества или без потерь (lossy и lossless)
Оба термина lossy и lossless отсылают к техникам сжатия медиа файлов, т.е. изображений, аудио и видео.
Lossy-сжатие: «не восстанавливает цифровые данные до 100% от оригинала. Методы с потерей качества отличаются высокой степенью сжатия, что позволяет уменьшить вес сжатых файлов. Однако часть оригинальных пикселей, звуковых волн и кадров видео удаляются навсегда.» — PCMag.com Encyclopedia
Что это значит на практике: чем сильнее вы сжимаете файл с потерей качества, тем меньше он будет. Получая меньший вес файла, вы необратимо теряете качество. При lossy-сжатии нужно балансировать между маленьким весом файла и качеством.
Вам очень часто встречается формат изображений с потерей качества, это JPEG.
В отличие от изображений с потерей качества lossless-сжатие сохраняет все данные, как в оригинале. Такое сжатие не приводит к падению качества файлов. Из-за этого lossless форматы файлов зачастую имеют больший вес по сравнению с lossy.
В сети легко можно найти lossless-форматы изображений, это GIF и PNG.
Представленная информация полезна при выборе лучшего формата изображений для вашего контента.
Первые три формата изображений я опишу ниже (JPG, GIF и PNG), они уже на протяжении долгого времени используются на сайтах. Последние два формата, SVG и webP, не совсем новые, они пока что не популярны. Тем не менее, они как нельзя лучше подходят под требования адаптивности и быстрозагружаемых сайтов, и их популярность значительно выросла.
JPEG
JPEG или JPG – lossy-формат, разработанный Joint Photographic Experts Group. JPG-изображения занимают почти 3% от всех типов контента на сайтах. Почему этот формат так популярен:
формат JPG умеет отображать миллионы цветов, что делает его идеальным кандидатом для отображения фотографий в интернете;
Современные тенденции и подходы в веб-разработке
Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении
так как это lossy-формат, то вы можете использовать сжатие для значительного уменьшения размера файла. В JPG-файлах есть множество уровней сжатия: примерно 60% будет достаточно для изображений в интернете, что-либо выше 75% ухудшает качество изображения;
все устройства с интернетом поддерживают формат JPG, что упрощает использование формата в интернете.
Один заметный недостаток JPG – файлы этого формата не поддерживают прозрачность. Если вы хотите использовать прозрачный фон для наложения изображения на фоновый цвет или текстуру страницы, JPG-изображения не подойдут. Выберите один из вариантов, про которые я расскажу ниже.
GIF
GIF или Graphics Interchange Format – это 8-битный lossless-формат с максимальным количеством цветов, равным 256. Цветовые ограничения делают GIF неподходящим вариантом для отображения фотографий и изображений с широким диапазоном цветов.
Факторы, повлиявшие на такое долгосрочное использование в интернете:
из-за ограничения в 256 цветов размер файлов довольно низкий;
поддерживает прозрачность;
поддерживает анимацию, что позволяет использовать формат для отображения зацикленных изображений, например, иконок, смайликов, баннеров и т.д;
хорошо подходит для простых изображений с однотонными цветами, но не подходит для фотографий.
PNG
PNG или Portable Network Graphics – это альтернатива GIF. Формат разработан W3C. Как и GIF, формат использует алгоритм сжатия без потери качества, доступны варианты 8-бит и 24-бит. Оба варианта поддерживают прозрачность. Однако в 24-битном PNG-изображении прозрачность работает на альфа канале, а также красном, зеленом и синем каналах. Поэтому, несмотря на то, что GIF и 8-бит PNG изображения могут быть либо полностью непрозрачными, либо полностью прозрачными, в PNG каждый пиксель изображения предлагает 256 уровней прозрачности.
24-битный вариант PNG можно использовать для:
веб-изображений с различным уровнем прозрачности;
сложных фотографий и графики;
графики, которую требуется часто редактировать и экспортировать: lessless-формат сохранит качество.
В отличие от GIF формат PNG не поддерживает анимацию, а вес файлов может быть довольно большим.
SVG
SVG или Scalable Vector Graphics (масштабируемая векторная графика) – это тип векторных файлов на основе XML. Формат появился в 2001, однако популярность среди веб-разработчиков он получил только недавно. Причина такой запоздалой любви – плохая поддержка SVG в браузерах на протяжении многих лет. С радостью хочу сообщить, что на момент написания статьи SVG поддерживается во всех основных браузерах, но не без различий и багов.
В SVG есть масса функций, которые делают этот формат рекомендуемым для веба, особенно если SVG используется для простых изображений типа логотипов, карт, иконок и т.д.
Плюсы формата SVG
SVG зачастую весят меньше растровых изображений, особенно после оптимизации под веб и сжатия через gzip;
формат масштабируемый, что обеспечивает четкость на любом разрешении экрана;
SVG-код можно поместить в HTML и сэкономить на HTTP-запросах;
SVG-код можно настраивать через CSS;
SVG-изображения можно анимировать, в том числе отдельные части, как с помощью CSS, так и JS, что очень круто.
Избегайте слишком сложных SVG-изображений, это слегка увеличивает размер файла. И наконец, SVG не применим к фотографиям, здесь лучше подойдут форматы JPG и webP.
WebP
Несмотря на то, что формат появился в 2010, я не ошибусь, если скажу, что webP все еще очень новый формат, который не так известен, как JPG и PNG. Тем не менее, веб у этого формата в крови: он был специально спроектирован для интернета, что делает его крайне интересным.
WebP – формат изображений с открытым исходным кодом, разработанный Google. Ключевые особенности: «WebP – современный формат изображений в интернете, обеспечивающий превосходное сжатие как с потерями, так и без потерь качества… lossless-версии webP изображений весят на 26% меньше PNG. Lossy-версии webP весят на 25-34% меньше сравнимых JPEG изображений… Lossless webP поддерживает прозрачность… за счет 22% дополнительных байт. В случаях, где применимо lossy RGB-сжатие, lossy webP также поддерживает прозрачность, предоставляя 3х меньший размер файла по сравнению с PNG.» — WebP сайт
Крастота webP в том, что он совмещает преимущества JPG и PNG без увеличения размера файла.
На данный момент поддержка формата довольно хорошая: Blink-браузеры поддерживали формат с самого релиза, все-таки webP – создание Google. Для обратной совместимости с браузерами без поддержки, т.е. IE/Edge, Firefox и Safari, народные умельцы придумали обходные решения.
Заключение
В этой статье я рассказал вам про форматы изображений для веба, а также кратко прошелся по типам изображений, наиболее подходящих для интернета.
JPG, GIF и PNG очень популярные форматы, которые используются уже очень долгое время. SVG и webP более новые, интересные альтернативы. SVG отлично подходит для иллюстраций и простых изображений, webP заменяет все ниши применения JPG и PNG.
Вы уже использовали SVG и webP в разработке? Какие сложности у вас возникли? Добились ли вы каких-либо заметных приростов производительности? Пишите в комментариях!
Осторожно, много картинок! Все кликабельны.
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.
- Не лениться потому что это и в правду нужно.
И дела у вас займут на две минуты больше, а пользы будет целый вагон с маленькой тележкой.
Ну что как вам статья, я думаю на некоторые вещи я вам открыл глаза, о которых вы даже и не знаете, так что применяйте и пользуйтесь, всем пока пока, жду вас в комментариях.