Андрей Смирнов
Время чтения: ~13 мин.
Просмотров: 0

Конвертируем изображения png в jpg

Как отдавать WebP?

Панель Chrome DevTools Network с выделением файлов типа WebP, которые отдаются в браузеры на движке BlinkPlay Store отдаёт WebP браузерам на Blink и JPEG остальным, таких как Firefox

Сжатие GIF-анимаций и почему <video> лучше

никогдаспецификация GIF89aКоличество цветов, количество кадров и пропорцииСравнение размеров GIF-анимации и видео в эквивалентном качествеВыдача того же видео в формате MP4 сокращает размер файла на 80% или больше.Imgur при загрузке конвертирует GIF в MP4

Если можете переключиться на видео

  • Используйте ffmpeg для преобразования анимированных GIF (или исходных файлов) в формат MP4 (H.264). Я запускаю такой однострочник из Rigor:
  • ImageOptim API тоже поддерживает преобразование анимированных GIF в WebM/H.264 и удаляет сглаживание GIF, что ещё больше повышает сжатие

Если приходится использовать анимированные GIF

  • Инструменты вроде Gifsicle удаляют метаданные, неиспользуемые цвета палитры и минимизируют изменения между кадрами.
  • Рассмотрим кодирование GIF с потерями. Giflossy — форк Gifsicle, который поддерживает флаг и сжимает анимацию на 60−65%. На его основе сделан хороший инструмент Gifify. Неанимированные GIF преобразуйте в формат PNG или WebP.

«Книгу GIF»

Оптимизация SVG

В сервисе SVGOMG от Джейка Арчибальда можно выбрать разные способы оптимизации с мгновенным просмотром результата

Некоторые общие правила оптимизации SVG (SVGO)

  • Минифицируйте файлы SVG и сжимайте в gzip, ведь SVG — это просто текстовые ресурсы на XML, такие как CSS, HTML и JavaScript. Для повышения производительности их следует минимизировать и сжать.
  • Вместо путей используйте стандартные формы SVG, такие как , , , и . Это уменьшит объём необходимой разметки и объём кода для парсинга и растеризации в браузере.
  • Если необходимо использовать пути, попробуйте уменьшить их. Упростите и объедините кривые и пути, где возможно. Инструмент в Illustrator хорошо удаляет лишние точки даже в сложных работах, сглаживая неровности.
  • Избегайте групп. Если не можете, попробуйте упростить их.
  • Удалите невидимые слои.
  • Избегайте эффектов Photoshop и Illustrator. Они могут сконвертироваться в большие растровые изображения.
  • Внимательно проверьте наличие встроенных растровых изображений, которые не подходят для SVG.
  • Используйте инструмент для оптимизации SVG, здесь незаменим веб-интерфейс SVGOMG для SVGO. Если используете Sketch, то отличный плагин Sketch для SVGO уменьшает размер файла при экспорте.

Эффективность SVGO в режиме высокой точности (−29% от размера оригинального файла) и низкой точности (−38%)SVGOВажно отметить: хотя SVGO преуспел в предыдущем примере без чрезмерного упрощения путей и форм, часто случается иначе. Посмотрите, как с понижением точности искажается блик на ракете

SVG-спрайты

отлично подходитподдерживается в браузерахsvg-spriteIcoMoonCSS SpriteSymbol SpriteStacked Spriteпереход от шрифтов для иконок к SVG

Дополнительные материалы

Советы Сары Соуэйдан по оптимизации выдачи SVG«Практическая книга по SVG»часть 1часть 2«Подготовка и экспорт значков SVG в Sketch»

Избегайте пережатия графики с потерей качества

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

Когда браузер получает изображение, он должен декодировать его из исходного исходного формата (например, JPEG) в растровое изображение в памяти. Часто изображение требует изменения размера (например, ширина установлена в процентах). Декодирование и изменение размера изображений — ресурсоёмкие операции, которые замедляют рендерингБраузерам нужно совершить несколько шагов, чтобы отрисовать картинку на экране. Получив изображение, его необходимо декодировать и зачастую изменить размер. Эти события можно отследить на временной шкале Chrome DevToolsДекодирование изображений может оказаться невероятно ресурсоёмким на мобильных телефонах среднего и нижнего уровня. В некоторых случаях оно в 5 и более раз медленнее, чем на десктопемобильной версииПанель Timeline/Performance в Chrome DevTools показывает время декодирования изображения в Twitter Lite до и после оптимизации

