В каком формате лучше качество картинки?

Форматы изображений — JPEG, TIFF, PNG, GIF. Какой использовать?

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

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

С развитием компьютеров и интернета появлялись новые форматы для записи изображений в файлы. Каждый формат имеет свои преимущества и недостатки.

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

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

Формат 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 добавляет артефакты, смазывается текст и края линий

Итоги

Какой какой формат изображения лучше и как выбрать тип файла в зависимости от области использования:

• Лучшая компрессия — с потерями для маленьких файлов — JPEG, или без потерь для наилучшего качества изображений — TIFF и PNG
• Полноцветный RGB для фотографий — TIFF, PNG, JPEG
• Прозрачность или анимация для использования в графике — GIF и PNG
• Документы, штриховые рисунки, многостраничные текстовые, факс, и т.д. — TIFF
• Полиграфия где используется цветовая модель CMYK — TIFF

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

Так как Вы заинтересовались форматом изображений и их отличиями, могу предположить, что одна из Ваших сфер деятельности связана с сайтами или лендингами. Рекомендую Вашему вниманию бесплатную книгу «Анатомия продающих лендингов». Очень полезная книга из которой Вы узнаете:

• 4 элемента первого экрана продающего лендинга
• 3 простые и работающие формулы продающего заголовка
• анатомия конверсионной страницы

Скачивайте книгу «Анатомия продающих лендингов» и применяйте на практике полученные знания.

Чем отличаются форматы изображений и зачем они нужны

Чем отличаются форматы изображений и зачем они нужны

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

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

В статье будет использоваться одна и та же фотография для сравнения. В браузере нельзя отобразить её в формате RAW, но просмотр высококачественных фотографий в формате JPEG или PNG должен дать представление о том, как выглядит оригинал. Также для сравнения необработанный файл этой фотографии имеет размер 12,4 МБ.

Наиболее распространённый формат изображений JPEG (или JPG) является стандартом организации Joint Photographic Experts Group и часто используется для публикации фотографий и изображений текста в интернете. Формат поддерживает 24 бита на пиксель, по 8 для зелёного, синего и красного, что делает этот формат «truecolor», который может отображать более 16 000 000 цветов.

13 сентября – 9 октября, Санкт-Петербург и онлайн, Беcплатно

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

JPEG высокого качества (качество установлено на 100), размер: 471 КБ

JPEG среднего качества (установлено качество 50), размер: 68 КБ

JPEG низкого качества (качество установлено до 20), размер: 32 КБ

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

Graphics Interchange Format (GIF) допускает 8 бит на пиксель, по три на красный и зелёный и два на синий. Поэтому GIF-файлам доступны 256 цветов, хотя можно получить и больше, используя несколько цветовых блоков с различными 256-цветными палитрами. При сжатии без потерь GIF-файлы могут идеально воспроизводить свои ограниченные цветовые палитры при многократном повторном сжатии.

Вот тестовая фотография в кодировке GIF:

Размер GIF: 194 КБ

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

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

Тип файла Portable Network Graphics, предназначенный для замены GIF, — это ещё один формат сжатия без потерь. Он содержит значительно больше информации, чем его предшественник: 24 или 32 бита на пиксель. 24-разрядная версия содержит информацию RGB, а 32-разрядная использует цветовое пространство RGBA. «A» в RGBA означает «альфа», что обеспечивает разные уровни прозрачности изображения (клетчатый фон, как на рисунке ниже, обычно указывает на прозрачность).

Поскольку PNG-файл содержит гораздо больше информации, он будет немного больше, чем JPEG или GIF.

Размер PNG: 1,5 МБ

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

