Форматы изображений: какой из них выбрать?
Содержание:
- Следует ли волноваться о потере качества изображения
- Описание популярных форматов изображения для сайта
- Тесты сжатия изображения
- PNG-24
- SVG
- JPEG
- DNG (Digital Negative)
- 3 основных формата изображений, используемых в интернете
- Описание популярных форматов изображения для сайта
- Расширение файлов в Linux
- Формат TIFF
- Способы улучшения оптимизации и доставки изображений
- Векторные форматы
- Как узнать размер картинки и зачем это нужно?
- GIF
- JPEG
Следует ли волноваться о потере качества изображения
Изображения в формате JPEG является несовершенной копией исходного изображения, которое можно увидеть через видоискатель камеры. Однако при создании фотографий высочайшего качества разницу увидеть будет трудно.
Во время каждого последующего сохранения файла в формате JPEG качество немного ухудшается, так как вы создаете копию с копии. Насколько ухудшится качество, зависит от уровня сжатия изображения.
Обычно уменьшение качества увидеть трудно, но если изображение несколько раз редактировалось и сохранялось со средним уровнем уплотнения, то, возможно, вы заметите уменьшение четкости и цветопередачи.
Для получения высокого качества изображения следует сохранять в формате JPEG с максимально возможным уровнем качества или использовать формат TIFF.
Описание популярных форматов изображения для сайта
Из описания этих форматов вы поймёте, где и какой формат применять лучше всего на сайте.
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.
Существуют способы обхода этих ограничений, но они не дают использовать формат повсеместно.
Тесты сжатия изображения
Результаты сжатия изображений с помощью первых трех форматов, рассмотренных в статье.
- Изображение 1
- Изображение 2
- Изображение 3
Приведенные ниже результаты значительно различаются из-за форматов изображений без потерь / с потерями.
Изображения в формате HEIF оказались меньше, чем в любом другом формате. Но из-за отсутствия поддержки в настоящее время невозможно интегрировать формат HEIF в веб-приложения.
Формат WebP показал близкие результаты и при этом обеспечивает поддержку браузерами. Для пользователей Chrome или Opera изображения в формате WebP, несомненно, помогут ускорить загрузку.
PNG значительно больше, чем его аналог JPG с потерями. При оптимизации с использованием FLIF экономия составила около 50%. Это делает FLIF отличной альтернативой для тех, кому нужны высококачественные изображения с меньшим размером файла. Но формат еще не поддерживается браузерами.
PNG-24
PNG-24 — формат, аналогичный PNG-8, но использующий 24-битную палитру цвета. Подобно формату JPEG, сохраняет яркость и оттенки цветов в фотографиях. Подобно GIF и формату PNG-8, сохраняет мелкие детали изображения.
Особенности
- Использует примерно 16,7 миллионов цветов, из-за чего этот формат применяется для полноцветных изображений.
- Поддерживает многоуровневую прозрачность, это позволяет создавать плавный переход от прозрачной области изображения к цветной, так называемый градиент.
- Из-за того, что используемый алгоритм сжатия сохраняет все цвета и пиксели в изображении неизменными, по сравнению с другими форматами у PNG-24 конечный объём файла с фотографией получается наибольшим.
Область применения
Фотографии, рисунки, содержащие прозрачные участки, рисунки с большим количеством цветов и чёткими краями изображений.
SVG
SVG (Scalable Vector Graphics, масштабируемая векторная графика) — это векторный формат, в отличие от предыдущих растровых форматов. Растровое изображение состоит из набора разноцветных пикселей, которые для человеческого глаза сливаются в единую картинку. Векторное же строится из набора объектов, вроде линий, кривых, прямоугольников, окружностей и др. При увеличении масштаба векторное изображение увеличивается пропорционально, сохраняя своё высокое качество.
Особенности
- Надписи остаются обычным текстом, их можно выделять, копировать, они читаются поисковыми системами при обходе сайта.
- Рисунки можно масштабировать произвольно, сохраняя при этом высокое качество.
- Формат не поддерживается браузером Internet Explorer до версии 9.0.
Масштабируемые изображения, рисунки, логотипы, иллюстрации, графики и диаграммы.
JPEG
Этот формат прошел проверку временем, так как появился в далеком 1992 году. Сжатие этого формата происходит следующим образом. Сначала изображение из цветового пространства RGB (от английских “red” – «красный», “green” – «зеленый» и “blue” – «синий») преобразуется в пространство YUV, которое основано на характеристиках яркости и цветности; это пространство наиболее близко к тому, как воспринимает цвета человек. Затем изображение разделяется на пиксельные блоки размером 8х8, и каждый блок раскладывается на составляющие цвета, частота которых затем подсчитывается. Если говорить с точки зрения математики, то получается, что подобное сжатие переносит изображение из пространственной области в частотную область.
В некотором смысле такое сжатие позволяет отказаться от части информации о яркости и цветах. То, какая часть информации будет убрана, напрямую зависит от качества изображения, которое вы хотите получить в итоге.
Из этого можно сделать вывод, что лучше всего данный формат подходит для сжатия полутоновых изображений: изображений с огромным количеством цветов и мягкими переходами между ними. Другими словами, JPEG подразумевает, что ваше изображение будет так или иначе похоже на фотографию.
А вот для изображений с четкими краями и детализированными текстурами JPEG, наоборот, не подходит: четкие грани будут стерты, и изображение в целом получится размытым.
Ниже вы видите пример изображений в формате JPEG:
DNG (Digital Negative)
В наши дни чуть ли не каждая камера использует собственный формат для получения сырых файлов. Даже камеры того же производителя часто используют разные форматы, а это означает, что программное обеспечение должно быть в состоянии прочитать файлы с различных камер и форматов. В результате проблема, с которой сталкиваются разработчики программного обеспечения, состоит в том, как управлять и постоянно предоставлять обновления на их программные продукты так, чтобы они могли читать все форматы камер.
Итак, DNG. Этот формат файла, созданный Adobe, является попыткой создать стандартный формат файлов для всех производителей и камер. Он предложен в качестве главного формата сырых файлов или как альтернативу родному формату производителя. Одной из проблем хранения файлов в их оригинальном формате является то, что в ближайшие годы вы возможно не будете иметь к ним доступа, так как они специфичны для определенной камеры и производителя. Но использование Adobe DNG Convertor означает, что вы можете сохранять ваши файлы в формате DNG для максимальной безопасности. Это на самом деле добавляет еще один шаг в процессе постобработки, на что потребуется дополнительное время. Однако, если вы используете такую программу, как Lightroom, то она поможет конвертировать большие партии файлов так, что вам не придется делать это вручную.
Преимущества
- Возможность использования таких редакторов, как Lightroom и Photoshop
- Вероятно, более безопасный вариант в долгосрочной перспективе, чтобы защититься от невозможности открыть или иметь доступ к файлам
Недостатки
Необходимо дополнительное время для конвертации исходных файлов камеры в DNG (если в вашей камере нет возможности создавать файлы сразу в этом формате)
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 для статических изображений, как правило, не рекомендуется.
Описание популярных форматов изображения для сайта
Из описания этих форматов вы поймёте, где и какой формат применять лучше всего на сайте.
JPEG
JPEG или JPG – один из самых популярных форматов изображений для сайтов. Формат поддерживает миллионы цветов, что и даёт ему лидирующую позицию в представлении фотографий и картинок на сайте.
Изображения в этом формате достаточно хорошо оптимизируются практически без потери качества, что позволяет получить файл меньшего размера без визуальной потери качества. Следует помнить, что каждая последующая оптимизация снижает качество.
Файлы этого формата поддерживаются всем устройствами и браузерами, что ещё раз подтверждает его популярность и позволяет не беспокоиться за проблемы с отображением на сайтах.
Большим недостатком этого формата является отсутствие прозрачности. То есть, комбинировать изображения в таком формате не получится. Для таких задач лучше использовать следующий формат.
PNG
Этот формат использует алгоритм сжатия без потери качества. По количеству цветов и уровню прозрачности доступен в двух видах 8 и 24-бит. Оба поддерживают прозрачность.
8-битный пользуется малой популярностью, а вот 24-битный широко используется для различных изображений на сайте. За счёт прозрачности позволяет создавать комбинированные изображения. Часто используется для создания анимированных кнопок, иконок, css-спрайтов, где необходим эффект прозрачности.
Изображения в формате PNG можно много раз оптимизировать, редактировать – оно сохранит первоначальное качество.
Формат также поддерживается всеми браузерами и устройствами, что гарантирует его отображение на любом экране.
По качеству изображения выглядят лучше, чем JPG, но вес файла будет больше. Это нужно учитывать при размещении файлов на сайте.
GIF
Это 8-битный формат, поддерживающий 256 цветов, прозрачность и анимацию. За счёт поддержки малого количества цветов, вес файла тоже минимальный.
Формат не подходит для фотографий и изображений с широким диапазоном цветов.
Зато широко используется при создании GIF-анимаций, баннеров, кнопок, иконок и так далее.
В современных сайтах этот формат используется всё реже.
Далее поговорим об относительно свежих форматах SVG и WebP, которые не так популярны, но набирают популярность и поддержку, и как нельзя лучше подходят под требования скорости загрузки и адаптивности сайтов.
SVG
Это формат векторных файлов на основе XML. Формат стал набирать популярность совсем недавно, так как ранее он слабо поддерживался в браузерах. И из-за проблем отображения никто не торопился его использовать.
На сегодняшний день SVG поддерживается всеми современными браузерами. Но, проблемы с отображением все, же встречаются.
Наиболее часто используют этот формат для простых изображений, таких как логотипы, элементы дизайна и так далее. Неприменим для фотографий.
Формат SVG имеет малый вес, отлично масштабируются, обеспечивая чёткость изображения на любом разрешении экрана, поддерживает анимацию, можно управлять через CSS и размещать в HTML, сокращая количество запросов.
WebP
Формат с открытым исходным кодом, разработан Google специально для интернета. Сегодня YouTube использует преобразование миниатюр для видео в формат WebP.
Формат обеспечивает превосходное сжатие и поддерживает прозрачность. Он сочетает в себе преимущества JPG и PNG форматов без увеличения размера файла.
Но, несмотря на преимущества формата, он поддерживается не всем браузерами, например, IE, Edge, Firefox и Safari.
Существуют способы обхода этих ограничений, но они не дают использовать формат повсеместно.
Расширение файлов в Linux
Файлы в Linux могут иметь расширения, которых вы ранее не встречали, могут иметь не одно расширение, или не иметь его вовсе. Имена файлов могут начинаться с символа «.», а также могут включать другие символы, в том числе пробелы.
Сжатые и архивные файлы
- .bz2 — файл, сжатый при помощи bzip2
- .gz — файл, сжатый при помощи gzip
- .tar — файл, заархивированный при помощи tar (сокращение от tape archive), также известный как tar файл
- .tbz — файл, заархивированный tar и сжатый bzip
- .tgz — файл, заархивированный tar и сжатый gzip
- .zip — файл, сжатый при помощи алгоритма сжатия ZIP, обычно используемого приложениями MS-DOS. Для Linux более привычен алгоритм сжатия gzip, так что архивы .zip в Linux достаточно редки
Форматы файлов
- .au — аудиофайл
- .gif — изображение формата GIF
- .html/.htm — HTML-файл
- .jpg — изображение формата JPEG
- .pdf — документ в электронном виде; PDF расшифровывается как Portable Document Format (формат переносимых документов)
- .png — изображение формата PNG (сокращение от Portable Network Graphic — переносимая сетевая графика)
- .ps — файл PostScript; формат для печати
- .txt — обычный текстовый файл ASCII
- .wav — аудиофайл
- .xpm — файл изображения
Системные файлы
- .lonf — конфигурационный файл. Конфигурационные файлы часто имеют также расширение .cfg
- .lock — файл блокировки; отмечает программу или устройство как уже используемое
- .rpm — файл менеджера пакетов Red Hat Package Manager, используемый для установки программного обеспечения
Файлы программ и скриптов
- .c — файл с исходным текстом программы, написанной на языке С
- .cpp — файл с исходным текстом программы, написанной на языке C++
- .h — заголовочный (так называемый header) файл для программы, написанной на языке C или C++
- .o — объектный файл
- .pl — Perl-скрипт
- .py — Python-скрипт
- .so — файл библиотеки
- .sh — shell-скрипт
- .tcl — TCL-скрипт
Определение типа файла
Расширения файлов используются не всегда и часто используются неверно. Что делать, если файл не имеет расширения или оно не соответствует типу файла?
В этом случае может быть полезна команда file.
Например, вам попался файл с названием example без расширения. Используя команду file, вы сможете увидеть тип файла:
file example example: ASCII text Из этого примера видно, что файл example является текстовым. Любой файл, распознанный как текстовый, может быть прочитан при помощи команд cat, more или less или открыт при помощи текстовых редакторов, например, gedit или vi. ##!i##
Скрытые файлы
Файлы, название которых начинается с точки, называются скрытыми файлами или «dot» файлами. Увидеть такие файлы можно и с помощью графического файлового менеджера, такого как Наутилус, и из оболочки командной строки. В Наутилусе выберите Вид (View)->Показывать скрытые файлы (Show Hidden Files). В командной строке воспользуйтесь для просмотра содержимого каталога командой ls -al. Просматривая скрытые файлы в своем домашнем каталоге, вы можете удивиться их количеству. Эти скрытые файлы обычно бывают конфигурационными файлами приложений. Их прячут, чтобы предотвратить их случайное изменение и не загромождать окно просмотра домашнего каталога.
Пробелы в именах файлов
Хотя имена файлов в Linux и могут содержать пробелы, управление такими файлами из командной строки может вызвать некоторые затруднения. Командная строка воспринимает пробел как разделитель между именами файлов или командами и может неверно истолковать такие имена. При совершении действий над файлами, содержащими в имени пробелы, такие имена файлов заключаются в кавычки.
Символы в именах файлов
Имена файлов могут содержать знаки пунктуации. Однако имейте в виду, что эти специальные знаки имеют в командной строке специальное назначение и их использование может вызвать ошибку. Обычно рекомендуется не использовать в именах файлов специальные символы. Если вы все же решили включить в имя файла какой-то специальный символ, при совершении действий над таким файлом необходимо заключить его имя в кавычки.
Существуют специальные символы, которые не могут входить в имя файла. Например, нельзя включить в имя файла символ «/», потому что так обозначается каталог. Нельзя назвать файл «.», поскольку так обозначается текущий каталог, или «..», поскольку так обозначается каталог, расположенный на уровень выше текущего.
Файлы с несколькими расширениями
Имена файлов могут иметь несколько расширений. Знак «.» может находиться в середине имени файла и не являться границей между собственно именем и расширением, или же файл действительно может иметь не одно расширение. Несколько расширений может появиться в результате применения к файлу нескольких программ или команд. Чаще всего это происходит при сжатии файлов.
Формат TIFF
TIFF (Tagged Image File Format) также является распространенным форматом изображений. Он использует алгоритмы сжатия без потерь, а также может сохранять данные и без сжатия. Файлы формата TIFF по объему значительно больше, чем файлы JPEG. Так как сжатие происходит без потерь либо не происходит вовсе, данный формат обеспечивает более высокое качество изображения и часто применяется для качественной подготовки изображений к печати, особенно большим форматом.
Достоинства формата: высокое качество изображения, использование сжатия данных без потерь
Недостатки формата: очень большой объем файлов, в 8-10 раз больше, чем изображений в формате JPEG. Если используется глубина цвета 16 бит, объем файла увеличивается еще вдвое.
Способы улучшения оптимизации и доставки изображений
Оптимизация изображения считается незаменимой для повышения производительности сайта. В Google Dev Guide есть исчерпывающая статья на эту тему, поэтому далее будет приведен лишь краткий список советов по ускорению загрузки изображений.
Реализация поддержки новых форматов изображений
Новые графические форматы еще не поддерживаются повсеместно. Поэтому сайт должен определять, какие форматы поддерживает клиент, и предоставить ему лучший вариант.
Использование CDN
Сеть доставки контента (CDN) ускоряет загрузку изображений, кэшируя их в своей сети распределенных серверов. Это может повысить скорость работы сайта. Особенно если ваши пользователи находятся далеко от исходного сервера.
Использование CSS вместо изображений
Устаревшие браузеры не поддерживают тени изображений и закругленные углы. Поэтому веб-разработчики привыкли отображать определенные элементы, такие как кнопки, в виде изображений. Вместо них необходимо использовать CSS, когда это возможно.
Проверьте настройки кэша изображений
Для изображений, которые меняются не часто, можно использовать кэширования HTTP, чтобы сократить время загрузки для постоянных посетителей.
Когда пользователь посещает ваш сайт в первый раз, его браузер кэширует изображение, чтобы его не нужно было загружать снова при последующих сеансах. Эта также снизит затраты на пропускную способность сервера.
Изменение размера изображений для разных устройств
Используйте атрибут srcset, чтобы браузер определял, какой размер изображения он должен предоставлять, исходя из размеров и разрешения клиентского устройства.
Векторные форматы
GIF, JPEG, PNG, и WebP — растровые форматы, основанные на дискретном (пиксельном, точечном) представлении изображения, в то время как векторные форматы основаны на математических формулах (геометрическом представлении фигур). Подробнее о векторной графике можно прочитать в статье «Растровая и векторная графика».
SVG (Scalable Vector Graphics)
SVG переводится как — масштабируемая векторная графика. Формат существует с 1999 года.
Размер объектов SVG намного меньше размера растровых изображений, а сами изображения не теряют в качестве при масштабировании. В отличие от растровых форматов мы можем взаимодействовать с изображениями в формате SVG — при помощи CSS можно изменять параметры графики: цвет, прозрачность или границы, а при помощи JavaScript — анимировать изображение.
SVG поддерживается почти всеми браузерами за исключением Internet Explorer 8 и ниже, но и это можно решить подключением JavaScript-библиотек, например, SVGeezy.
Формат SVG отлично подходит для малоцветных схем, логотипов и иконок.
Примеры SVG (источники изображений: Roundicons Freebies www.flaticon.com/authors/roundicons-freebies
и HTML Academy)
Таким образом, формат SVG подходит если:
- нужно анимировать части изображения;
- изменять цвет элементов изображения;
- необходимо масштабировать изображение без потерь.
Как узнать размер картинки и зачем это нужно?
Из-за особенностей различных форматов каждая конкретная картинка может оказаться хорошим вариантом в одной ситуации, и плохим в другой. Кроме того, узнав размер картинки, вы сможете определиться, стоит ли загружать ее на сайт — в зависимости от того, сколько весит изображение, оно может положительно или отрицательно влиять на поведенческие факторы.
Слишком большие картинки будут мешать быстрой загрузке сайта, и тем самым повышать процент отказов, ухудшая рейтинг сайта в поисковой выдаче
Низкокачественные, неинформативные и слабо привлекающие внимание пользователей картинки также негативно скажутся на продвижении интернет-ресурса в поисковых системах
Использование большого количества фотографий также может ухудшить ранжирование сайта, поэтому следует грамотно подбирать размеры и сжимать необходимые изображения, стараясь не потерять в качестве.
Вывод: знать размер картинок — важно, потому что их вес влияет на скорость загрузки сайта, а она в свою очередь оказывает влияние на продвижение
GIF
На заре зарождения интернета, если изображение не было формата JPEG, значит, оно было формата GIF. GIF использует для сжатия алгоритм LZW (Lempel-Ziv-Welch – алгоритм Лемпеля — Зива — Велча), который намного проще, чем технология сжатия JPEG. По сути, этот алгоритм сканирует данные изображения и создает короткий код для тех участков, которые повторяются. Поэтому GIF подходит для сжатия изображений, которые состоят из идентичных или повторяющихся частей. Это изображения с четкими формами, которые имеют всего несколько цветов с резкими границами между ними. Именно такие изображения удастся сжать при помощи GIF наиболее эффективно и без потерь.
Несмотря на то, что GIF достаточно простой формат, у него есть пара интересных характеристик – это прозрачность и анимация.
А вот для сжатия изображений с некоторым разнообразием оттенков GIF не подходит: этот формат поддерживает только 8-битный цвет, то есть максимум 256 цветов на одном изображении. Поэтому если вы решите сжать при помощи GIF изображение с широкой цветовой палитрой, то в итоге можете получить постеризованную картинку со значительным падением глубины цветности, которая будет выглядеть ужасно.
Пример изображений в формате GIF:
Обобщая, можно отметить, что JPEG и GIF имеют свои сильные и слабые стороны. Во время зарождения интернета это были основные используемые форматы. Однако позже некоторые энтузиасты решили попробовать создать новый формат для сжатия изображений без потерь.
JPEG
Это вероятно наиболее известный формат изображений, и тот, который предоставляют большинство цифровых камер в качестве готового продукта. Вы должны помнить о том, что файлы JPEG быстро сжимаются в камере и таким образом приводят к потере деталей и качества. Они, по сути, созданы для того, чтобы сохранять столько изображений на карте памяти, сколько возможно. Некоторые камеры предусматривают варианты качества файла JPEG (например, низкий, средний и высокий). В основном это означает, что чем лучше качество вам надо, тем меньше камера сожмет оригинальную фотографию.
В целом JPEG используется для таких целей:
-когда фотографии предназначены для личного использования, для социальных сетей, альбомов и печати в маленьком формате, но никак не в большом.
-когда вы не намереваетесь подвергать снимок интенсивной обработке (например, с помощью Photoshop);
-для отправки изображений по электронной почте (без цели в последствии распечатать их в большом формате).
Преимущества
- Маленький размер означает, что на карте памяти поместится больше фотографий
- Более быстрая передача файлов ввиду маленького размера
Недостатки
- Потеря качества из-за сжатия изображения
- Меньше возможностей для манипуляций с изображением в программах для редактирования фото.