Оптимизация и сжатие png и jpg, jpeg без потери качества. Векторные и растровые изображения

Здравствуйте, дорогие друзья. Сегодня я расскажу как оптимизировать изображения для ускорения загрузки сайта. Но, для начала расскажу, почему ни писал почти неделю. Эту неделю я боролся с бюрократией, пытался получить новый загранпаспорт. Вы просто не представляете, что сейчас творится в паспортных столах, — это просто кошмар (очереди, давка, скандалы). Ещё хуже, чем обычно. Всё очень медленно. У меня такое ощущение, что в первый раз я получил паспорт гораздо проще и быстрей.

В общем, «плюнул» я на это. Зашёл на просторы Интернета, зарегистрировался на портале госуслуг и оформил получение данной услуги, без очередей и траты драгоценного времени.

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

И хотя сегодня практически у каждого пользователя высокоскоростной интернет и видимая загрузка сайтов не так заметна, поисковики всё же учитывают параметр «Скорость загрузки страницы» , как один из факторов ранжирования сайта. Плюс ко всему скорость загрузки положительно влияет на поведенческие факторы, что тоже не маловажно.

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

Где узнать о причинах медленной загрузки сайта

Сервисов для проверки скорости загрузки сайта – много. Но мы поговорим о сервисах, которые показывают причины медленной загрузки.

Я использую два сервиса:

Для начала скачиваете изображение к себе на компьютер, редактируете, и закачивает обратно по тому же адресу. В WodrPress дальше делать ничего не надо. А вот если это самописная страница, не забудьте в HTML коде указать нужные параметры ширины (width=»200″) и высоты (height=»200″). Отсутствие этих параметров влияет на скорость загрузки сайта, о чём свидетельствует параметр «Specify image dimensions» при анализе сайта в GTmetrix.

Как видно на скриншоте в моей теме не хватает параметров (16х16, 32х32) для иконок комментариев, категорий, даты и так далее.

Как указать параметры ширины и высоты изображения в теме WordPress

Итак, разберём мой пример. В моей теме не указаны размеры вот этих изображений:

Изображения без указания размера

Значит нужно найти в шаблоне место, где выводятся эти изображения. А выводятся они на главной странице и на странице материала. За главную страницу отвечает файл (index.php ), а за материал отвечает файл (single.php ).

Так вот отрываем административную панель WordPress– «Внешний вид» > «Редактор» — нужный файл. И добавляем параметры ширины и высоты, на основе предложенных размеров в отчёте GTmetrix.

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

А ещё скорей всего у вас в отчёте будет низкий показатель по параметру «Combine images using CSS sprites». Это параметр сообщает, что на сайте есть одинаковые изображения, которые можно объединить в спрайты для ускорения загрузки сайта. Но в двух словах этого не рассказать. Поэтому об этом поговорим в следующих статьях. А пока у вас есть над чем работать.

Так же посмотрите видеоурок, в нём я наглядно показываю как пользоваться сервисами и как оптимизировать изображения.

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

До встречи в следующих статьях.

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

Сбалансированная оптимизация изображения

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

Raluca Budiu, директор исследования Nielsen Norman Group, объясняет:

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

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

Нет точных правил насколько маленькое должно быть изображение для мобильного устройства — это компромисс между качеством и размером страницы. Согласно httpArchive, средний JPG составляет 29 КБ, а средний PNG — 16 КБ.

Уменьшение веса изображения частично связано с сохранением его в соответствующем размере и разрешении (количество пикселей), и частично сжатием изображения. Некоторые инструменты, такие как Photoshop, позволяют некоторое сжатие, но часто их недостаточно, особенно с более крупными типами изображений, такими как PNG.

Ряд инструментов позволяют эффективно сжимать изображения по отдельности или по партиям изображений. Например, изображение домашней страницы, приведенное выше, было сжато с использованием TinyPNG, что привело к снижению веса на 79%.

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

При разработке сайтов для мобильных устройств, планшетов и настольных компьютеров, будь то через выделенные URL-адреса (site.com и m.site.com) или на разных сайтах через один URL-адрес (адаптивный веб-дизайн), подразумевается, что размер изображений должен соответствовать самому большому устройству в этой категории.
Такая позиция, не совсем подходит для адаптивного веб-дизайна (RWD). У RWD принцип состоит в том, чтобы обслуживать один и тот же сайт на разных устройствах, используя CSS для форматирования содержимого в соответствии с возможностями устройства и размером экрана.

