Оптимизации изображений для сайта – Оптимизация картинок на сайте: полный гайд

Содержание

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

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



По данным HTTP Archive, средний размер веб-страницы — 2,4 Mb и 64% приходится на изображения. Вы все правильно поняли: средний размер изображений на веб-странице — 1,5 Mb.

Какой размер страниц на вашем сайте?

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

  • уменьшение общего размера страницы;
  • экономия трафика;
  • сокращение времени загрузки страницы и повышение SEO рейтинга.

Есть целый ряд способов оптимизировать изображения, но лучше это делать без ущерба для качества. В статье речь пойдет о трех видах инструментов.
  1. Самостоятельные инструменты: На сайте ничего устанавливать не нужно. Просто зайдите на страницу сервиса, загрузите изображения и получите оптимизированные изображения.
  2. Плагин WordPress: Установите плагин на ваш сайт на WordPress и, в зависимости от выбранных настроек, размер изображения будет сокращаться при загрузке на сайт.
  3. Расширение для Joomla: Установите расширение на ваш сайт на Joomla и изображения будут оптимизированы на вашем сервере с Joomla.

Вы готовы ускорить свой сайт?

Список инструментов


Самостоятельные инструменты:
  1. Tiny PNG
  2. Compressor
  3. Puny PNG
  4. Compress Now
  5. Kraken
  6. Optimi Zilla
  7. JPEG Mini
  8. Imagify

Плагины WordPress:
  1. EWWW Image Optimizer
  2. WP Smush
  3. Optimus
  4. TinyPNG
  5. Short Pixel

Расширения для Joomla:
  1. Imgen
  2. Image Recycle
  3. EIR
  4. Prizm Image

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


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

1. Tiny PNG


Для уменьшения размера файлов PNG или JPG на TinyPNG используются методы сжатия с потерями. Можно загружать до 20 изображений, размер каждого из которых не может превышать 5 Mb.

2. Compressor


Compressor позволяет сжать изображения с уменьшением объема до 90% и при этом сохранить высокое разрешение. Он работает с JPEG, PNG, GIF и SVG-файлами. Ограничение по размеру — 10 Mb.

3. Puny PNG


PunyPNG подходит для дизайнеров и разработчиков. Не годится для работы, если размеры ваших изображений исчисляются мегабайтами: ограничение по размеру — 500 KB, по количеству файлов — 20 штук. Возможно сжатие JPG, GIF и PNG-файлов.

4. Compress Now


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

5. Kraken


При оптимизации Kraken позволяет вам выбирать между сжатием с потерями, без потерь и с возможностью самостоятельной настройки. Файл можно загрузить с компьютера, Dropbox, Google drive или Box.

6. Optimi Zilla


Загрузите до 20 JPEG или PNG-файлов на OptimiZilla. Если вы загружаете несколько файлов, то скачать их все можно одним архивом.

7. JPEG Mini


Избавьтесь от лишних килобайт с помощью JPEG Mini. Возможна обработка исключительно файлов JPG.

8. Imagify


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

Вышеуказанные самостоятельные инструменты помогут вам в уменьшении размера файлов. А теперь давайте рассмотрим плагины для WordPress.

Плагины WordPress:


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

1. EWWW Image Optimizer


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

2. WP Smush


Этот замечательный плагин от wpmudev установлен более 400 тысяч раз. Он позволяет сжимать изображения партиями или в момент загрузки на сайт. В бесплатной версии WP Smush позволяет обрабатывать до 50 изображений подряд. Плагин обрабатывает файлы в форматах JPEG, PNG и GIF.

3. Optimus


Optimus от KeyCDN помогает уменьшить изображения до 70%, но есть ограничение по размеру — 100 kB.
  • оптимизация исходных изображений;
  • оптимизация во время загрузки.

4. TinyPNG


Выполните сжатие файлов в формате JPEG и PNG с помощью TinyPNG. Именно этим инструментом пользуюсь я, и он меня всем устраивает.

5. Short Pixel


Short Pixel сжимает не только изображения, но и PDF. Инструмент совместим с WooCommerce и обрабатывает GIF, PNG, JPG и PDF-файлы.

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

Расширения для Joomla


Следующие расширения бесплатны, так что попробуйте и решите, что подходит именно вам.

1. Imgen


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

2. Image Recycle


Image Recycle — популярное расширение для Joomla, помогающее оптимизировать изображения и PDF-файлы. Можно настроить автоматическое сжатие новых изображений или уменьшить размер уже существующих. Также существует возможность задать уровень оптимизации для отдельных типов файлов.

3. EIR


Easy Image Resizer меняет разрешение загруженных изображений с помощью медиа-менеджера. EIR осуществляет сжатие на базе Optimus.io.

4. Prizm Image


Prize Image помогает удалить метаданные из JPEG, конвертировать прогрессивные JPEG в последовательные и наоборот, оптимизировать PNG и GIF без ущерба для качества. Для сжатия плагин использует Prizm Image API.

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

