Форматы изображений

3 основных формата изображений, используемых в интернете

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

1. Формат JPEG

Термин JPEG расшифровывается как Joint Photographic Experts Group. Он был придуман в далеком 1986-м году. Основные преимущества этого формата в том, что он может отображать миллионы цветов, и особенно хорошо подходит для высоких уровней сжатия.

В целом, JPEG является отличным вариантом для отображения сложных фотографий, которые включают в себя много цветов. Вот краткий пример:

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

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

2. Формат PNG

Графический формат PNG (Portable Network Graphics) также популярен на интернет-сайтах, как и JPEG. PNG-изображения, аналогично JPEG, поддерживают миллионы цветов. Хотя все же этот формат больше подходит для картинок, содержащих меньше цветовых данных. В противном случае ваше изображение будет «тяжелее» по размеру, аналогичное, сохраненное как JPEG.

Вот пример изображения в формате PNG:

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

Сохранив такое изображение в формате JPEG, вы можете получить размытые края и общее искажение изображения.

Еще одним преимуществом PNG является то, что он поддерживает прозрачность. Это делает формат идеальным вариантом для логотипов и значков. Например, логотип WPShop в формате PNG с прозрачным фоном:

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

3. Формат GIF

В отличие от двух выше рассмотренных форматов, GIF (Graphics Interchange Format) имеет более конкретные варианты использования. Хотя у вас может быть статическое GIF-изображение, большинство людей используют этот формат для демонстрации анимации. Например:

JPEG и PNG обычно не поддерживают анимацию (хотя есть формат APNG (Animated Portable Network Graphics), называемый анимированной переносимой сетевой графикой. Это делает GIF-файлы очень полезными. Однако эти типы изображений по размеру значительно больше, так как содержат много кадров.

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

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

Оптимальный размер изображения для сайта

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

Что касается размеров, то на мой взгляд оптимальными размерами являются:

Ширина 1600 px;Высота 1067 px;

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

Никто не будет ждать пока такая картинка загрузится на странице сайта.

Подробнее: Как оптимизация изображений влияет на посещаемость сайта

Самый лучший способ подготовить изображение – это воспользоваться программой photoshop.

Описание популярных форматов изображения для сайта

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

JPEG

JPEG или JPG – один из самых популярных форматов изображений для сайтов. Формат поддерживает миллионы цветов, что и даёт ему лидирующую позицию в представлении фотографий и картинок на сайте.

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

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

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

PNG

Этот формат использует алгоритм сжатия без потери качества. По количеству цветов и уровню прозрачности доступен в двух видах 8 и 24-бит. Оба поддерживают прозрачность.

8-битный пользуется малой популярностью, а вот 24-битный широко используется для различных изображений на сайте. За счёт прозрачности позволяет создавать комбинированные изображения. Часто используется для создания анимированных кнопок, иконок, где необходим эффект прозрачности.

Изображения в формате PNG можно много раз оптимизировать, редактировать – оно сохранит первоначальное качество.

Формат также поддерживается всеми браузерами и устройствами, что гарантирует его отображение на любом экране.

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

GIF

Это 8-битный формат, поддерживающий 256 цветов, прозрачность и анимацию. За счёт поддержки малого количества цветов, вес файла тоже минимальный.

Формат не подходит для фотографий и изображений с широким диапазоном цветов.

Зато широко используется при создании , баннеров, кнопок, иконок и так далее.

В современных сайтах этот формат используется всё реже.

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

SVG

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

На сегодняшний день SVG поддерживается всеми современными браузерами. Но, проблемы с отображением все, же встречаются.

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

Формат SVG имеет малый вес, отлично масштабируются, обеспечивая чёткость изображения на любом разрешении экрана, поддерживает анимацию, можно управлять через CSS и размещать в HTML, сокращая количество запросов.

WebP

Формат с открытым исходным кодом, разработан Google специально для интернета. Сегодня YouTube использует преобразование миниатюр для видео в формат WebP.

Формат обеспечивает превосходное сжатие и поддерживает прозрачность. Он сочетает в себе преимущества JPG и PNG форматов без увеличения размера файла.

Но, несмотря на преимущества формата, он поддерживается не всем браузерами, например, IE, Edge, Firefox и Safari.

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

Какие изображения для сайтов использую сегодня

Все изображения для сайтов, подразделяются:

• растровые (пример — JPG, JPEG, GIF, PNG),
• векторные (пример — SVG).

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

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

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

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

Какие изображения для сайтов использую сегодня

Все изображения для сайтов, подразделяются:

• растровые (пример — JPG, JPEG, GIF, PNG),
• векторные (пример — SVG).

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

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

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

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

Соотношение сторон

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

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

Общепринятым стандартом для распечатки фотографий является 100 на 150 мм. Правда, лучше брать цифровое изображение чуть больших величин, желательно, 102 на 105 мм, так уменьшается вероятность получения снимка плохого качества. При этом пиксельное разрешение данного формата должно быть не менее 1205 на 1795. Также есть и другие стандартные форматы:

миллиметров	пикселей
130 на 108	1500 на 2102
100 на 300	1205 на 3602
150 на 220	1795 на 2646
200 на 300	2398 на 3602
210 на 300	2480 на 3602
240 на 300	2835 на 3602
300 на 300	3602 на 3602
300 на 450	3602 на 5398
300 на 600	3602 на 7087
300 на 900	3602 на 10630

Также есть определенные стандарты и для широкоформатной печати

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

миллиметров	пикселей
400 на 600	4000 на 6000
500 на 750	5000 на 7500
600 на 900	6000 на 9000
900 на 1200	9000 на 12000
600 на 1800	6000 на 18000
1000 на 1000	10000 на 10000
1000 на 1500	10000 на 15000
1000 на 3000	10000 на 30000

Файлы изображений

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

JPEG: распространённый формат изображения lossy («с потерями»), который ценится за его способность создавать небольшие размеры файлов. Делает он это путём удаления информации изображения, которую он считает ненужной (примером этого может быть потеря прозрачности из файла изображения, преобразованного в JPEG). Чаще всего этот формат используются для хранения фотографий и изображений, где эта информация менее необходима, или если вы готовы пожертвовать некоторой информацией из файла ради получения меньшего размера.

PNG: распространённый формат изображения lossless («без потерь»), который сжимает шаблоны изображений. Таким образом, PNG могут воссоздавать исходное изображение (то, что не всегда может выполнить формат lossy, такой как JPEG). PNG нужны в случае, когда требуется сохранить графические функции, такие как прозрачность и глубина цвета. Однако, поскольку они сохраняют большую часть исходного изображения, они, как правило, имеют больший размер, чем некоторые другие распространённые форматы изображений.

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

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

Какие форматы известны в настоящее время?

.3GP — формат мультимедийного контейнера, который может содержать собственные форматы AMR, AMR-WB или AMR-WB+, а также некоторые открытые разновидности.

.AAC (Advanced Audio Coding) — основан на стандартах MPEG-2 и MPEG-4. Файлы AAC обычно представляют собой контейнеры ADTS или ADIF.

.AAX (Audible.com) — формат аудиокниги, который представляет собой файл M4B с изменяемым битрейтом (обеспечивающий высокое качество), зашифрованный с помощью DRM. MPB содержит AAC- или ALAC-кодированный звук в контейнере MPEG-4.

.AIFF — стандартный формат аудиофайла, используемый Apple. Его можно считать эквивалентом WAV.

.AMR (AMR-NB) – тип аудио, используемый в основном для записи речи.

.APE (Ashland Monkey’s) – формат аудио со сжатием без потери качества.

.M4A — аудио в MPEG-4, используемый Apple для незащищенной музыки, загруженной из iTunes Music Store. Аудио в файле M4A обычно кодируется AAC, хотя ALAC также может использоваться без потерь качества.

.M4P — Apple-версия AAC с патентованным управлением цифровыми правами, разработанная Apple для использования в музыке, загруженной из iTunes Music Store.

.MMF– вид аудио от Samsung, используемый в мелодии звонка. Он был разработан Yamaha и представляет собой формат мультимедийных данных.

.MP3 -формат MPEG Layer III Audio. Это самый распространенный вид звукового файла, используемый сегодня. Также он известен как MPEG-1 или MPEG-2 и представляет собой своеобразный формат аудиокодирования для цифрового звука. Он использует форму сжатия данных с потерями для кодирования информации с применением неточных приближений и отбрасывания частичных данных. Все это выполняется с целью уменьшения размеров файлов, как правило, в 10 раз, по сравнению с компакт-диском. При этом сохраняется качество звука, сравнимое с несжатым. По сравнению с цифровым аудиокачеством CD, качество сжатия MP3 обычно достигает 75-95 % по уменьшению размера. Таким образом, файлы этот типа составляют от 1/4 до 1/20 размера исходного цифрового аудиопотока

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

Обычно используемой настройкой кодирования MP3 является CBR 128 кбит/с, в результате получается файл размером 1/11 (= 9 %) от размера исходного файла качества CD, то есть с 91 % сжатием.

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

.MPC (ранее известный как MPEGplus, MPEG+ или MP+) — представляет собой аудиокодек с открытым исходным кодом, специально оптимизированный для прозрачного сжатия стерео/аудио с битрейтом 160-180 Кбит/с.

Формат .OGG, .OGA, MOGG — свободный открытый контейнерный тип, поддерживающий множество других видов, самым популярным из которых является аудиоформат Vorbis. Он предлагает сжатие, подобное MP3, но менее популярное. VJGG (Multi-Track-Single-Logical-StreamOgg-Vorbis) является многоканальным или многодорожечным файловым форматом OGG.

.WAV — стандартный формат файла звукового файла, используемый в основном на ПК с ОС Windows. Обычно используется для хранения несжатых (PCM) звуковых файлов качества CD, что означает, что они могут быть большими по размеру — около 10 МБ в минуту. Эти файлы могут также содержать данные, закодированные с помощью различных кодеков, для уменьшения размера (например, перевода в формат GSM или MP3). WAV-файлы используют структуру RIFF. Этот формат наиболее хорошо сохраняет качество файлов.

.WMA — формат Microsoft Windows Media Audio. Разработан с возможностями управления цифровыми правами (DRM) для защиты от копирования. Ранее был распространен так же широко, как формат OGG или MP3.

.WV — формат, созданный для видео в формате HTML5.

Формат файлов TIFF в деталях : Документные сканеры

TIFF (англ. Tagged Image File Format) — формат хранения растровых графических изображений. TIFF стал популярным форматом для хранения изображений с большой глубиной цвета. Он используется при сканировании, отправке факсов, распознавании текста, в полиграфии, широко поддерживается графическими приложениями. TIFF был выбран в качестве основного графического формата операционной системы NeXTSTEP и из неё поддержка этого формата перешла в Mac OS X. Формат был разработан Aldus Corporation в сотрудничестве с Microsoft для использования с PostScript. Компания-владелец спецификаций — Aldus Corporation — впоследствии объединилась с Adobe Systems, владеющей в настоящее время авторским правом на эти спецификации.

Файлы формата TIFF, как правило, имеют расширение .tiff или .tif.

Сжатие TIFF

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

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

Разберемся поподробнее с алгоритмами сжатия,

Есть три алгоритма сжатия формата TIFF: LZW, ZIP и JPG. В типографиях чаще всего используются первые два, так как последний предполагает собой сжатие с потерей качества.

LZW, он же Lemple-Zif-Welch был разработан еще в 1977-м двумя израильскими математиками, чьи фамилии Лемпель и Зив. Усовершенствованная версия вышла в свет в 1984-м. LZW считается самым «безболезненным» алгоритмом сжатия данных, так как компрессия осуществляется без искажений. Алгоритм LZW довольно прост: происходит поиск и замена одинаковых данных. Строки символов заменяются кодированной информацией. Эти коды могут быть абсолютно любой длины, должно лишь соблюдаться одно условие: эти коды должны содержать больше бит, чем содержится в единичном символе. Лучший результат достигается тогда, когда сжатию подвергаются растровые файлы, имеющие большие площади однородных заливок. В типографиях этот алгоритм считается самым лучшим, так как он способен дать качественное сжатие при отсутствии искажений в файле.

Специалисты по предпечатной подготовке применяют алгоритм сжатия LZW не только тогда, когда работают с файлом формата TIFF. LZW эффективен и при сжатии файлов формата PDF и PostScript.

Алгоритм сжатия ZIP аналогичен тому, что используется в PKZip. Этот метод сжатия также безвреден для исходного файла, то есть, не дает никаких искажений. Помимо TIFF сфера применения охватывает также форматы PDF и PostScript.

Алгоритм сжатия JPEG является простой инкапсуляцией формата JPEG в формат TIFF. Данный алгоритм предполагает собой сжатие с потерей качества.

Потеря качества зависит от установленной степени сжатия. Не все пользовательские приложения предоставляют возможность выбора этого значения пользователю. Однако, формат TIFF позволяет хранить изображения, сжатые по стандарту JPEG, без потерь данных (JPEG-LS).

Формат JPEG-LS изначально разрабатывался для хранения изображений в медицинских целях, то есть для тех случаев, когда важно иметь большое изображение без малейших потерь качества. Как уже говорилось, за основу был взят формат LOCO-I, разработанный в стенах «HP Labs»

Затем он был доработан совместными усилиями «Hewlett-Packard» и «Mitsubishi». Обе компании разрешили использовать их патенты на этот формат без оплаты лицензии, поэтому JPEG-LS можно встретить и в обычных программах для PC.

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

Какой формат изображения лучше?

Формат JPEG

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

Формат JPEG для цифровых камер

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

JPEG почти единственный формат, который использует сжатие с потерями, позволяющий делать небольшие файлы более низкого качества. Есть режим сжатия без потерь — lossless JPEG.

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

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

Формат TIFF

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

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

Формат GIF

Данный формат разработала компания CompuServe в 1987 году для первых 8-битных видеокарт компьютера и предназначался для передачи по dial up (модемному) соединению. В свое время он был самым распространенным форматом в интернете. GIF использует компрессию без потерь LZW, и очень хорошо сжимает изображения, в которых много однородных заливок (баннеры, таблицы, логотипы, схемы).

Глубиной цвета данный формат нас не радует, всего 8 бит (256 цветов максимум) и использовать его для хранения фотографий не рекомендуется (фото имеют 24 битную глубину цвета).

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

Формат PNG

Был создан сравнительно недавно для замены устаревшего GIF (браузеры показывают оба формата), и в некоторой степени более сложного TIFF формата. PNG является растровым форматом с использованием сжатия без потерь, не поддерживает анимацию и может иметь 48 битную глубину цвета.

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

Типов файлов в зависимости от цели использования:

	Фотографические изображения	Графика, логотипы
Свойства	Фотографии 24-битный цвет и 8-бит ч/б	Графика с множеством сплошных цветов, с небольшим количеством цветов (до 256 цветов), с текстом или линиями
Лучшее качество	TIFF или PNG (со сжатием без потерь)	PNG или TIFF (со сжатием без потерь)
Наименьший размер файла	JPEG с высоким коэффициентом качества	TIFF или GIF или PNG (графика / логотипы без градиентов)
Cовместимость (PC, Mac, Unix)	TIFF или JPEG	TIFF или GIF
Худший выбор	GIF 256 цветов (очень ограничен цвет, и размер файла больше чем 24 -разрядного JPEG)	Сжатие JPEG добавляет артефакты, смазывается текст и края линий