Однако, это не означает, что веб-сайты должны обязательно применять однообразный подход к изображениям, говорит Alex Painter, консультант по веб-эффективности в NCC Group:

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

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

Но так не должно быть. Поддерживая Responsive Images Community Group, спецификация HTML упрощает разработчикам создание нескольких альтернативных изображений для разных типов устройств — для разных размеров экрана (просмотр), разрешений (количество пикселей) или возможности устройства.

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

Alex Painter:
«Выбор правильного изображения для окна просмотра теперь достаточно прост. У нас были мультимедийные запросы CSS для фоновых изображений в течение некоторого времени, но до недавнего времени изображения, упоминаемые в HTML, были скорее проблемой.

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

Кто использует изображения с откликом?

Быстрый взгляд на исходный код основных веб-сайтов, таких как Amazon, Facebook и BBC, подтверждает, что ни один из них еще не использует элемент Для обслуживания откликов.

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

  • Позволяет веб-сайту показывать изображение большего размера с более высоким разрешением на рабочем столе.
  • Уменьшает размеры изображения и общий вес страницы и тем самым ускоряет время загрузки.
  • Позволяет мобильному сайту показывать увеличенное изображение на мобильном устройстве (обратите внимание на обрезанное изображение собаки выше).
  • Розничные продавцы могут отображать Mobile-Friendly Hero Images на мобильных устройствах, придерживаясь традиционных снимков на больших дисплеях.

Поиск лучшего формата изображений

Как мы уже знаем, наиболее распространенный формат изображений, используемых на мобильных и дружественных им сайтах: JPEG 46%, PNG 28%, GIF 23% и SVG 1% по данным httpArchive.

Существует два типа веб-изображения: растр и вектор. Первое состоит из точек (например цифровая фотография), а второе состоит из линий и фигур. JPEG, PNG и GIF являются растровыми. SVG — вектор. SVG — это более новый формат, который не так широко используется (пока), но рекомендуется для адаптивного веб-дизайна (RWD).
Есть «за и против» для каждого типа изображений, и у каждого веб-дизайнера есть свое мнение и любимые форматы. В целом:

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

Альтернативы традиционным изображениям

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

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

  • CSS sprites – объединяют коллекцию меньшей графики в один файл CSS. Примечание: перегрузка спрайтов со слишком многими графиками или со слишком крупными — будет неоптимальна.
  • Icon fonts — это библиотека значков, отправленных как один файл.
  • Формы CSS– это формы, построенные с использованием CSS, а не как традиционное изображение.

Mike D’Agruma Lead Front-End Web Developer, E-volve Creative Group:

«Чтобы сохранить размер файла, я, как правило, не загружаю более крупные, более популярные библиотеки значков и использую Fontastic для создания собственных пользовательских шрифтов значков. Этот метод очень хорошо работает на разных уровнях: 1) Поскольку я использую только небольшое количество пользовательских значков, размер файла шрифта значительно меньше; 2) Иконки создаются с помощью SVG, что гарантирует, что они будут чрезвычайно четкими на устройствах; 3) Вы не можете превзойти этот вариант по гибкости, так как значки шрифтов очень легко настраиваются с помощью CSS.

Еще один отличный способ экономии времени, размера файла и запросов сервера — использовать CSS для создания фигур. Вы можете создавать большинство фигур и добавлять столько эффектов и переходов, сколько хотите с помощью CSS.
Возьмите мобильный сайт Summit County Metro Parks в качестве примера, в одном только разделе заголовка я смог использовать комбинацию символов CSS и значков шрифтов, чтобы создать то, что могло быть шестью разными изображениями. Активация меню для мобильных устройств показывает пример анимации в форме CSS (меню в стиле гамбургера, закрывается с помощью «X»), а использование дополнительного значка с правой стороны показывает открытое и закрытое состояния меню».

Методы веб-дизайна для улучшения времени загрузки

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

Удостоверьтесь, что самый важный материал загружается первым, говорит Raluca Budiu:

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

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