Улучшенный JPEG

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

tl;dr: поддержка в браузерах сильно отличается. Если использовать современные разработки, то часто придётся выдавать разным браузерам разные форматы.Различные современные форматы (и оптимизаторы) показывают качество сжатия при целевом размере файла 26 КБ. Качество сравнивается инструментами SSIM (структурное сходство) и Butteraugli, которые мы более подробно рассмотрим позже.

  • JPEG 2000 (2000) — улучшение сжатия за счёт замены дискретного косинусного преобразования на вейвлеты. Поддержка в браузерах: десктопный Safari и iOS.
  • JPEG XR (2009) — альтернатива JPEG и JPEG 2000, поддерживающая HDR и широкие цветовые гаммы. Создаёт файлы меньшего размера, чем JPEG, со слегка с меньшей скоростью кодирования/декодирования. Поддержка в браузерах: Edge, IE.
  • WebP (2010) — основанный на прогнозировании блоков формат от Google поддерживает сжатие с потерями и без потерь. Обеспечивает лучшее сжатие, чем JPEG, и поддерживает прозрачность, как PNG. Не хватает настройки цветовой субдискретизации и прогрессивной загрузки. Скорость декодирования ниже, чем у JPEG. Поддержка в браузерах: Chrome, Opera. Экспериментальная поддержка в Safari и Firefox.
  • FLIF (2015) — формат сжатия без потерь, превосходящий PNG, WebP без потерь, BPG без потерь и JPEG 2000 без потерь по коэффициенту сжатия. Поддержка в браузерах: нет, но есть JS-декодер.
  • HEIF и BPG. С точки зрения сжатия они одинаковы, но поставляются в разных обёртках:
  • BPG (2015) — замена JPEG более эффективным сжатием на основе HEVC (High Efficiency Video Coding). Кажется, обеспечивает меньший размер файлов по сравнению с MozJPEG и WebP. Вряд ли получит широкую поддержку из-за проблем с лицензированием. Поддержка в браузерах: нет, но есть JS-декодер.
  • HEIF (2015) — формат для изображений и последовательностей изображений, закодированных HEVC с межкадровым предсказанием. Apple анонсировала на WWDC, что будет изучать переход c JPEG на HEIF в операционной системе iOS, что даст уменьшение размера файлов до двух раз. Поддержка в браузерах: нет на момент написания статьи. Должна появиться в десктопном Safari и iOS 11.

одинподдержка в браузерах сильно отличаетсяуказать content-type

Основные форматы файлов фотографий

Имена файлов цифровых фотографий любого фото формата также как и программные файлы других типов состоят из изменяемой части, точки и расширения. Расширение файлов фотографий всегда неизменно и может состоять из трех или четырех символов, по которым и определяется тип файла или название формата. Например, jpeg, cr2, tiff, psd, gif (рис.3).

Рис.3 Расширение файла фотографии указывает на его формат.

Универсальным форматом для файлов цифровых фотографий считается JPEG. Это самый популярный растровый формат, который используется для сохранения фотографий в разных типах фототехники. С ним удобно работать в различных фоторедакторах и использовать его для просмотра фотографий во всех технических устройствах. Главный его недостаток – потеря качества изображения при сохранении файла (рис.4).

Рис.4 Потеря качества изображения фотографии при сохранении ее файла в формате JPEG.

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

Рис.5 Используя специальную программу в файлах фотографий формата RAW можно изменять настройки фотоаппарата.

Формат RAW это общее название нескольких форматов используемых в фототехнике разных производителей. Каждый такой формат имеет свои особенности и не является унифицированным. Для того чтобы привести все существующие форматы RAW к единому стандарту был разработан формат DNG. По сути это тот же формат RAW, но у него размер файлов меньше и нет дополнительных текстовых файлов (рис.6).