На HOSTING.cafe всегда можно сравнить предложения виртуальных серверов и хостинга.

habr.com

Оптимизация изображений для web / Habr


В интернете достаточно статей и проектов для ресайза изображений. Почему же нужна еще одна? В этой статье я расскажу почему нас не удовлетворили текущие решения и пришлось пилить собственное.

Проблема


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

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

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

В качестве примера, как делать не нужно можно посмотреть на главную страницу такого известного сайта, как github.com. При весе страницы 2 Мб, 1.2 из них занимают бесполезные картинки, которые можно оптимизировать и не загружать.

Второй пример — наш Хабр. Скриншот приводить не буду, что бы не растягивать статью, результаты по ссылке. На хабре картинкам изменяют разрешение на нужное, но не оптимизируют их. Это позволило бы сократить их размер на 650 Кб (50%).

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

Распространенные решения


Все, что будет сказано далее относится к JPEG и PNG изображениям, т.к. это наиболее популярные форматы в интернете.

Вбив в google что-то вроде «image resize backend» вы увидите, что в половине случаев предлагается использовать Nginx, другая часть— это различные самописные сервисы, чаще всего Node.js.

Из nginx, а точнее из libgd, которая используется в модуле nginx’а мы смогли выжать на тестовой картинке 63 RPS, что неплохо, но хотелось бы быстрее и больше гибкости. Graphicsmagick тоже не подходит, т.к. его скорость работы слишком низкая. К тому же оба эти решения выдают не оптимизированные изображения. Большинство других решений, например на Node предлагают использовать Sharp для ресайза, MozJPEG для оптимизации JPEG изображений и pngquant для оптимизации PNG.

Мы и сами достаточно долгое время пользовались самописной связкой из Nod’ы, Libvips и MozJPEG c pngquant, но в один из дней задались вопросом— «А можно ли сделать ресайз быстрее и менее требовательным к ресурсам?».

Спойлер: можно. 😉

Теперь хорошо бы выяснить, как можно ускорить наше приложение. Изучив код приложения мы выяснили, что imagemin, который использовался для оптимизации, а в частности его плагины MozJPEG и pngquant при работе дергают одноименные утилиты через os.Exec. Будем это дело однозначно выпиливать и использовать только биндинги к Cи’шным либам. Для ресайза использовался модуль Sharp, который представляет собой биндинг к С библиотеке Libvips.

Наша реализация


Гуглеж показал, что Libvips по прежнему лидер по скорости и конкурировать с ним может только OpenCV. Значит будем использовать Libvips и в нашей реализации, это уже проверенное решение и он имеет готовый биндинг для Go. Пора попробовать написать прототип и посмотреть что из этого выйдет.

Пару слов о том, почему для попытки решения данной проблемы был выбран Golang. Во первых он достаточно быстрый, вы же еще помните, что мы хотим сделать быстрый ресайз. Код на нем легко читать и поддерживать. Последним требованием была возможность работы с C библиотека, нам это пригодится.

Быстро написали прототип, протестировали и поняли, что несмотря на большее, чем в Sharp, количество внутренних крутилок, Libvips по-прежнему выдает на выход не оптимизированные изображения. С этим надо что-то делать. Опять обращаемся ко всемогущему гуглу и узнаем, что лучший вариант это по-прежнему MozJPEG. Тут начинают закрадываться сомнения, что мы сейчас напишем то же самое, что было на Node, только на Go. Но внимательно почитав описание MoZJPEG узнаем, что она является форком libjpeg-turbo и совместима с ней.

Выглядит очень многообещающе. Дело за малым — собрать свою версию Libvips, в которой jpeg-turbo заменен на версию от Mozila. Для сборки мы выбрали Alpine Linux, т.к. приложение все равно планировалось публиковать с помощью Докера и Alpine имеет очень приятный формат конфига пакета, очень похожий на используемый в Arch Linux.

Оптимизация картинки уменьшила ее размер в 4 раза без видимой потери качества.
Оригинальный JPEG
351×527
79 Кб
Оптимизированный
351×527
17 Кб

Собрали, протестировали. Теперь Libvips сразу при ресайзе выдает оптимизированную версию. То есть в Node версии версии мы сначала делали ресайз, а потом еще раз пропускали картинку через decoder-encoder. Теперь мы только делаем ресайз.

С JPEG разобрались, а что делать с png. Для решения этой задачи была найдена библиотека libpngquant. Она не очень популярная, несмотря на то, что консольная утилита pngquant, которая базируется на ней, используется во многих решениях. Так же к ней был найден биндинг на Go, немного заброшенный и с утечкой памяти, пришлось его форкнуть починить, дополнить документацией и всем остальным, что подобает приличному проекту. Libpngquant мы тоже собрали в виде Alpine пакета для простой установки.