Существует три распространенных метода для этого. Robert Gaines, разработчик веб-приложений в Канзасе, США, объясняет:

  1. Отсроченная или отложенная загрузка использует JavaScript для остановки загрузки изображений и других активов до тех пор, пока основное содержимое веб-страницы не закончит загрузку. Отложенная загрузка уменьшает время, затрачиваемое на первичный контент веб-страницы, но уменьшает необходимость сокращения изображений, которые в противном случае замедляли бы веб-страницу.
  2. Неспешная загрузка загружает активы, по мере их необходимости. Таким образом, содержимое сначала загружается над сгибом, а затем под сгибом, когда пользователь прокручивает. С галереями изображений, такими как поиск товаров на торговых сайтах, используются миниатюрные изображения, большие изображения загружаются только при нажатии соответствующего значка.
  3. Активная загрузка изображений сначала загружает картинки низкого качества во время визуализации веб-страницы, а затем заменяет их высококачественными изображениями после того, как загрузилось основное содержание. Активная загрузка картинок уравновешивает производительность с визуальной привлекательностью. В отличие от отложенной загрузки, она не заставляет пользователей ждать загрузки вторичных изображений после основного содержимого.

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

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

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

Перед тем, как начинать процесс «сжимания» картинок, оцениваем скорость загрузки web-страниц и разбираемся в том, какие показатели мешают улучшать результаты. Поможет в этом сервис PageSpeed Insights . Если страница наберет более 85 из 100 баллов – это хороший результат и именно к такой цифре нужно стремиться.

Например, сейчас результат такой:

А после оптимизации:

Такой результат стал возможен благодаря использованию рекомендаций Google:

Формат PNG

Как оптимизировать картинки, если для их сохранения использован формат PNG? Для этого можно воспользоваться рекомендациями Google:

Если планируется только базовая оптимизация изображений, можно использовать любую программу для редактирования картинок: GIMP , Photoshop и т.д. Но, какая из них лучше? Узнать это поможет небольшой эксперимент. Берем неоптимизированное изображение в формате PNG весом 293 КБ:

Создаем две папки: «GIMP» и «Photoshop» и помещаем в них одну и ту же картинку.

Как выполняется сжатие рисунка, без потери качества, при помощи редакторов GIMP и Photoshop?

Результат получается таким:


Итог: Photoshop выполнил оптимизацию изображения лучше, чем GIMP.

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

Несмотря на то, что OptiPNG на 1 КБ проиграла Photoshop, весит сама программа всего 96 КБ, а это большой плюс. А вот PNGOUT превзошла своих «конкурентов» по всем параметрам:

Работа с программами

В первую очередь, нужно скачать утилиту OptiPNG или PNGOUT (а может и обе) с официальных сайтов. Затем скопируйте файлы.exe в папку: C:\Windows.

Чтобы «упростить» задачу, достаточно просто скопировать эти файлы из папки Windowsи разместить их ярлыки на рабочем столе. Для удобства ярлык OptiPNG можно сразу назвать opting-o7 (параметр максимального сжатия при котором сохраняется качество). Остается просто перенести нужные картинки на ярлык и подождать, пока программа их оптимизирует.

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

Поэтому, есть еще один вариант работы с утилитами. Создаем тестовый документ, открываем и прописываем туда код (корректно работает только на ОС Windows):

Сохраняем файл в формате.reg и в кодировке ANSI, запускаем его, соглашаемся со всеми действиями и готово. Утилиты интегрированы в оболочку Windows.

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

Затем открывается командная строка, в которой демонстрируется процесс оптимизации:

Формат JPEG

Чтобы сжать изображение формата JPEG, нужны инструменты Jpegtran или Jpegoptim . Конечно, можно использовать редакторы GIMP и Photoshop. Однако Jpegtran или Jpegoptim эффективнее справляются с задачей оптимизации, поэтому скачиваем и устанавливаем обе программы.

Настройка утилиты Jpegtran

Активирование программы Jpegtran методом внедрения в оболочку Windows– не совсем подходящий вариант для утилиты. Она не будет корректно функционировать, так как код (jpegtran -copynone -optimize -outfile min.image.jpg image.jpg) предназначен для сжатия веса только одной картинки, а не всех файлов в папке.

Это значит, что нужно использовать другой способ активирования утилиты. Jpegtran не обязательно размещать в папкеС:\Windows, а вот копию ее можно здесь сохранить. Размещаем программу jpegtran.exe в любой папке и переименовываем (для удобства) в!jpegtran.

Затем при помощи Notepad++ создаем файл в кодировке UTF-8 (без BOM) с расширением.bat и названием!start. В него помещаем этот код:

Чтобы оптимизировать картинки, необходимо оба файла jpegtran.exe и!start.bat закинуть в одну папке и запустить процесс сжатия, используя файл!start.bat:

Настройка программы Jpegoptim

Утилита Jpegoptim без проблем внедряется в оболочку Windows. Для ее активации необходимо дописать код в конце файла PMGoptim.reg (он уже создан ранее для утилит для картинок формата PNG):

Процесс оптимизации картинок при помощи данной программы прост: нажимаем левой кнопкой мыши на папку с изображениями и выбираем «Run jpegoptim».

Результат работы Jpegtran и Jpegoptim:

Online-сервисы

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

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

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

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

Почему от размера изображений зависят расходы на хостинг

Большие изображения влияют и на пропускную способность хостинга. Поэтому, если у вас большой трафик, то тяжелые изображения повлекут лишние расходы. Одно дело, когда 50 человек в день загружают фото в 1 Мб, но что, если их станет 5000?

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

Основные форматы изображений

На веб-ресурсах используется не так много форматов изображений. Рассмотрим 5 основных:

  • .jpg;
  • .png;
  • .gif;
  • .svg;
  • .bmp.

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

Сделав это, вы легко определите формат:

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

На Mac пройдите следующий путь: Finder > Preferences > Advanced — а затем поставьте галочку рядом с фразой «Show all filename extensions» (Показывать все расширения файлов):

На Windows 10 откройте Пуск, затем — Проводник > Вид > Параметры > Просмотр, снимите флажок с пункта «Скрывать расширения известных типов файлов» и выберите радиокнопку «Показывать скрытые файлы, папки и диски». После нажмите «ОК»:

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

К примеру, если вы решите конвертировать картинку из.jpg в.png, функция отображения расширений не даст перепутать файлы, лежащие рядом в папке.

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

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

.JPG

Полное наименование: Joint Photographic Experts Group (по названию организации-разработчика).

Год релиза: 1992.

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

Кстати, вы можете изменить окончание имени файла с.JPEG на.JPG и ничего катастрофического не произойдет.

Однако если вы просто загрузите фото с телефона или камеры и попытаетесь вставить на сайт без оптимизации, вас ждет неприятный сюрприз. Несжатое.JPG-изображение с телефона или цифровой камеры весит очень много. Под «много» понимается вес от 1 до 10 МБ (иногда и больше).

Ниже — пример.JPG:

Это снимок картины Винсента ван Гога «Ирисы». Хороший пример того, когда.JPG — оптимальный выбор. Картина полна красок, пустое пространство отсутствует вовсе, нет прямых линий. Сохранить это великолепие в небольшом по весу файле поможет только.JPG.

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

.PNG

Полное наименование: Portable Network Graphics (портативная сетевая графика).

Год релиза: 1996.

Формат.PNG одновременно именуют проклятием и благословением. Для веб-дизайнеров он представляет прекрасную альтернативу.GIF.

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

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

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

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

.GIF

Полное наименование: Graphics Interchange Format (формат для обмена изображениями).

Год релиза: 1987.

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

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

Слева — пример декоративной границы окна из крошечного размера квадратиков формата.GIF. Каждый квадратик весит всего 54 байта

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

Нам всем по душе так называемые GIF-анимации. Однако, как правило, весят они много — порядка 2 Мб и выше. Блогеры склонны использовать анимированные картинки в постах, жертвуя ради этого временем загрузки. Но если дело того стоит, то почему нет!

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

.SVG

Полное наименование: Scalable Vector Graphics (масштабируемая векторная графика).

Год релиза: 2001.

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

Однако есть существенный недостаток — фотографии не могут быть векторными. Но любое другое векторное изображение может быть сохранено в этом формате (если оно было создано в программе Adobe Illustrator или Corel Draw, то его можно экспортировать в.SVG).

Формат хорош для простых схем, диаграмм и графиков. Логотипы и иконки также нередко сохраняются в.SVG. Как правило, они должны быть простыми и/или иметь абстрактный дизайн.

Логотип NASA сохранен в.SVG-формате и весит всего 14 Кб. Хотя, как вы можете заметить, само по себе изображение большое и довольно четкое. В этом вся прелесть векторной графики. Пикселизации не возникнет, независимо от того, как сильно вы измените размер изображения.

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

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

.BMP

Полное наименование: Windows Bitmap, Bitmap Picture.