The Tagged Image File Format изначально разрабатывался для сканеров и становился всё более сложным по мере того, как сканеры переходили от чёрно-белого к полутоновому и до полноцветного изображения. Теперь это широко используемый полноцветный тип файла. TIFF-файлы могут быть сохранены в сжатом или несжатом виде, а используемое сжатие может быть с потерями или без. В большинстве случаев будет использоваться сжатие без потерь, хотя, если размер важен, можно пожертвовать качеством.
Поскольку TIFF технически является обёрткой или контейнером файла, он может сохранять изображения с различными битами на пиксель, предоставляя вам возможность иметь очень большое количество цветов, как это было бы с JPEG или PNG.

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

Несжатый размер TIFF: 2,2 МБ

Размер сжатого файла TIFF: 1,6 МБ

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

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

BMP (bitmap) — это, прежде всего, формат для Windows, и стандарт поддерживается Microsoft. Как и TIFF, он может хранить произвольное количество бит на пиксель, вплоть до 64, а значит, он содержит много информации об изображении. Этот формат может содержать данные о прозрачности, но некоторые приложения Microsoft не позволяют их читать.

Короче говоря, если у вас есть BMP, конвертируйте его во что-то другое. Всё будет работать лучше.

Размер BMP: 1,1 МБ

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

Короткий ответ: для большинства целей PNG — очень достойный вариант. Особенно если изображения большого размера. Например, для печати фотографий размером 8×10 и более. Различие между типами файлов наиболее очевидны на напечатанных фотографиях. А сжатие без потерь означает, что качество будет поддерживаться в течение нескольких циклов сжатия.

JPEG высокого или даже среднего качества, скорее всего, подойдёт, если вам нужна более высокая степень сжатия, например для отправки фотографий по электронной почте.
TIFF в основном полезен, если вы знаете, как настроить определённые параметры. Следует избегать как GIF, так и BMP (если, конечно, вы не создаёте анимированные GIF). Рекомендуется хранить RAW-файлы, чтобы вы всегда могли редактировать свои фотографии прямо из исходника.

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

Перейти к регистрации

Форматы изображений: какой из них выбрать?

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

• Форматов изображений много, но важны лишь некоторые из них
  • Растровые и векторные изображения
  • Выбираем правильные форматы изображений
  • Растровые форматы
    • JPEG
    • GIF
    • PNG
    • TIFF
    • PSD
  • Векторные форматы
    • EPS
    • AI
  • Другие форматы
    • PDF
  • Конвертируем разные типы файлов

Форматов изображений много, но важны лишь некоторые из них

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

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

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

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

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

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

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

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

Выбираем правильные форматы изображений

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

Растровые форматы

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

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

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

Кажется, никто и никогда так и не произнес название этого формата правильно. Дизайнеры часто четко произносят первую букву G или диктуют все три буквы по очереди, однако его создатель, Стив Уилхайт , утверждает, что правильно произносить название как « джив ». Хотя его аббревиатура расшифровывается как Graphics Interchange Format (« формат для обмена изображениями »), а сам он главным образом используется в веб-дизайне.

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

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

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

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

TIFF ( иногда TIF ) – формат файла без сжатия, а это значит, что при сохранении он вообще не подвергается компрессии. TIFF также поддерживает послойную структуру.

Этот формат зачастую называют « готовым к печати » хотя большинство принтеров лучше работают с родными типами файлов вроде AI и PSD .

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

PSD представляет собой родной формат программы Adobe Photoshop . Это значит, что беспрепятственно редактировать эти файлы можно только в Photoshop .

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

Векторные форматы

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

Файлы в EPS -формате готовы к печати, однако, это не тот формат, который нужно использовать в веб-дизайне. Зачастую после утверждения дизайна страницы его составные элементы конвертируются в PNG, JPG и GIF .

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

AI – еще один брендовый векторный формат от Adobe , предназначенный для работы в программе Illustrator . AI -файл нельзя встраивать в веб-страницы, и это не тот формат, который используется для отправки проектов клиенту. Но он хорошо подходит для внутреннего использования и для печати.

Другие форматы

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

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

Однако PDF больше подходит для печатных продуктов вроде книг, брошюр или листовок.

Конвертируем разные типы файлов