Благодаря тому, что теперь изображение не требуется сохранять в файл для обработки c помощью pngquant мы можем немного оптимизировать процесс. Например не сжимать картинку при ресайзе в Libvips, а только после обработки в pngquant. Это позволит сохранить немного драгоценного процессорного времени. Надо ли говорить, что мы так же очень экономим благодаря тому, что вызов C библиотеки гораздо быстрее запуска консольной утилиты.

Разница в размере в 3 раза, но возможно появление артефактов (зависит от картинки).
Оригинальный PNG
450×300
200 Кб
Оптимизированный
450×300
61 Кб

Пример не очень удачной картинки, на которой появляются артефакты при сжатии.
Оригинальный PNG
351×527
270 Кб
Оптимизированный
351×527
40 Кб

После того, как прототип был написан, протестирован на моем пк и выдавал приличные 25 RPS на мобильном двух ядерном проце, сжирая весь CPU, захотелось увидеть сколько можно выжать из него на нормальном железе. Запускаем код на шести ядерной машине, натравливаем Jmeter и WTF??? Получаем 30 RPS. Пробуем разобраться что за фигня.

Libvips сам реализует многопоточность, то есть нам нужно только инициализировать библиотеку и в дальнейшем мы можем безопасно обращаться к ней из любого потока. Но у нас почему-то Libvips работает в 1 поток, что ограничивает нас одним ядром. Еще 1 ядро занимает pngquant. Итого получается, что наша супер быстрая ресайзилка отлично работает только на ноутбуке разработчика, а на остальных машинах не может утилизировать все ресурсы. 😉

Смотрим исходники биндинга к Libvips и видим, что там CONCURRENCY по умолчанию выставляется в 1 из-за возникавших в Libvips гонок данных. Но судя по баг трекеру эти проблемы давно исправлены. Выставили CONCURRENCY обратно, тестируем. Ничего не поменялось, Libvips по-прежнему отказывался ресайзить изображения многопоточно. Все попытки побороть эту проблему потерпели неудачу и сказать по правде, я запарился ее решать и решил обойти проблему на другом уровне.

Все более или менее современные ядра Linux (3.9+ и 2.6.32-417+ в CentOS 6) поддерживают опцию SO_REUSE, которая позволяет использовать один порт нескольким экземплярам приложения. Данный подход удобнее, чем балансировка средствами стороннего ПО, такого как HAProxy, т.к. не требует конфигурации и позволяет быстро добавлять и убирать инстансы.
Поэтому мы использовали SO_REUSE и опцию «—scale» в Docker compose, которая позволяет указать количество запускаемых экземпляров.

Время мерить


Пришло время оценить результат наших трудов.

Конфигурация:

  • CPU: Intel Xeon E5-1650 v3 @ 3.50GHz 6 cores (12 vCPU)
  • RAM: 64 Gb (используется около 1-2 Gb)
  • Кол-во воркеров: 12

Результаты:

Больше бенчмарков (правда без сравнения с Node версией) на wiki странице.
Как видно переделывали ресайз мы не напрасно, увеличение скорости составило от 30 до 400% (в некоторых случаях). Если требуется ресайзить еще быстрее, то можно покрутить ручки «speed» и «quality» в libimagequant. Они позволят дополнительно сократить размер или увеличить скорость кодирования ценой потери качества изображения.

Код проекта на GitHub.
Биндинг Go к libimagequant так же на GitHub.

habr.com

Оптимизация изображений для сайта | Impuls-Web.ru

Приветствую вас, дорогой друг!

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

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

Навигация по статье:

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

  1. 1.Размер изображения
  2. 2.Формат, в котором вы сохраняете картинку
  3. 2.Степень ее сжатия

Какой размер нужно задавать для изображений?

Если вы планируете использовать изображение, например, в качестве фонового на своём сайте, то следует брать ширину не более 1600 – 1800 пикселе.
А для того, что бы это изображение растягивалось на всю ширину на любых, даже самых больших экранах, лучше использовать специальное css-свойство:

background-size:100% auto;

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

Если вы подготавливаете картинку для миниатюры или вставки в какую-нибудь статью, то здесь вам нужно обратить внимание на то, какую ширину имеет ваш основной контейнер с текстом этой статьи. То есть если, к примеру, контейнер для вывода миниатюры имеет ширину 900 пикселей, то вставлять сюда изображение имеющее ширину 1500 или 2000 пикселей не имеет смысла.

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

В каком формате лучше сохранять изображения для сайта?

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

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

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

Оптимизация изображений при помощи PhotoShop

Первый и самый простой способ подготовки картинки к выгрузке на сайт, это использование программы Adobe PhotoShop или его аналогов.