Год релиза: 1985.

BMP — формат хранения растровых изображений, разработанный компанией Microsoft. Это древнейший из всех файловый форматов интернета.

Если вы когда-либо пользовались программой Microsoft Paint, то создавали файлы с расширением.BMP. Большинство современных браузеров без проблем отображают файлы этого формата, но используются они редко. Эти файлы тяжелы и подвержены пикселизации при масштабировании.

Вывод: этот формат использовать не следует.

Уменьшение веса изображений без потери качества

Здесь помогут следующие инструменты.

Adobe Photoshop — отраслевой стандарт при редактировании изображений. Это платная программа, которая обойдется в $19.99 ежемесячно. Если не желаете платить, то можете найти в сети Adobe CS6, последнюю версию программы, которая не требует абонентской платы.

Одна из полезнейших для оптимизации изображений функций Photoshop — сохранение изображения в один из веб-форматов («Save for Web»). Позволяет быстро конвертировать вес изображения и его качество для различных типов файлов.

Сначала откройте в программе изображение, которое планируете оптимизировать:

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

Разберем пример. Допустим, вы захотели вставить изображение в блог и начали менять его размеры.

Ширина поля для контента — 800 пикселей

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

Можете изменить размер до 800 пикселей в ширину — но иногда, напротив, стоит масштабировать его до 1000 пикселей. На экранах Retina, установленных в Mac, довольно легко распознать изображения низкого качества. А потому у большинства дизайнеров есть обязательное правило: ширина изображения должна как минимум в два раза превышать ширину поля с контентом. Это делается для того, чтобы изображения выглядели кристально чистыми даже на экранах от Apple.

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

В нашем случае, ширина изображения равна 8 000 пикселей.

Для того, чтобы изменить его размер, на Mac потребуется кликнуть по вкладке «Изображение», а затем выбрать пункт «Размер изображения»:

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

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

Опробовав все форматы, остановите выбор на том, при котором объем файла был наименьшим, а качество — таким же высоким. В примере таким форматом оказался.JPG. Именно в нем было решено сохранить изображение:

Обратите внимание, что вес файла в формате.PNG равен 731 KB!

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

Тем, у кого нет Photoshop, подойдет бесплатный онлайн-сервис TinyPNG. Конечно, идеальной оптимизации не получится, но снизить вес файла можно и здесь. Главный недостаток — ресурс не позволяет менять размер изображения:

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

Теперь — просто загрузите новый файл на компьютер.

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

GIMP

GIMP — невероятный инструмент. Это бесплатная десктопная альтернатива вездесущему Photoshop. При этом GIMP умеет все, на что способно детище Adobe. Так что если вы ограничены в средствах, обратите на эту программу внимание. Она доступна для Windows, Mac OS и Linux.

Какой объем файла предпочтительнее?

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

Если картинки потеряли четкость, стали зернистыми или тусклыми, заново оптимизируйте их, чтобы качество файлов повысилось. Если используете Photoshop и сохраняете изображения в.JPG, попробуйте сдвинуть ползунок качества изображения до 80% и более. Если сохраняете изображение в.PNG, попробуйте вместо.PNG-8 использовать.PNG-24.

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

Интернет-магазины

На страницах среднего интернет-магазина размещено от сотни до тысячи изображений продуктов. Поэтому оптимизация визуального контента крайне важна для сайтов eCommerce.

Как правило, вес изображений товаров сводится к 75 Кб и меньше. Если картинки на сайте масштабируются, вам потребуются большие размеры. Тогда вес может вырасти до 150 Кб.

Блоги

Как правило, вес изображений для блогов не превышает 100 Кб. Но ваша задача — добиться минимального объема при сохранении качества. Откажитесь от GIF-анимации, если это нецелесообразно.

SaaS-порталы

На этих ресурсах есть три главных вида изображений: на главной странице (hero shot), иконки и скриншоты. Самая важная страница сервиса — главная, так что и все работы по оптимизации стоит начать отсюда.

Главное изображение

Обычно это огромные изображения на весь экран. Но ваш целевой объем — 250 Кб или меньше. Это будет непросто. Но крайне результативно. Многие не придают весу особого внимания, но оптимизация только его одного уже повысит показатели ресурса.

Иконки

На многих сайтах иконки наглядно демонстрируют функции или особенности продукта. Формат таких изображений, как правило, .PNG, а вес не превышает 15 Кб.