В процессе работы над дизайном печатной продукции, вам, возможно, придется прыгать от одного формата к другому. Иногда нужно поместить JPG -фотографии и EPS -логотип в общий проект, работа над которым ведется в PSD -файле в Photoshop .

Хорошо то, что у каждого формата изображений есть сильные стороны, и опытный дизайнер знает, как из них извлечь выгоду. Велика вероятность, что один и тот же элемент дизайна понадобится вам в разных форматах: основной исходник логотипа будет храниться в EPS -формате, его PNG -версия будет использоваться на сайте, а анимированная GIF -версия припасена для особых случаев.

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

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

Конвертирование растрового изображения в векторное – это целая наука. Нет простого способа конвертировать пиксели растрового изображения в формулы, генерирующие векторы. Самый проверенный способ – это просто перерисовать картинку при помощи векторов.

Форматы изображений для веба

29 сентября 2016

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

Растровые форматы

Для начала рассмотрим форматы, которые относятся к растровой графике: GIF, JPEG, PNG и WebP. Подробнее о растровой графике можно прочитать в статье «Растровая и векторная графика».

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

GIF (Graphics Interchange Format)

Формат был разработан компанией CompuServe в далёком 1987 для передачи растровых изображений по интернету. GIF имеет цветовую палитру, состоящую из 256 цветов. Алгоритм GIF выбирает 256 наиболее используемых в исходном изображении цветов, а все остальные оттенки создаются путём подмешивания — подбора соседних пикселей таким образом, чтобы человеческий глаз воспринимал их как нужный цвет. По этой причине GIF не подходит для хранения полноцветных изображений и фотографий.

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

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

Пример изображения в формате GIF (источник изображения: giphy.com)

Таким образом, формат GIF подходит если:

• изображение не многоцветное;
• нужна простейшая прозрачность;
• нужна анимация.

JPEG (Joint Photographic Experts Group)

Формат JPEG получил своё название от объединённого комитета экспертов по фотографии, который и создал этот стандарт в конце 80-х — начале 90-х годов. Он был разработан для сжатия и хранения полноцветных фотографий. Поддерживает более 16 миллионов цветов.

Формат JPEG сжимает изображения с потерей качества. Алгоритм сжатия основан на разбиении исходного изображения на квадраты 8×8 пикселей, и последующей их группировке. Можно получать JPEG изображения очень маленького веса, но только за счёт ухудшения качества картинки, можно получить и очень качественные JPEG, но тогда картинка будет слишком тяжёлой. Поэтому главная задача при работе с JPEG — подобрать такой уровень качества, чтобы вес был небольшой и качество картинки было приемлемым (обычно, это диапазон от 60 до 70, но нужно тестировать на каждой картинке).

Пример изображения в формате JPEG с неоптимальной степенью сжатия. Качество: 10. Вес: 20 килобайт.

Первая картинка весит 20 килобайт. Это круто, очень мало, но для этого мы задали уровень качества 10 и картинка выглядит плохо.

Пример изображения в формате JPEG с оптимальной степенью сжатия. Качество: 60. Вес: 65 килобайт.

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

Пример изображения в формате JPEG с минимальной степенью сжатия. Качество: 95. Вес: 169 килобайт.

Для третьей картинки мы задали уровень качества 95, из-за чего её вес стал 169 килобайт. Вторая и третья картинка внешне почти неразличимы, однако вторая картинка весит на 104 килобайта легче.

Таким образом, формат JPEG лучше подходит для:

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

PNG (Portable Network Graphics)

PNG является относительно недавним форматом, который был введён как альтернатива для GIF-файлов.

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

Формат имеет две вариации: PNG8 и PNG24. PNG8 может хранить лишь 256 цветов, а PNG24 использует уже более 16 миллионов цветов.

Главная особенность формата PNG — поддержка альфа-прозрачности, то есть каждому пикселю в отдельности можно задать свою степень прозрачности.