Прежде всего, изменяем размер изображения:

  1. 1.В главном меню программы выбираем пункт «Изображения» => «Размер изображения».
  2. 2.Задаём нужную нам ширину, при этом, обращая внимание на то, что бы у вас стояла галочка «Масштабировать стили» и «Сохранять пропорции». Иначе изображение будет деформироваться. После задания параметров нажимаем «Да».
  3. 3.Теперь заходим в меню «Файл», и выбираем «Сохранить для Web и устройств».
  4. 4.В левой части окна у нас отображается окно предпросмотра и сразу же под этим окном отображается вес картинки. На данный момент в таком формате и с такими параметрами это изображение будет у нас весить 142 килобайта.
  5. 5.В правой части экрана мы можем изменять формат изображения. В основном здесь будут использоваться JPEG и PNG -24. Например, если здесь выбрать формат PNG -24, то вес увеличится до 1.3 мегабайта. Кроме формата в самом верхнем поле вы можете выбирать качество оптимизируемого изображения. Например, для JPEG у нас по умолчанию доступно три варианта. Это хорошее качество, низкое и среднее качество.
  6. 6.Так же вы можете задавать качество изображения в ручную, используя поле Quality.
  7. Для того, что бы более наглядно видеть насколько отличается оптимизированное изображение от оригинала, мы можем здесь же, в левой части окна перейти на вкладку 2up. При этом окно у нас делится на две части. В верхней отображается оригинал, а в нижней части экрана отображается оптимизированная картинка и показывается его вес.

    Если мы перейдем на вкладку 4up, то здесь нам будет предлагаться несколько разных вариантов оптимизации. В самом первом окне отображается оригинальное изображение, во втором окне — с качеством 50, в третьем – с качеством 25, и в последнем – с качеством 12.

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

  8. 7.После того, как все параметры выбраны, нажимаем на кнопку «Save» и сохраняем нашу картинку.

Оптимизация изображений при помощи специальных программ

Второй способ оптимизации заключается в использовании специальных программ.

Я для этих целей использую программу Riot. Скачать её вы можете по ссылке ниже:

Данная программа очень простая, с минимумом настроек. Однако она не плохо справляется с процессом оптимизации.

  1. 1.Для открытия изображения мы можем воспользоваться либо кнопкой «Open», либо же просто взять нужное нам изображение и перетащить его в окно программы.
  2. 2.Сразу же программа предупреждает нас о том, что размер картинки слишком большой и предлагает нам его уменьшить. Выбираем здесь «Yes» и вводим здесь необходимую ширину.
  3. 3.В левой части экрана мы видим оригинал нашего изображения, а также его вес. В правой части отображается уже оптимизированное изображение и его вес.
  4. 4.В нижней части окна вы можете выбирать между тремя форматами: jpeg, png и gif.
  5. 5.При помощи ползунка Quality вы можете изменять в процентах качество изображения. При этом результат вы будете видеть в правой части окна. Я обычно ставлю около 50%.
  6. 6.Так же на нижней панели инструментов вы можете при помощи кнопок поворачивать картинку, отображать ее по горизонтали или по вертикали, а так же изменять его размер.
  7. 7.После того, как вы выставили все необходимые параметры, кликаем на кнопку «Save». Программа предлагает нам заменить оригинальный файл. Если вас устраивает такой вариант, то выбираете «Yes» и изображение заменяется на уже оптимизированное, что так же очень удобно.
  8. 8.Если же данный вариант вас не устраивает, то выбираете «No» и задаете имя, под которым хотите сохранить оптимизированную картинку. Я заменять не буду, так как мне нужно, что бы сохранился оригинал для того, что бы в конце статьи можно было провести сравнительный анализ.

Оптимизация изображений при помощи сервиса Web Resizer

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

Первый сервис называется Web Resizer, он бесплатный и регистрироваться здесь не обязательно.

  1. 1.Для того, что бы загрузить изображение, нажимаем на «Обзор», выбираем изображение и затем кликаем на кнопку «Upload Image». При этом максимальный вес изображения, загружаемого для оптимизации, должен быть не более 10 Mb.

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

  2. 2.Если мы прокрутим немножко ниже, то мы видим, что здесь мы можем сразу же задавать размер, который нам нужен. По умолчанию он составляет 400 пикселей.
    Так же, при желании, вы можете повернуть изображение и задать другие параметры.
  3. 3.После того, как все настройки заданы, обязательно нажимаем на кнопку «Apply changes». И вот у нас открывается наше оптимизированное изображение.
  4. 4.Теперь кликаем по нему правой кнопкой и выбираем «Сохранить изображение как». Сервис сохраняет все оптимизированные изображения с базовым названием «result», вам нужно задать то название, которое вам нужно.

Онлайн сервис TynyPNG

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

  1. 1.Сразу же в верхней части экрана нажимаем на кнопку и загружаем нужное изображение. Так же изображение можно сюда перетянуть.
  2. 2.Каких либо параметров для сжатия здесь не задается. И после сжатия мы видим начальный и конечный вес изображения.
  3. 3.Для загрузки кликаем по ссылке «Download». Так же, вы можете сохранять изображение в ваш DropBox, и если вы будете оптимизировать не одно, а несколько изображений, то можно будет их скачать архивом, при помощи кнопки «Download All».