Скриншоты

Если скриншоты такие же широкие, как и главное изображение, постарайтесь уменьшить их вес до 250 Кб, если нет — 100 Кб и меньше. Лучший формат для скриншотов — .JPG.

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

Бесплатные онлайн-сервисы

  • TinyPNG. Главная ценность ресурса — в его простоте. Достаточно перенести изображение на главный экран, как его вес снижается;
  • Pixlr. Интерфейс сервиса похож на Photoshop. Он также показывает вес файла при том или ином качестве картинки;
  • Picmonkey. Необходимые функции доступны, а интерфейс интуитивно понятен.

Бесплатные десктопные инструменты

  • GIMP;
  • Paint.net. Лучшая версия Microsoft Paint. Одна из полезных функций — неограниченная история. Можете отменить столько действий, сколько нужно;
  • Seashore. Приложение с открытым исходным кодом для Mac. Известно своими багами, но все еще может быть полезным.

Несколько финальных советов по оптимизации для поисковиков. Имена файлов должны быть описательными. К примеру, не нужно давать изображению в интернет-магазине название вроде 324q345q345.png. Отразите в имени файла товар, изображенный на картинке. Также убедитесь, что каждое изображение имеет соответствующий тег Alt в коде изображения:

Эта информация позволит картинке участвовать в поиске по изображениям Google или Яндекс.

Секреты оптимизации заголовков и изображений от ведущих контент-ресурсов

Заключение

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

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

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

Для среднестатистического контентного ресурса на и бесплатной CMS типа WordPress (да, я говорю о своём и тысячах подобных сайтов) возможности оптимизации ограничиваются установкой кэширующих плагинов и работой с изображениями. «Корячить» тему и сокращать HTML, CSS и JavaScript код может не каждый, да и такие действия, как правило, приводят к разным ошибкам и «выпадению» функционала.

Для работы с изображениями под WordPress существует ряд плагинов, конвертирующих и сжимающих картинки с потерями или без потерь, на лету или по запросу. Самый лучший, на мой взгляд, из таких плагинов — EWWW Image Optimizer .

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

Всё это в разной степени работает, но есть универсальный способ оптимизации изображений для любых сайтов, работающих не только на WordPress — чтобы начать работу, вам понадобится только Google-аккаунт.

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

В справке к PageSpeed Insights рекомендуемый специалистами Google процесс оптимизации изображений описан так:

Оптимизируйте изображения

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

Общая информация

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

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

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

Существуют инструменты, выполняющие дополнительное сжатие файлов JPEG и PNG без потерь и снижения качества. Для файлов JPEG рекомендуется использовать jpegtran или jpegoptim (доступно только для Linux, выполнять с параметром —strip-all). Для PNG лучше использовать OptiPNG или PNGOUT.

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

Рассмотрим пример. Сегодня я фотографировал для следующей публикации складной нож и прогнал получившиеся фотографии через приложение FastStone Image Viewer («художественная» обрезка + изменение размеров до 1280 точек по ширине). Получилась папка с восемью файлами весом больше 3 (!) мегабайт.

Судя по всему, свежеустановленный просмотрщик FastStone Image Viewer по умолчанию сохраняет отредактированные фотографии в близком к максимальному качестве, что приводит к неоправданно большому «весу» файлов. Но такая настройка в нашем случае вполне оправданна, потому что алгоритмы Google сжимают фотки без видимой потери качества при 100 %-ном мастабировании, а значит, хорошего качества изображения останутся таковыми и после загрузки в Google Photos.

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

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

816 Кб против 3,27 Мб. При этом качество фотографий, на мой взгляд, не пострадало вовсе. Тем же Фейсбуку и ВКонтакте стоит поучиться у Гугла оптимизировать фотографии. Более того, GPhotos наделён неплохими инструментами редактирования изображений — от наложения фильтров до ручной настройки контраста, яркости, насыщенности и т. д.

Таким образом, Google Photos — не только отличное облако для хранения и публикации фотографий, но и мощный инструмент оптимизации изображений для публикации в вебе. Только в случае с WordPress не забудьте отключить оптимизирующие плагины и тот же джетпаковский модуль Photon, иначе уже подготовленные к публикации фотографии подвергнутся дополнительному сжатию, что приведёт к заметной потере качества (см. для примера прошедшие через Google Photos, а затем Photon скриншоты в этой записи).