Пример изображения в формате PNG (источник изображения: Wikimedia Commons)

Итак, формат PNG подходит для:

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

WebP — новый формат, созданный и развиваемый с 2010 года компанией Google.

Главная цель этого проекта — ещё больше уменьшить вес при сохранении такого же качества.

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

• сжимает изображения без потерь лучше, чем PNG (на 26% по данным Google);
• сжимает изображения с потерями лучше, чем JPEG (на 25–34% по данным Google);
• поддерживает прозрачность (альфа-канал).

Иногда WebP сжимает изображение даже лучше, чем заявляет Google.

JPEG: 44 килобайт WebP: 26 килобайт. Если изображение не видно, значит ваш браузер не поддерживает формат WebP.

Ввиду относительной новизны формата, не все браузеры умеют с ним работать. На сегодняшний день WebP поддерживается только Chrome, Opera и Firefox.

Векторные форматы

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)

JPEG или RAW — что выбрать фотографу?

На всех этапах создания фотографии необходимо выбирать формат для сохранения. До момента выхода снимка в «свет» он 4 раза подвергается сохранениям:

• в момент съемки на карту памяти камеры;
• при конвертации с карты памяти на ПК для редактирования;
• после редактирования для сохранения на ПК;
• для передачи фото зрителям – социальные сети, клиенты, фотостоки.

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

Какие бывают графические форматы

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

• RAW – общее название для всех камер, обозначающее «сырой» файл, необработанный. У каждого производителя такой формат носит собственное название и расширение. Самый популярный на сегодняшний день для съемок.

• JPEG, JPG – второй по популярности для сохранения кадров в процессе съемок, кадр «весит» меньше, не сильно теряя в качестве, но с постобработкой уже будут трудности. Формат лишает фотографа возможностей подправить снимок по многим параметрам. Для хранения и передачи фотографий используется чаще остальных во много раз.
• TIFF – отличный вариант для сохранения большого количества информации, сжимает кадр почти без потерь, но снимок все равно «весит» достаточно много. Для длительной фотосессии понадобится куча места и карт памяти. Аббревиатура расшифровывается, как Tagged Image File Format, формат позволяет редактировать снимки по всем параметрам.
• PNG – формат для хранения и передачи растровых изображений без значительно потери в качестве. Было разработан для расширения возможностей GIF-формата. Глубина цвета у PNG до 48 бит, можно сохранять только объект без фона. Отличный вариант для хранения и редактирования снимков.
• GIF – хорошо сжимает снимки, но для работы с большими изображениями или для редактирования снимков он мало подходит. Достаточно простой формат для передачи растровых изображений с глубиной цвета не более 8 бит. GIF поддерживает анимацию, такие движущиеся картинки часто называют «гифками».

• PDF отличный вариант для хранения ряда снимков одним файлом. В таком формате сохраняют фотокниги, слайды, фотографии с одной фотосессии. Отличный помощник для передачи офлайн изображений в электронном виде. Разработан компанией Adobe Systems для передачи снимка в оригинальных цветах и без потери внешнего вида. Не подходит для фотографов, особенно для работы с изображениями большого размера, практически не поддается редактированию.
• PSD создается программой Adobe Photoshop и представляет собой редактируемый файл, состоящий из слоев со всеми наложенными эффектами, масками, текстом. Отличный вариант для передачи и хранения изображения, если подразумевается его дальнейшая обработка.

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

Особенности JPEG-формата

Огромным и главным плюсом формата JPEG является его универсальность – абсолютно все редакторы и программы способны читать его. Сохраненные снимки в сети или на ПК не исключение. На этом и стоит его популярность, в 80% случаев передачи графических данных между пользователями происходят с использованием формата JPEG. Многие фотографы даже применяют его для съемки, когда нужно значительно сэкономить время на сохранение одного кадра и место на карте памяти. Но у JPEG есть и существенные недостатки, заставляющие выбирать RAW или TIFF.

Плюсы формата JPEG