Онлайн-сервис OptimiZilla

Как и предыдущий сервис OptimiZilla так же поддерживает пакетное сжатие изображений, когда вы загружаете не одно изображение, а несколько.

  1. 1.Для загрузки картинки нажимаем на кнопку «Загрузить», выбираем нужное ту, которая нам нужна.
  2. 2.Сразу же выполняется сжатие. Если мы прокрутим немножко ниже, то увидим здесь такое же окно предпросмотра, где в левой части отображается исходный файл, а в правой части оптимизированный. Можем его уменьшать или увеличивать, и так же изменять его качество.
  3. 3.После того, как все параметры заданы, нажимаем на кнопку «Сохранить», а после на кнопку «Скачать», или же, если вы загружали несколько изображений для оптимизации, то на «Скачать все».

Подводим итог

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

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

Способ сжатияИтоговый вес изображенияВозможность изменения размераПакетное сжатие изображений
OptimiZilla190Кб+
Web Resizer149Кб+
PhotoShop143 Кб+
TynyPNG123 Кб+
Riot105 Кб+

Мы видим, что самый большой вес у нас имеет изображение, оптимизированное при помощи онлайн-сервиса OptimiZilla.

А наименьший вес удалось получить при помощи программы Riot.

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

Видеоинструкция

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

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

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

С уважением Юлия Гусарь

impuls-web.ru

несколько методов уменьшения времени загрузки

От автора: изображения — ключевой компонент каждого веб-сайта. Согласно HTTP Archive, изображения составляют более 60% данных, загружаемых на веб-страницы. Являясь таким критическим компонентом почти всех веб-сайтов, будь то e-commerce, новости, сайты о моде, блоги или порталы для путешествий, оптимизация изображений важна и, возможно, это самый легкий способ ускорить работу своего сайта с тяжелыми изображениями.

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

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

1. Измените размер изображений

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

Например, у вас есть изображение 4000x3000px для товара, который вы хотите перечислить на своем интернет-магазине. Однако на вашем веб-сайте вам нужно показать намного меньшее изображение этого товара. Это может быть изображение 200x300px на странице списка товаров и 800x1000px на странице сведений о товаре. Убедитесь, что вы уменьшаете исходное изображение до этих размеров перед отправкой в браузер. Измененные изображения намного меньше исходного изображения и будут загружаться намного быстрее, чем исходное изображение.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

<h3>XYZ Product Detail</h3> <!— DO NOT USE this as it will load the full size image and the browser does the resize —> <img src=»image.jpg» alt=»full size image» /> <!— USE a resized image where the resizing is done from the server and there is no need of browser-side resizing—> <img src=»resized_800x1000_image.jpg» alt=»resized image» />

<h3>XYZ Product Detail</h3>

  <!— DO NOT USE this as it will load the full size image and the browser does the resize —>

  <img src=»image.jpg» alt=»full size image» />

  <!— USE a resized image where the resizing is done from the server and there is no need of browser-side resizing—>

<img src=»resized_800x1000_image.jpg» alt=»resized image» />

На мой взгляд, неправильное изменение размеров изображений — это самая большая область оптимизации на большинстве веб-сайтов. И часто мы, как разработчики, склонны игнорировать это. Рассмотрим следующий сценарий: вы начинаете с идеально размерных изображений для вашего нового сайта. В течение следующих нескольких месяцев макет вашего веб-сайта изменится, а также ваши требования к размеру изображения. Однако вместо того, чтобы генерировать новые изображения для удовлетворения этих новых требований к размеру, что само по себе является самоцелью, вы занимаетесь близкой альтернативой. Например, вы используете изображение размером 300×200 пикселей там, где хватило бы 200×200 пикселей. Думаю, это случилось бы со всеми.

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

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

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

2. Оптимизация изображений

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

JPG, PNG и GIF являются наиболее распространенными форматами изображений, которые в настоящее время используются в Интернете, и каждый из них подходит для разных вариантов использования. Существует еще один относительно новый формат изображения, называемый WebP, который объединяет лучшие из этих форматов изображений, на 30% меньше по размеру и поддерживается почти на 75% современных браузеров.

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

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

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

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

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

3. Создавайте под мобильные устройства

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

Если у вас есть адаптивный веб-сайт для настольных компьютеров и мобильных устройств, вы можете переключиться на использование адаптивных изображений. С адаптивными тегами изображений, используя атрибуты srcset и sizes тега img, вы можете предоставить браузеру список вариантов для одного изображения и определение относительного размера изображения на разных экранах. Затем браузер определяет оптимальный размер изображения для загрузки определенного устройства из доступного списка на основе размеров устройства и указанного вами макета.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