Рис.6 Файлы одной и той же фотографии в формате RAW и DNG имеют разные размеры и способы хранения текстовой информации.

В тех случаях, когда требуется сохранение результатов обработки цвета, слоев, каналов, масок или каких-либо других атрибутов редактирования фотографий, используется формат PSD. Это внутренний формат файлов программы Photoshop, в котором следует сохранять всю информация об изменении фотографий после фотосъемки (рис.7). Основной недостаток этого формата – ограниченное применение.

Рис.7 В файлах формата PSD удобно хранить информацию о редактировании фотографий (пример файла).

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

Рис.8 Сравнение размеров файлов одной фотографии, сохраненной в разных фото форматах.

Рассмотренные выше пять файловых фото форматов – JPG, RAW, DNG, PSD и TIFF считаются основными для хранения, обработки и просмотра цифровых фотографий. Но для эффективной демонстрации фотографий зрителю такие форматы не подходят. Для этого нужно выбирать другие форматы, разработанные для этой цели.

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

Формат 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 или JPEGTIFF или GIF
Худший выборGIF 256 цветов (очень ограничен цвет, и размер файла больше чем 24 -разрядного JPEG)Сжатие JPEG добавляет артефакты, смазывается текст и края линий

Рамки для фото

Еще один практический совет, который можно дать — это как создавать рамки PNG или JPEG. Рамки могут заранее находиться в инструментах таких программ, как «Фотошоп», но бывают случаи, когда необходимо применить свое уникальное оформление. Для начала разберемся с рамками PNG. Для этого нам понадобится:

  1. Создаем рамку в графическом редакторе и «Фотошопе» (сделать это нужно по размерам того фото, для которого создается рамка).
  2. Сохраняем ее в формате PNG, не забываем, что для этого не подойдет обычный Paint, но если же пользователь делал рамку в данной программе, то не стоит переживать. В таком случае сохраняем рамку в формате JPEG, затем открываем любой онлайн-конвертер и меняем формат на PNG.
  3. Выбираем нужное фото и открываем его в графическом редакторе или «Фотошопе».
  4. Добавляем к фото рамку и соединяем ее по размеру.
  5. Готово!

Чем отличается JPG от JPEG

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

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

Ситуация похожа на HTM и HTML, когда формат JPEG был впервые введен, официальным расширением файла был JPEG (с четырьмя буквами). Однако, Windows в то время требовала, чтобы все расширения файлов не превышали трёх букв, вот почему .JPG использовался для того же самого формата. Компьютеры Mac, однако, уже тогда не имели такого ограничения.

Произошло то, что оба расширения файлов использовались в обеих системах, а затем Windows изменила свои требования, чтобы принять более длинные расширения файлов, но JPG всё ещё используется. Поэтому файлы JPG и JPEG распространяются и продолжают создаваться.

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

Нестандартные форматы

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

Если говорить о прямоугольных вариантах, которые мы не рассматривали выше, то их существует довольно много. В большинстве случаев они имитируют популярные форматы листов бумаги и картона – например, А3 (30 на 40), А2 (40 на 50 или даже 60), А1 (60 на 80) или А0 (80 на 120). Это, соответственно, 2, 4, 8 и 16 привычных нам листов А4. Из-за популярности бумаги соответствующего размера относительно популярны и аналогичные фоторамки, хотя чаще их используют не для фото, а для плакатов и картин.

Примерно та же логика актуальна и для стандартов с буквой В в названии – уменьшение цифры на единицу означает удвоение габаритов рамки. Формат В4 в варианте 24 на 30 считается самым крупным из настольных, имеющих заднюю ножку – все, что крупнее, априори вешают на стену.

Помимо А и В, существует еще одна, сравнительно редкая группа стандартов в пропорциях два к трем – SRA. По цифрам, обозначающим номер габарита, этот размер является чем-то средним между А и В. Так, SRA3 – это 30 на 45 сантиметров, а SRA0 – 90 на 120

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

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

Рейтинг автора
5
Материал подготовил
Максим Иванов
Наш эксперт
Написано статей
129
Ссылка на основную публикацию
Похожие публикации