Разве вы не любите изображения?

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

Вот почему включение образов в контент является мощным инструментом маркетинга вашего блога.

Но если вы не будете осторожны, изображения могут составлять более половины (или даже больше) общего размера вашей веб-страницы. Всего несколько лет назад средний размер веб-страницы составлял 600-700K. Сейчас средний размер составляет 2MB, и он увеличивается с каждым годом.

Это очень много!

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

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

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

Почему необходимо оптимизировать изображения

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

Исследования показывают, что до 40% посетителей нажимают кнопку "Назад", если загрузка сайта занимает более трех секунд.

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

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

Излишне большие изображения также занимают место на вашем хостинг-аккаунте. Хотя некоторые из вас могут иметь хостинг с "неограниченным" пространством для хранения, многие премиум-хостинг-провайдеры ограничивают вас примерно 10 ГБ хранилища на тарифных планах низшего уровня. Это может быстро заполниться, особенно если вы размещаете несколько сайтов с большим количеством изображений на одном аккаунте.

Как же определить, замедляют ли изображения работу сайта? Проверьте скорость сайта с помощью Google PageSpeed Insights.

Если Google сообщает о неоптимизированных изображениях как о проблеме, вот что вам нужно знать, чтобы ее решить.

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

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

Давайте подробнее рассмотрим каждую из этих областей.

Тип файла

Изображения в Интернете обычно сохраняются в формате PNG или JPEG - или GIF для анимации. Кто не любит эти уморительные анимированные GIF, распространяющиеся по Сети!

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

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

Итак, почему существуют разные форматы?

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

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

Более подробно о сжатии мы поговорим позже, а пока, если вы помните только две вещи, запомните: JPEG для фотографий и PNG для текста/графики.

Размеры изображения

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

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

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

И это огромный файл!

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

Сейчас некоторые платформы для веб-публикаций автоматически создают несколько вариантов изображений с полным разрешением в разных размерах, но если это не так, вам следует предварительно изменить размер изображений в редакторе изображений, таком как Photoshop, Lightroom, Pixlr или даже MS Paint. Это может означать разницу между файлом размером 50K и 5MB.

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

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

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

После активации Imsanity также может искать существующие изображения и изменять их размер.

Обслуживание ваших изображений

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

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

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

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

Blogging Wizard использует Sucuri (он включает брандмауэр для безопасности, а также CDN), но есть и другие качественные провайдеры, такие как Amazon's Cloudfront или KeyCDN. Даже популярный CloudFlare, который не является CDN, предлагает CDN бесплатно и легко настраивается в большинстве пакетов виртуального хостинга.

Сжатие изображений

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

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

Я уверен, что многие, кто использует Photoshop, могут увидеть его Сохранить для Web И даже онлайн-инструменты для редактирования изображений, такие как PicMonkey или Visme, тоже оптимизируют ваши изображения.

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

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

Настольные инструменты

ImageAlpha / ImageOptim

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

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

ImageAlpha - это компрессор PNG с потерями, который может творить чудеса при уменьшении PNG-файлов, в то время как ImageOptim выполняет расширенное сжатие без потерь (с возможностью потери) - и удаляет ненужные метаданные из PNG, JPEG и GIF файлов.

Для изображений PNG я сначала прогоняю их через ImageAlpha:

Здесь он уменьшил мое изображение скриншота с 103K до 28K.

Затем я прогнал его через ImageOptim и сэкономил еще 10%.

JPEGmini

Для файлов JPEG я оптимизирую их с помощью настольного приложения JPEGmini, доступного как для Mac, так и для Windows.

Версия Lite позволяет бесплатно оптимизировать до 20 изображений в день, а снятие ограничения стоит $19,99.

Совет профессионала : Продвинутые пользователи, желающие интегрировать JPEGmini в Photoshop или Lightroom с помощью плагина, могут приобрести Pro-версию за $99,99.

Онлайн / облачные / SaaS инструменты

TinyPNG

Если вы ищете высококачественный онлайн-инструмент для сжатия изображений, TinyPNG (несмотря на название, он также оптимизирует файлы JPEG) - это веб-приложение, которое позволяет перетащить в браузер до 20 изображений размером 5 МБ или меньше и оптимизировать их все сразу.

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

TinyPNG дает вам 500 бесплатных оптимизаций изображений в месяц, а после этого взимает плату от $0,002-0,009 за изображение, в зависимости от объема.

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

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

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

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

Примечание: Для получения полной информации ознакомьтесь с нашей статьей об инструментах сжатия изображений.

Подведение итогов

Поскольку некоторые прогнозируют, что к 2017 году средний размер веб-страницы приблизится к 3 МБ, сейчас самое время начать оптимизацию изображений.

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

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

Затем воспользуйтесь преимуществами современного сжатия изображений с помощью настольных приложений, таких как JPEGmini, или облачных инструментов, таких как TinyPNG или Kraken, интегрировав их в WordPress с помощью плагина, если это возможно.

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

Связанное чтение: 7 способов уменьшить размер PDF-файлов.