<img srcset=»image-320w.jpg 320w, image-480w.jpg 480w, image-800w.jpg 800w» src=»image-800w.jpg» alt=»Image»>

<img srcset=»image-320w.jpg 320w,

             image-480w.jpg 480w,

             image-800w.jpg 800w»

    

src=»image-800w.jpg» alt=»Image»>

Атрибут sizes дает информацию о макете изображения, атрибут srcset дает список изображений с фактической шириной, указанной для каждого URL-адреса.

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

Изображение, которое отлично смотрится на обычных устройствах, будет слегка размыто на экране с высокой плотностью. Решением этого является загрузка изображения 2x размера на экранах с DPR 2, 3-кратное изображение на экранах с DPR 3 и обычное изображение размером 1x на других устройствах. Это также можно выполнить с помощью адаптивного тега изображения, как показано ниже.

<img srcset=»image-320w.jpg 1x, image-640w.jpg 2x src=»image-320w.jpg» alt=»Image»>

<img srcset=»image-320w.jpg 1x,

             image-640w.jpg 2x

     src=»image-320w.jpg» alt=»Image»>

Современная спецификация Client Hints упрощает работу с адаптивными изображениями и делает код более чистым по сравнению с атрибутом srcset и sizes. Как работают подсказки — это огромная тема сама по себе, она недоступна для этой публикации и подробно освещена здесь.

ImageKit предоставляет вам параметры DPR на основе URL-адресов, а также параметры изменения размера и обрезки, а также поддерживает клиентские подсказки, что позволяет очень легко использовать адаптивные изображения и предоставлять идеальные изображения на всех устройствах.

4. Загружайте меньше ресурсов

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

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

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

Рассмотрим случай, когда у вас есть 100 продуктов на веб-странице. Если вы запросите все 100 изображений одновременно и в самом начале, это замедлит время загрузки. Изображения будут конкурировать за пропускную способность сети и ресурсы ЦП с другими критическими элементами на странице, например, CSS и JS.

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

Начать работать с ленивой загрузкой очень просто в библиотеках JS, таких как jQuery Lazy. Вы также можете использовать новейший API IntersectionObserver, который намного более эффективен, чем библиотеки JS, доступные для ленивой загрузки.

5. Используйте хороший CDN для доставки изображений

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

Сети доставки контента или CDN представляют собой набор распределенных в глобальном масштабе кеширующих / прокси-серверов.

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

При выборе CDN убедитесь, что CDN поддерживает HTTP/2. HTTP/2 — это новый протокол для доставки контента в Интернете, который может значительно ускорить время загрузки. Он использует такие методы, как мультиплексирование, сжатие заголовков и server push, чтобы уменьшить время загрузки страницы. HTTP/2 теперь поддерживается следующими CDN. Эта демонстрационная страница отлично справляется с визуальным объяснением разницы в производительности между HTTP/2 и старым протоколом HTTP/1.1.

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

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

Ну, есть немало инструментов, которые вы можете использовать для тестирования веб-сайта специально для проблем, связанных с изображениями. Один из способов — использовать website analyzer от ImageKit. Просто введите URL-адрес страницы и в течение нескольких секунд вы получите предложения относительно изменения размера, наилучшего формата, ленивой загрузки и HTTP/2. Google также работал над инструментом с открытым исходным кодом под названием Lighthouse. Этот инструмент интегрирован в новейшие версии Chrome и может провести тщательный анализ не только изображений на вашем веб-сайте, но и других проблем, которые могут повлиять на производительность. Google PageSpeed insights также указывает, что вы загружаете неоптимизированные изображения на своем сайте, кроме других рекомендаций.

Заключение

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

Автор: Brandon Morelli

Источник: https://codeburst.io/

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Верстка-Мастер. От теории до верстки популярных шаблонов

Изучите современную верстку сайтов с нуля

Подробнее

webformyself.com

Оптимизация изображений для сайта — программа Фотошоп и онлайн-сервисы

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

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

Заполняем атрибуты alt и title

При вставке картинок обязательно заполнять alt, заполнение title не обязательное. Alt — это текстовое описание изображения, которое говорит поисковой системе о том, что есть на фотографии. Не стоит добавлять в alt больше 60 символов. Title — название изображение, которое будет видно, если пользователь наведет на него мышкой. Его заполнение не обязательно в тех случаях, когда в окружающем тексте идет речь о том, что на картинке.

Alt и title не должны быть одинаковыми. Вот фотография федеральной трассы Р-21 «Кола»:

В данном случае в alt можно написать ключевые слова «дорога», «небо», «федеральная трасса Р-21 «Кола», «ремонт дороги», а в title — «трасса Р-21 «Кола».

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

Формат изображения

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

Соответственно, если картинка заполнена изображением на 100% своей площади, то формат PNG лучше не использовать. Кроме того, изображения в формате PNG слишком много весят (по сравнению с JPG) и, что самое важное, при сжатии они очень сильно теряют в качестве.

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