Главная задача создателей формата была сжать снимки до оптимального уровня без потери качества. Судя по распространению изображения в jpeg у них получилось. Какие основные преимущества имеет формат:

• Снимки готовы к печати или передачи сразу после съемок, их можно напрямую выводить на экран ПК, отправлять на принтер без конвертирования и просматривать на экране в реальном их виде;
• На дисплее камеры будут отображаться «правильные» цвета, именно таким образом картинка выглядит для матрицы, недочеты можно изменить в ходе съемки;
• Ручная настройка камеры позволит выбрать параметры в процессе съемки – баланс белого, шумоподавление, резкость, насыщенность и контрастность;
• «Вес» снимков значительно меньше, иногда даже в 2-3 раза, чем при сохранении в RAW или TIFF;
• После съемок вы сможете открыть файл практически в любой программе для просмотра или редактирования;

Минусы формата JPEG

Но без минусов или неудобств в цифровом мире невозможно обойтись. Есть и существенные недостатки:

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

Особенности RAW-формата

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

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

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

• Самое главное неудобство – необходимость конвертации снимков, без этого нельзя даже посмотреть изображение в нормальном виде;
• «Вес» каждого кадра не позволяет наснимать тысячи фотографии быстро, и понадобится много места для их хранения;
• Конвертация снимков требует времени и наличия специализированных программ, что значительно замедляет процесс работы с ними.

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

10 причин снимать в RAW

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

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

Ступенчатая яркость при съемке. Камера предоставляет возможность использоваться все ступени от белого до черного в пользу хорошего снимка. JPEG записывает до 8 бит на пиксель (256 уровней яркости), тогда как RAW предоставляет 12-14 бит, а это до 16 тыс. уровней. Такой широкий диапазон дает фотографу возможности для неограниченных действий в области света и теней на снимке.

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

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

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

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

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

Возможность выбрать цветовую схему. Для сохранения снимка на ПК, для передачи их на печать или для размещения их в социальных сетях может потребоваться разный уровень цветопередачи. К примеру, ProPhoto RGB или Adobe RGB.

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

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

Какой же формат выбрать?

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

• Для съемок и сохранения кадров в памяти камеры – однозначно RAW лучший. Но для тайм-лапса или быстрых щелчков затвора лучше слегка потерять в качестве, но не упустить главного, тут «спасет» JPEG.

Для редактирования и оформления – PSD, RAW, TIFF на выбор, кому как удобно.

Для хранения на ПК – JPEG пока уверенно держит пальму первенства, позволяет компактно складывать снимки, не теряя в качестве. То же самое и для сохранения фото в аккаунты в социальных сетях. Формата JPEG хватит в полной мере.

Для передачи данных – JPEG, опять-таки, и GIF. Они сжимают снимок до приемлемых размеров, не сильно портят при этом изображение.

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

Улучшение скорости загрузки сайта. Часть 1. Изображения

Скорость загрузки сайта напрямую влияет на поведенческие факторы ваших пользователей — они не любят долго ждать. На основе аналитики поисковых сервисов, при ожидании более 4 секунд только половина потенциальных посетителей останется на Вашем сайте, более 8 секунд — только четверть. Более того поисковые системы учитывают скорость загрузки сайта при распределении мест в топе. Выходит, что чем быстрее загрузится Ваш сайт тем больше пользователей зайдет на сайт и тем больше пользователей совершат на нем целевое действие — оставят заявку, купят товар, воспользуются вашей услугой. Таким образом скорость загрузки сайта напрямую влияет на его конверсию.

Стоит отметить, что есть очень хороший сервис от компании Google, который позволяет оценить скорость загрузки Вашего сайта для компьютеров и мобильных устройств и дать Вам различные подсказки, Lighthouse. Вы можете воспользоваться Lighthouse онлайн через Page Speed Insights или через браузер Google Chrome в инспекторе во вкладке Audits. Если Вы когда-нибудь пробовали оценить свой сайт через этот сервис, то вероятно могли заметить, что изображения оказывают один из самых больших эффектов на скорость загрузки сайта. Довертись этому сервису!

