Оптимизация изображения начинается с выбора наилучшего формата файла для ваших нужд. Он выходит за рамки PNG против JPEG. Существует не один формат файла, чтобы управлять ими всеми.
В этом посте рассмотрим, как выбрать лучший формат изображения для вашего сайта WordPress. Мы рассмотрим старые форматы, JPEG, PNG и GIF и некоторые из следующего поколения, такие как WebP и SVG. Мы рассмотрим их сильные и слабые стороны и идеальные варианты использования, чтобы вы могли оптимизировать свои изображения, как профессионал.
Почему выбор правильного формата файла важен? Потому что все больше и больше посетителей посещают сайты на мобильных устройствах. Мало того, что скорость сети относительно медленнее по сравнению с выделенными сетями, но не у всех есть неограниченное количество данных.
А поскольку Google наказывает страницы, которые загружаются слишком медленно , показывая их меньшими в результатах поиска, сокращение времени загрузки — не самый простой способ увеличить трафик, продажи и конверсии.
Когда вы выбираете неправильный формат изображения, вы можете непреднамеренно отдавать изображение большего размера, чем необходимо. Дополнительные возможности файла изображения (такие как прозрачность), ненужные детали и слишком много цветов — все это добавляет к вашим изображениям размер. Иногда это необходимо, а иногда нет. Например, если у вашего изображения нет прозрачности, вы выбираете тип изображения, который не поддерживает прозрачность.
Выбор оптимального размера файла
Вам также необходимо рассмотреть изображение относительно остальной части вашей веб-страницы, чтобы выбрать оптимальный размер файла. Средняя веб-страница в настоящее время составляет около 2 МБ, поэтому вы хотите остаться ниже этого предела, чтобы иметь относительно быстрый сайт. Это означает, что вы должны смотреть на все ресурсы на вашем сайте, а не только на изображения.
Большое подробное изображение героя размером 1 МБ не будет иметь большого значения, если это единственное изображение на странице, содержащей в основном текст; однако, если вы собираетесь отобразить 10 больших изображений на странице размером всего 1 МБ, это будет сложная загрузка. Вы можете пойти на компромисс, отображая меньше изображений или показывая их все в меньшем размере.
Как сжать изображения: Lossy vs Lossless
Чтобы выбрать идеальный формат изображения, необходимо понять разницу между сжатием с потерями и без потерь. В идеале ваше изображение должно использовать оба этих алгоритмических процесса, чтобы получить наименьший размер файла. Не все форматы поддерживают оба типа.
При сжатии с потерями некоторые ваши данные будут потеряны навсегда. Сжатие с потерями изображения навсегда удаляет данные изображения и ухудшает изображение в процессе.
Это не так плохо, как кажется, поскольку некоторые из этих дополнительных деталей могут даже не восприниматься человеческим глазом .
Сжатие изображений без потерь, напротив, сохраняет данные, поэтому ничего не теряется. Алгоритмы без потерь хранят все необходимые данные для точного воссоздания изображения.
В идеале ваше изображение сначала пройдет фазу сжатия с потерями, а затем фазу без потерь, где то, что осталось, будет оптимизировано.
JPEG
JPEG расшифровывается как Joint Photographic Experts Group и был разработан для использования в фотографиях. В качестве стандартного формата файлов для большинства потребительских цифровых камер и мобильных телефонов, вы найдете его повсюду.
JPEG имеет несколько преимуществ:
- JPEG-файлы могут содержать миллионы цветов, чтобы создавать насыщенные, яркие изображения
- Они дают относительно небольшой размер файла, даже с таким большим количеством цветов
- Они поддерживаются во всех современных браузерах.
Неудивительно, что JPEG является таким популярным форматом файлов для интернета.
Поскольку JPEG был разработан для фотографий, он не поддерживает прозрачность и анимацию.
Сжатие JPEG
JPEG использует сжатие с потерями, чтобы сохранить небольшой размер файла.
Сжатие JPEG не является настройкой «все или ничего». ВЫ можете настроить степень сжатия от 0% (сильное сжатие) до 100% (без сжатия), чтобы создать идеальный баланс для вашей ситуации.
Как правило, сжатие изображения на 75-100% будет поддерживать целостность и высокое качество изображения, но при 75% изображение будет в два раза меньше. Половина! Вот почему большинство социальных сетей сжимают свои изображения в диапазоне 70-85%. Например, Facebook сжимает ваши изображения на 85% .
Поэтому, когда вы готовите свои изображения в Adobe Photoshop или Lightroom, не бойтесь переместить этот слайдер.
Просто посмотрите на эти два изображения. Один не был сжат и составляет 229 КБ, а другой был сжат на 75% и составляет 95 КБ.
Можете ли вы сказать, какой из них какой?
Существует формат JPEG без потерь, называемый JPEG-2000, но он не получил широкого распространения.
Кроме того, вы всегда должны избегать повторного сжатия сжатого изображения. Вы когда-нибудь делали копию фотокопии или загружали и перезагружали изображение в социальных сетях? Качество искажается, потому что вы проходите еще один раунд сжатия.
(Кстати, Вариант 1 — это сжатое изображение)
JPG против PNG
JPEG — это плохой выбор для изображений с высокой контрастностью. Вот почему скриншоты JPEG с черным текстом на белом фоне имеют тенденцию быть размытыми.
JPEG — это идеальный тип файла изображения для фотографий, особенно без текста, когда файл изображения меньшего размера имеет приоритет над качеством изображения.
JPEGS значительно меньше, чем PNG. Наше изображение пейзажа выше в формате PNG составляет 329 Кб, это почти в 3,5 раза больше, чем сжатая версия.
PNG
PNG были разработаны для замены GIF из-за проблем с лицензированием, отсюда и функциональное сходство.
Сила PNG заключается в алгоритме сжатия без потерь. Вы не потеряете данные в процессе сжатия, поэтому изображение может быть воссоздано без потери качества. В результате, PNG сохраняют мелкие детали на изображениях, даже когда речь идет о тексте. Недостатком является то, что размеры файлов PNG, как правило, больше по сравнению с другими типами файлов изображений из-за всех этих данных.
Еще одним преимуществом является поддержка прозрачности. Вы можете не только создать файл логотипа с прозрачным фоном, но вы также можете создавать расширенные градиенты прозрачности и многое другое.
Три вида PNG
Существует три вида PNG: PNG-8, PNG-24 и таинственный PNG-32. Технически есть также анимированные PNG, но мы не будем вдаваться в подробности, потому что они еще не получили широкой поддержки.
PNG-8 похож на GIF PNG. PNG-8 поддерживает 256 проиндексированных цветов, но с гораздо меньшим размером файла, даже меньшим, чем его эквивалент JPEG. В отличие от GIF, PNG-8 имеет плохую поддержку анимации. PNG-8 идеально подходит для простой веб-графики с прозрачным фоном, такой как логотипы и иконки сайтов.
В то время как PNG-8 поддерживает 8-битные цвета, PNG-24 поддерживает 24-битные цвета, что означает поддержку 16 миллионов цветов. PNG-24 больше похож на JPEG, но со значительно большим размером файла. Но качество изображения PNG-24 превосходно, даже при увеличении, что делает его идеальным для фотографий электронной коммерции, а также снимков экрана или изображений с текстом.
Если вы создадите PNG в диалоговом окне Photoshop Сохранить для Web , вы не увидите PNG-32 в списке в качестве опции, но ваш PNG будет автоматически преобразован в PNG-32, если вы добавите поддержку прозрачности. Это почему?
PNG-32 поддерживает 24-битные цвета с дополнительным 8-битным альфа-каналом для расширенных возможностей прозрачности. PNG-32 были разработаны, чтобы иметь возможность создавать улучшенные изображения с градиентами прозрачности.
Эти расширенные возможности означают, что PNG-32 создает файлы гораздо больших размеров. Если вы не создаете изображение, которое требует сложной прозрачности, придерживайтесь PNG-24. Если вы создаете наложение изображений, которое постепенно исчезает, то это работа для PNG-32.
Вы можете увидеть пример прямо здесь. Изображение имеет прозрачный градиент с двумя цветами, которые постепенно меняются от полной непрозрачности до полной бесцветной прозрачности.
Вы можете видеть, как черный фон влияет на отображение изображения, потому что он затемняет цвета по всему градиенту.
Для PNG-8 выше этот эффект искажен. Изображения PNG-8 поддерживают только один уровень прозрачности, поэтому прозрачность отображается только в тонкой искаженной полосе вверху.
WebP
Было бы замечательно, если бы мы могли объединить лучшее из PNG и JPEG. Google подумал о том же и изобрел формат WebP с открытым исходным кодом.
Огромные сайты, такие как YouTube и eBay, уже начали использовать его для повышения эффективности сайта.
Существует два вида изображений WebP. Один из них известен просто как WebP и использует сжатие с потерями. Вы можете думать об этом как о версии JPEG формата WebP. Когда вы создаете WebP с потерями в такой программе, как Photoshop, вы можете выбрать степень сжатия.
Другая версия известна как WebP Lossless и больше похожа на PNG. Вы получите больший размер файла, но не потеряете детализацию.
Оба типа форматов WebP создают изображение, которое намного меньше, чем их аналоги JPEG и PNG. Сколько именно?
Согласно данным Google , в среднем изображения WebP на 25-34% меньше, чем сопоставимые JPEG, и на 26% меньше, чем сопоставимые PNG.
Что касается создания файлов WebP для WordPress, вы можете использовать плагин. Фактически, Smush Pro CDN конвертирует изображения в WebP . Если кто-то посещает ваш сайт в браузере, поддерживающем WebP, Smush преобразует ваши изображения и обслуживает изображения WebP. Если они используют браузер, который не поддерживает WebP, они получат ваш ежедневный JPEG или PNG.
Два типа графических изображений
Существует два типа графических изображений: векторная и растровая.
Векторные изображения математически генерируются из серии точек, которые соединяются линиями и кривыми, образуя геометрические фигуры. С векторной графикой, изображение может быть изменено до любой формы, большой или маленькой, без ущерба для качества изображения.
Растровая графика, напротив, состоит из пикселей, расположенных на сетке, где каждый пиксель представляет цвет. Растровая графика выглядит качественно только в том разрешении, в котором она должна была отображаться. Если изображение масштабируется до большего размера, произойдет пикселизация.
SVGs
SVG на самом деле не формат файла изображения. SVG — это язык разметки, который позволяет создавать двухмерную графику. SVG больше похожи на HTML, чем на PNG или JPEG.
SVG технически основаны на XML и могут управляться и анимироваться с помощью Javascript и CSS.
SVG также уникальны, потому что в отличие от форматов изображений, которые мы рассмотрели ранее, они создают векторные изображения. Это означает, что изображения бесконечно масштабируемы и хорошо выглядят при любом разрешении. Что делает их отличными при адаптации к различным устройствам.
Вы не получите ту пикселизацию, которая возникает в других типах файлов изображений. Тем не менее, поскольку SVG были разработаны для отображения простых изображений на основе геометрических фигур, таких как логотипы, флаги, диаграммы и значки. Они плохо работают для фотографии.
Вы можете создавать SVG в векторной программе, такой как Adobe Illustrator, Inkscape, Vectr, SVG-edit или Sketch. Если вы создаете простые изображения, результирующий размер файла будет намного меньше, чем изображение в формате PNG, JPEG или WebP, даже большие изображения с высоким разрешением. Сложные SVG-файлы сведут на нет эти преимущества.
Несмотря на то, что это язык разметки, Google индексирует SVG, поэтому они появляются при поиске изображений. И они совместимы со всеми браузерами.
Если вы пытались загрузить SVG в WordPress, читая эту статью, вы, возможно, заметили, что WordPress не поддерживает SVG по соображениям безопасности.
Но WordPress не единственный. Социальные сети, такие как Medium, Tumblr и Facebook, также не поддерживают SVG.
Вы можете попытаться обойти это и изменить свой файл functions.php, чтобы разрешить SVG , но я бы не рекомендовал это. Поскольку SVG содержат язык разметки, они открыты для внедрения вредоносных программ. Если вы являетесь администратором сайта и включили SVG, но авторы и участники вашего сайта не знают о рисках, они могут загрузить скомпрометированные файлы SVG, не зная об этом.
Если вы решили установить плагин для разрешения SVG, вам следует загружать SVG только от людей, которым вы доверяете, и ограничивать возможность загрузки SVG людям, которые понимают, как загружать SVG безопасно.
GIF
Хотя GIF-файлы отлично подходят для анимации шуток, в наши дни они не очень хороши. Анимированные GIF-файлы в Twitter больше не являются даже GIF-файлами! Это файлы WebM.
Потому что правда в том, что GIF никогда не были предназначены для анимации. Они создают исключительно большие размеры файлов. Чем больше кадров, тем хуже становится. Если вы переключитесь на файл WebM, у вас будет файл, который будет в 9 раз меньше и намного качественнее . MP4 — еще одна жизнеспособная опция, совместимая со всеми браузерами.
GIF-файлы имеют ограниченную цветовую палитру из 256 цветов и используют сжатие без потерь. Но так же, как и файлы PNG-8, и с гораздо меньшим размером файла, и они также имеют прозрачность.
Так что, возможно, единственный вариант использования GIF — это когда вы пытаетесь создать что-то, совместимое со старыми браузерами, которые не поддерживают HTML 5, выглядят плохо или специально для ностальгического эффекта .
Оптимальный размер файла — наименьший возможный
WordPress пытается помочь в оптимизации изображений, автоматически сжимая изображения, но это мало что дает. Для этого специальный инструмент, такой как Smush Pro, поможет вам сэкономить много времени и доставлять изображения быстрее, чем вы когда-либо могли себе представить.