Adobe Photoshop — программа, которая позволит вам легко оптимизировать любое изображение.  Сделать это очень просто, не нужно возиться с настройками, достаточно лишь выбрать пункт в меню File — Save for Web&Devices.

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

Также у вас есть возможность самостоятельно задать качество, использовав в правом верхнем углу настройку Quality. Остальные настройки не так важны, трогать их совсем не обязательно. 200 килобайт — уже значительно лучше, однако не стоит забывать о размере фотографии. В данном случае он равен 2500×1667 px. Очевидно, что для сайта такой размер не нужен. Сожмем его до 800 px по ширине.

Теперь фотография весит всего 24 килобайта, и это уже гораздо лучше, чем 200. Да, может показаться, что и 200 килобайт — это не много. Но это только тогда, когда вы используете в статье 1–2 изображения. А если их десятки? Это уже серьезно повлияет на скорость загрузки страниц. А если на вашем сайте планируется размещение большого количества фотографий, то в этом случае оптимизировать их размер стоит хотя бы из соображений экономии места на хостинге.

Adobe Photoshop — лучшая программа для оптимизации изображений. Главный ее минус в том, что она не слишком хорошо подходит для обработки очень большого количества изображений. В этом случае можно воспользоваться другой программой Adobe — Lightroom, которая является облегченной версией Photoshop и как раз создана для обработки большого количества изображений.

Другие способы оптимизации изображений

Если у вас нет Adobe Photoshop или Lightroom, то можно работать с  другими приложениями и сервисами, которые бесплатны. Они уступают по своим возможностям, однако с помощью них вполне можно оптимизировать изображения для сайта.

  • RIOT — бесплатное приложение, которое умеет сжимать форматы PNG, JPG и GIF. Оптимизирует изображения без потери качества, есть дополнительные функции, которые позволяют масштабировать или поворачивать фотографию.
  • FileOptimizer — универсальная программа, которая может работать с очень большим количеством различных файлов (документы, архивы и т.д.). Изображения оптимизируются без потери качества, результат зависит от формата. В случае с JPG это до 17–18% уменьшения веса, PNG могут сжиматься до 50%.
  • TinyPNG — веб-сервис, который в режиме онлайн оптимизирует изображения. Без потери качества сжимает до 35–40%, но есть определенные ограничения. Нельзя загружать сразу больше 20 файлов, а максимальный размер фотографии — 2 мегабайта.

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

www.seostop.ru

Как оптимизировать изображения на сайте

Мы увеличиваем посещаемость и позиции в выдаче. Вы получаете продажи и платите только за реальный результат, только за целевые переходы из поисковых систем

Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

Подпишись на рассылку и получи книгу в подарок!

Изображения делают статьи ярче, а также могут быть полезны для продвижения вашего ресурса. Михиль Хайманс из Yoast рассказал, как оптимизировать изображение для SEO.

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

Где найти хорошую картинку

Авторские изображения и фотографии

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

София Ибрагимова

Контент-маркетолог

Если вы хотите создать минималистичные простые миниатюры, можно воспользоваться онлайн-сервисами для создания иконок. Вот популярные:

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

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

Альтернативные источники

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

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

Подготовка изображений

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

Задайте правильное имя файла

Оптимизация изображения начинается с его названия. В него необходимо включить ключевое слово. Так поисковым роботам будет проще понять, что изображено на картинке. Здесь все просто: если на картинке восход солнца в Париже, имя файла не должно быть DSC4536.jpg, назовите его paris-sunrise.jpg. Основное ключевое слово – «paris», так как это основной объект фотографии, поэтому я поместил его в начале названия.

Определите масштаб изображения

Для SEO очень важна скорость загрузки страницы. Чем быстрее грузится сайт, тем удобнее пользователям посещать страницу, а роботам – индексировать ее. Крупные изображения значительно снижают скорость загрузки. Особенно обидно для пользователей, если вы загружаете картинку 2500 × 1500, а на экран она выводится в размере 250 × 150.

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

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

Значительная часть вашей аудитории использует мобильные устройства для посещения вашей страницы. Поэтому изображения на сайте должны легко масштабироваться и приспосабливаться под любые форматы экранов. Если проигнорировать этот пункт, вы можете увеличить частоту отказов со стороны мобильных устройств, что отрицательно скажется на ранжировании. Для сайтов на WordPress разработан специальный плагин – RICG Responsive Images.

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

Уменьшите размер файла

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

Чтобы проверить, удалось ли вам оптимизировать изображение, воспользуйтесь инструментом YSlow.

Загрузка изображения на сайт

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

Подписи под картинкой

Это текст, который сопровождает ваше изображение.