Многие разработчики игнорируют важность и необходимость улучшения скорости загрузки сайта, бросают эту идею в черный ящик и никогда больше его не открывают. Потому что нет никакой уверенности, что их усилия принесут какой-нибудь результат. Сегодня я расскажу Вам о некоторых вещах по улучшению производительности, которые любой (разработчик) может реализовать прямо сейчас!

Итак, что же является первым и самым главным пунктом? Это изображения. Размер изображений может иметь наибольшее влияние на скорость загрузки вашего сайта. На некоторых сайтах изображения могут занимать до несколько мегабайт если их должным образом не оптимизировать для веб страницы! Даже если вы видите, что изображения весят по 200-300 килобайт, попытайтесь их оптимизировать. Только представьте, эти картинки можно вполне уменьшить до 50 килобайт или даже меньше!

Первое, когда Вы сохраняете изображение из Photoshop (если Вы используете его) выберите сохранить для Web. Не сохраняйте изображения вслепую, а всегда обращайте внимание на его размер. При выборе качества не оставляйте всегда 100%, вы можете выбрать от 60 до 80 процентов, разницы в качестве не будет сильно заметно, зато будет заметна разница в размере изображения. Как показывает практика в большинстве случаях вполне хватает 60%, а иногда изображения могут быть настолько большими, что и при выборе даже 10% Вы получите довольно качественную картинку. Здесь Вам нужно будет поэкспериментировать. Далее Вы можете использовать различные сервисы для дальнейшей оптимизации картинок, которые могут еще больше сократить их размер.

Второе, не всегда формат, в котором сохранено изображение, является оптимальным с точки зрения его размера. Есть два популярных формата изображений — это JPG и PNG. Как узнать какой формат лучше использовать для той или иной картинки? Одно из основных преимуществ PNG — это поддержка прозрачности. Но этому есть своя цена — сжатое PNG изображение по сравнению со сжатым JPG будет весить намного больше. В это сложно поверить, но оптимизированное изображение JPG может весить до 10 раз меньше аналогичного изображения в формате PNG! И, соответственно, из этого следует простое правило: если изображение не нуждается в поддержке прозрачности лучше использовать JPG (по крайней мере для WEB). Но GIF, JPG и PNG не являются единственными форматами изображений, которые вы можете использовать на веб страницах.

Существует еще один формат изображений — WebP. WebP — это современный формат изображений, который обеспечивает превосходное сжатие для изображений в Интернете. Изображения в формате WebP весят намного меньше аналогичных изображений в форматах PNG и JPG без потери качества. Почему бы не использовать WebP для каждой картинки в интернете спросите Вы? Проблема в том, что WebP, являясь современным форматом изображений, к сожалению, не поддерживается некоторыми, даже самыми современными браузерами (в основном браузерами от компании Apple). И поэтому, когда пользователь заходит на Ваш сайт, ему нужно показывать изображения в том формате, в котором поддерживает его браузер. Примерно 70% ваших пользователей смогут увидеть изображения в современном формате, соответственно в этом есть смысл. Вы можете определить поддержку WebP браузером, используя JavaScript библиотеку Modernizr.

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

1. Миниатюру на странице показа всех товаров и в списке изображений одного товара на странице этого товара в довольно низком качестве

2. Основное изображение в довольно хорошем качестве

3. Изображение в оригинальном качестве в том случае если на странице товара есть функция увеличения изображения

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

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

Вы можете использовать не инструменты, а сервисы, которые будут делать всю эту работу за Вас и трансформировать и оптимизировать изображения «на лету» (в тот момент, когда Вы их будете запрашивать). Поверьте – это очень удобно. На вашем сервере хранится только один вариант изображения (оригинальный), вы просто указываете как вы хотите трансформировать свое изображение.