Почему подпись важна для оптимизации изображений? Пользователи обращают внимание на эти подписи, даже когда бегло просматривают статью. Эта такая же важная часть структурирования контента, как заголовки, подзаголовки и списки. Нильсен еще в 1997 году отметил, что «элементы, которые улучшают восприятие текста – это заголовки, крупный шрифт, полужирный текст, выделенный текст, маркированные списки, графика, подписи, тематические предложения и оглавления». В 2012 году KissMetric заявила, что «подписи под изображениями читаются в среднем на 300% чаще, чем сам текст. Поэтому не использовать их или использовать неправильно означает упустить возможность привлечь огромное количество пользователей».

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

Alt и Title изображения

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

При наведении курсора на изображение Internet Explorer показывает текст альта. Если же вы пользуетесь Google Chrome, то у вас должен всплывать тег Title. Многие просто копируют текст альта и вставляют его в Title. Также в нем можно указать какую-либо несущественную информацию, не связанную с SEO. Некоторые вообще не заполняют Title, и ничего от этого не теряют.

Репост на других каналах

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

<meta property=»og:image» content=»http://example.com/link-to-image.jpg» />

Так вы сможете поделиться своим изображением в Facebook, OpenGraph, Pinterest.

Плагин WordPress SEO имеет раздел «Social». Если у вас установлена премиум версия, вы можете с помощью плагина предварительно просмотреть свой пост перед публикацией в Facebook. Если вы правильно настроили его, но он не работает, попробуйте очистить кеш Facebook.

При помощи этого плагина можно также настроить карточки для публикаций в Twitter.

Выравнивание по центру

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

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

XML-файлы для карты сайта

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

Выжимка из статьи

Процесс оптимизации изображения состоит из нескольких этапов:

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

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

semantica.in

Оптимизация картинок для сайта — как?

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

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

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

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

Теперь давайте разберемся зачем оптимизировать картинки для сайта. Представьте у вас на странице, скажем, в каком-либо обзоре имеется 10 картинок. В не оптимизированном варианте каждая картинка весит ~1 Мб. Т.е. представим, что эти картинки сняты на хорошей камере (хотя в реальности такие картинки весят еще больше). Я здесь беру по минимуму. Все 10 картинок мы загружаем на сайт. В итоге страница с обзором у нас будет весить как минимум 10 Мб. Как минимум потому что на сайте может быть и другая графика, относящаяся к дизайну. Вы представляете грузить страницу в 10 Мб. Я понимаю, что сегодня у каждого в доме имеется проводной интернет и Wi-Fi. А вы подумали о пользователях мобильного интернета? Мне кажется многие пользователи просто не дождутся загрузки страницы вообще.

Теперь давайте представим, что эти же самые картинки после оптимизации будут весить не 1 Мб, а 100 кб. Это в десять раз меньше. В итоге все картинки суммарно будут весить 1 Мб. 1 Мб куда быстрее загрузится на мобильном устройстве, чем 10 Мб.

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

Для примера я возьму любую картинку. Посмотрим на ее размер в оригинале.

Как видим из скриншота картинка весит 1,47 Мб. Это много. Нельзя ее на сайт такую грузить. Также сразу хочу обратить ваше внимание на разрешение картинки, т.е. ее размер. Он указывается в пикселях.

Видим разрешение — 2560 x 1600 пикс. Это тоже очень много. Зачем загружать такую картинку, если она все равно будет уменьшена до ширины главного контейнера сайта. Обычно это не больше 1200 пикс. Если картинка должна открываться в лайтбокс, т.е. всплывать по клику, то разрешение должно быть не более 1200 пикс. Поэтому уменьшаем картинку в 2 этапа — сначала уменьшаем ее разрешение, а потом сохраняем для Web-устройств.

Откроем желаемую картинку в фотошоп: Файл -> Открыть. Далее уменьшаем размер картинки: Изображение -> Размер изображения.

Далее, сохраним уже уменьшенный файл в формате JPG: Файл -> Сохранить для Web или жмем комбинацию клавиш Ctrl + Shift + Alt + S. В открывшемся окне выбираем формат — JPG и выставляем качество — Высокое — 60. Качество — 60 — это как раз то оптимальное соотношение качество/вес файла.

Обратите внимание на вес файла после сохранения — 250,9 Кб. А было ведь 1,47 Мб, вес сократился чуть более в 5 раз.

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

Как оптимизировать несколько картинок за один раз?

Способ, что мы рассмотрели выше позволяет оптимизировать картинки по одному. Есть, конечно, в фотошоп функционал для массовой обработки, но я в нем так и не разобрался. Для массового изменения размеров картинок я использую небольшую программку — XnView MP. Я записал небольшой видеообзор по работе с этой программой, можете посмотреть. Особенно порадовала меня программа тем, что на выходе получались уже оптимизированные файлы для Web, причем еще оказалось, что XnView MP лучше оптимизирует картинки, чем фотошоп.

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

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

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

Всем пока. До новых встреч!

Заур Магомедов

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

У меня вы можете:

Оцените пост:

Загрузка…

Проверка орфографии

zaurmag.ru

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *