Здравствуйте, дорогие друзья. Сегодня я расскажу как оптимизировать изображения для ускорения загрузки сайта. Но, для начала расскажу, почему ни писал почти неделю. Эту неделю я боролся с бюрократией, пытался получить новый загранпаспорт. Вы просто не представляете, что сейчас творится в паспортных столах, — это просто кошмар (очереди, давка, скандалы). Ещё хуже, чем обычно. Всё очень медленно. У меня такое ощущение, что в первый раз я получил паспорт гораздо проще и быстрей.
В общем, «плюнул» я на это. Зашёл на просторы Интернета, зарегистрировался на портале госуслуг и оформил получение данной услуги, без очередей и траты драгоценного времени.
А к чему я это всё, а к тому, что эта ситуация напоминает мне положение дел с сайтами и блогами. Медленная загрузка сайта не только раздражает, но вообще заставляет многих посетителей закрыть сайт, не дождавшись загрузки. Посетители могут даже не узнать о вашем полезном контенте, если не дождутся загрузки сайта.
И хотя сегодня практически у каждого пользователя высокоскоростной интернет и видимая загрузка сайтов не так заметна, поисковики всё же учитывают параметр «Скорость загрузки страницы» , как один из факторов ранжирования сайта. Плюс ко всему скорость загрузки положительно влияет на поведенческие факторы, что тоже не маловажно.
Безусловно, параметров, влияющих на скорость загрузки сайта, достаточно, много. И в одной статье рассмотреть всё это не возможно. Поэтому начнём с самой распространённой причины, замедляющей скорость загрузки сайта, — не оптимизированные изображения.
Где узнать о причинах медленной загрузки сайта
Сервисов для проверки скорости загрузки сайта – много. Но мы поговорим о сервисах, которые показывают причины медленной загрузки.
Я использую два сервиса:
Для начала скачиваете изображение к себе на компьютер, редактируете, и закачивает обратно по тому же адресу. В 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». Это параметр сообщает, что на сайте есть одинаковые изображения, которые можно объединить в спрайты для ускорения загрузки сайта. Но в двух словах этого не рассказать. Поэтому об этом поговорим в следующих статьях. А пока у вас есть над чем работать.
Так же посмотрите видеоурок, в нём я наглядно показываю как пользоваться сервисами и как оптимизировать изображения.
На этом у меня сегодня всё. Желаю вам удачи, друзья. Оптимизируйте свои изображения, это первый шаг на пути к быстрой загрузке сайта.
До встречи в следующих статьях.
Оптимизация картинок – важная часть продвижения сайта. Правильно оптимизированные изображения способствуют высшемуранжировнию ресурса в поисковой выдаче и ускоряют скорость загрузки контента. Что же такое оптимизация картинок и как она выполняется?
Оптимизация изображений – это уменьшение размера изображений, использованных в дизайне сайта и в статьях, без потери качества.
Перед тем, как начинать процесс «сжимания» картинок, оцениваем скорость загрузки 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-сервисы при сжимании изображения ухудшают качество. Иногда всего на несколько пикселей, но искажения все же заметны. То есть размер изображений нас вполне может устраивать, а вот качество оставляет желать лучшего.
Ilya is a Developer Advocate and Web Perf Guru
Изображения - те ресурсы, которые часто занимают много места на странице и весят больше всего. Благодаря их оптимизации мы можем значительно уменьшить количество скачиваемых данных и улучшить работу сайта. Чем больше сжато изображение, тем меньше пропускной способности канала занимает скачивание и тем быстрее браузер сможет показать страницу пользователю.
Оптимизация изображений - это одновременно наука и искусство. Мы можем назвать это искусством, потому что никто не может дать определенный ответ, как лучше всего сжать конкретное изображение. Однако это и наука, ведь в нашем распоряжении есть разработанные техники и алгоритмы, которые могут значительно уменьшить размер ресурса. Чтобы выбрать оптимальные настройки для изображения, необходимо учесть много факторов: возможности формата, закодированные данные, качество, количество пикселей и т. д.
Удаление и замена изображений
TL;DR
- Удалите ненужные изображения.
- При возможности применяйте эффекты CSS3.
- Используйте веб-шрифты вместо кодировки текста в изображениях.
Прежде всего задайте себе вопрос: действительно ли это изображение необходимо? Хороший дизайн должен быть простым и не ухудшать производительность. Лучше всего просто удалить ненужное изображение, поскольку оно весит гораздо больше байтов по сравнению с HTML, CSS, JavaScript и другими ресурсами на странице. При этом одно изображение в нужном месте может заменить длинный текст, поэтому вам нужно самостоятельно найти баланс и принять правильное решение.
После этого вы должны проверить, нельзя ли достигнуть желаемого результата более эффективным путем:
- Благодаря CSS-эффектам (градиентам, теням и т. д.) и CSS-анимации вы можете создать ресурсы, которые четко выглядят при любом разрешении и масштабе и весят гораздо меньше, чем изображения.
- Веб-шрифты позволяют использовать красивые надписи, сохраняя возможность выбирать и искать текст, а также менять его размер. Благодаря этому работа с вашим ресурсом станет ещё удобнее.
Избегайте кодирования текста в изображении. Красивые надписи необходимы для качественного дизайна, продвижения бренда и удобной работы с ресурсом, но текст в изображении только мешает всему этом. Его нельзя выбрать, найти, увеличить, скопировать, а также он плохо смотрится на устройствах с высоким разрешением. Конечно, веб-шрифтам также требуется оптимизация, но они помогут избежать вышеперечисленных проблем. Для отображения текста всегда выбирайте именно их.
Векторные и растровые изображения
TL;DR
- Векторный формат отлично подходит для изображений из геометрических фигур.
- Качество векторных изображений не зависит от масштаба и разрешения.
- Используйте растровый формат для сложных изображений с множеством нестандартных форм и деталей.
Если вы решили, что для достижения результата вам следует использовать именно изображение, выберите для него подходящий формат:
Векторное изображение
Растровое изображение
- В векторной графике для отображения картинки используются линии, точки и многоугольники.
- В растровой графике индивидуальные значения каждого пикселя в прямоугольной сетке кодируются, и на их основе показывается изображение.
У каждого формата есть свои достоинства и недостатки. Векторный формат идеально подходит для изображений из простых геометрических фигур (например, логотипов, текста, значков и т. д.). Они остаются четкими при любом разрешении и масштабе, поэтому используйте этот формат для больших экранов и ресурсов, которые должны быть показаны в разных размерах.
Однако векторные форматы не подходят для сложных изображений (например, для фотографий). SVG-разметки для описания всех фигур может стать слишком много, но полученное изображение все равно будет выглядеть нереалистично. В этом случае вам стоит использовать растровый формат изображений, например GIF, PNG, JPEG или новые форматы JPEG-XR и WebP.
Качество растровых изображений зависит от разрешения и масштаба: при увеличении оно становится размытым и распадается на пиксели. В результате вам может понадобиться сохранить несколько версий растрового изображения в разных разрешениях.
Оптимизация для экранов с высоким разрешением
TL;DR
- На экранах с высоким разрешением один CSS-пиксель состоит из нескольких экранных пикселей.
- В изображениях высокого разрешения пикселей и байтов гораздо больше, чем в обычных.
- Техники оптимизации можно применять к изображениям любого разрешения.
Говоря о пикселях, следует различать экранные и CSS-пиксели. CSS-пиксель может соответствовать одному или нескольким экранным. Это сделано для того, чтобы на устройствах с большим количеством экранных пикселей изображение было более четким и детализированным.
Конечно, на экранах с высоким DPI (HiDPI) графика выглядит очень красиво. Однако, чтобы хорошо смотреться в высоком разрешении, наши изображения должны быть более детализированными. Но у нас есть решение: векторные форматы идеально подходят для этой задачи. Они сохраняют четкость в любом разрешении. Даже если увеличатся затраты на отрисовку мелких деталей, мы по-прежнему используем один независимый от размера экрана ресурс.
С другой стороны, с растровыми изображениями возникает гораздо больше сложностей, потому что они кодируют данные изображения в каждом пикселе. Таким образом, чем выше число пикселей, тем больше размер такого ресурса. В качестве примера рассмотрим разницу между фотографиями размером 100х100 CSS-пикселей:
Когда мы вдвое увеличиваем разрешение экрана, общее количество пикселей возрастает сразу в четыре раза: в два раза по вертикали и в два по горизонтали.
Подведем итог. На экранах с большим разрешением графика выглядят очень привлекательно, поэтому вы сможете создать хорошее впечатление о вашем сайте. Однако для таких экранов нужны изображения с высоким разрешением. Выбирайте векторные форматы, потому что они четко выглядят на любых устройствах. Если необходимо использовать растровое изображение, добавьте несколько оптимизированных вариантов ресурса (см. далее).
Оптимизация векторных изображений
TL;DR
- SVG - это формат изображений на основе XML
- SVG-файлы нужно минифицировать для уменьшения размера.
- Сжимайте SVG-файлы с помощью GZIP.
Все современные браузеры поддерживают формат SVG (Scalable Vector Graphics). Это формат изображений на основе XML для двухмерной графики. Разметку SVG можно встроить прямо в страницу или на внешний ресурс. В свою очередь, файл SVG можно создать с помощью любого ПО для векторного рисования или вручную в текстовом редакторе.
Пример выше отрисовывает простую круглую форму с черной границей и красным фоном. Она была экспортирована из Adobe Illustrator. Легко догадаться, что она содержит множество метаданных, например информацию о слоях, комментарии и пространства имен XML, которые чаще всего не нужны для отобрадения ресурса в браузере. В результате, следует минифицировать файлы SVG с помощью инструмента svgo .
Например, svgo уменьшает размер приведенного выше файла SVG на 58% с 470 до 199 Б. Кроме того, поскольку SVG - это формат на основе XML, мы может применить сжатие GZIP для уменьшения его размера при передаче. Убедитесь, что на вашем сервере настроено сжатие SVG-ресурсов.
Оптимизация растровых изображений
TL;DR
- Растровое изображение - это сетка пикселей.
- В каждом пикселе закодирована информация о цвете и прозрачности.
- Чтобы уменьшить размер изображения, компрессоры используют различные методы для снижения количества битов на пиксель.
Растровое изображение - это просто двухмерная сетка отдельных пикселей. Например, изображение 100x100 пикселей - это последовательно из 10 000 пикселей. В каждом из пикселей содержатся значения RGBA: красного (R), зеленого (G) и синего (B) канала, а также альфа-канала, или канала прозрачности (A).
Браузер устанавливает 256 значений (оттенков) для каждого канала, которые в пере счете занимают 8 битов на канал (2 ^ 8 = 256) и 4 байта на пиксель (4 канала x 8 бит = 32 бита = 4 байта). Таким образом, зная размеры сетки, мы легко можем вычислить размер файла:
- Изображение 100 x 100 пикс. состоит из 10 000 пикселей
- 10 000 пикс. x 4 Б = 40 000 Б
- 40 000 Б / 1024 = 39 КБ
Может показаться, что 39 КБ - это совсем немного для изображения размером 100x100 пикселей. Однако при увеличении размера файл будет весить гораздо больше, и на его скачивание придется потратить много времени и ресурсов. Сейчас это изображение не сжато. Что можно сделать, чтобы уменьшить его размер?
Один из простых способов оптимизации изображения - снизить глубину цвета с 8 битов на канал, выбрав палитру меньшего размера. Установив глубину в 8 битов на канал, мы получаем 256 значений для канала и 16 777 216 (2563) цветов. Может, стоит уменьшить палитру до 256 цветов? Тогда нам будет нужно всего 8 бит для всех каналов RGB и только 2 байта на пиксель, а не 4, как раньше. Нам удалось сжать изображения в два раза!
Оптимизировав данные в отдельных пикселях, обратим внимания на соседние пиксели. Оказывается, цвет таких пикселей на многих изображениях, особенно на фотографиях, часто похож. Благодаря этому компрессор может применять дельта-кодирование . Вместо сохранения отдельных значения для каждого пикселя можно указать только разницу между соседними пикселями. Если они одинаковы, то дельта равна нулю, и нам нужно сохранить всего один бит. Но это ещё не все!
Мы часто не замечаем разницы в некоторых оттенках, поэтому мы можем оптимизировать изображение, уменьшив или увеличив палитру для этих цветов. У каждого пикселя в двухмерной сетке есть несколько соседей, поэтому мы можем усовершенствовать дельта-кодирование. Сконцентрируетесь не на непосредственных соседях пикселя, а на целых блоках похожих цветов и закодируйте их с помощью разных настроек.
Как вы видите, оптимизация изображения становится все сложнее и интереснее. На эту тему ведутся научные и коммерческие исследования, потому что изображения весят много байтов, и развивать новые техники сжатия выгодно. Если вы хотите узнать больше, прочитайте или ознакомьтесь с конкретными примерами в .
Итак, как весь этот сложный материал поможет нам оптимизировать изображения? Повторим: нам не нужно изобретать новые методы сжатия. Однако нам нужно знать о ключевых аспектах вопроса: пикселях RGBA, глубине цвета и разных техниках оптимизации. Это необходимо, чтобы продолжить разговор о растровых форматах.
Сжатие данных с потерями и без потерь
TL;DR
- Учитывая особенности человеческого зрения, для изображений можно применять сжатие данных с потерями.
- Для оптимизации изображения используется сжатие данных с потерями и без потерь.
- Разница в форматах изображений - это отличия в том, как и какие алгоритмы этих сжатий применяются для уменьшения размера ресурса.
- Не существует самого лучшего формата или настройки качества, которые подошли бы для всех изображений. При сочетании разных компрессоров и ресурсов мы никогда не получим одинаковый результат.
Для определенных типов данных, например исходного кода страницы или исполняемого файла, крайне важно, чтобы компрессор не удалял и не менял первоначальную информацию. Из-за пропавшего или неправильного бита данных может быть полностью искажено или уничтожено значение контента файла. Однако другие типы данных вполне можно передать в приблизительном виде.
Из-за особенностей человеческого зрения мы можем не заметить отсутствия какой-либо информации о каждом пикселе, например мы не увидим различия между некоторыми оттенками цвета. Поэтому мы можем использовать меньше битов для кодирования некоторых цветов и благодаря этому уменьшить размер ресурса. Таким образом, стандартная оптимизация изображения состоит из двух основных этапов:
- Сжатие изображения [с потерями](http://ru.wikipedia.org/wiki/Сжатие_данных_с_потерями) , при котором удаляются некоторые данные пикселей.
- Сжатие изображения [без потерь](http://en.wikipedia.org/wiki/Lossless_compression) , при котором данные пикселей сжимаются.
Выполнять первый шаг необязательно. Точный алгоритм зависит от определенного формата изображения, однако учтите, что каждое изображение можно сжать с потерей данных. На самом деле, разница между форматами изображений, например GIF, PNG, JPEG и т. д., состоит именно в комбинации различных алгоритмов сжатия данных с потерей и без потерь.
Как лучше всего совмещать сжатие с потерями и без потерь? Это зависит от самого изображения и других условий, например баланса между размером файла и шумами. Чтобы получить четкое детализированное изображение, вы можете не применять сжатие с потерями. Если же для вас больше важен размер файла, смело используйте этот метод оптимизации. Единого варианта настроек для всех изображений не существует. Вы сами должны определить желаемый результат и принять решение.
При использовании сжатия с потерями, например JPEG, вы сможете выбрать настройки качества (вроде ползунка Сохранить для Web в Adobe Photoshop). Обычно это значение от 1 до 100, которое определяет применение алгоритмов сжатия с потерями и без. Не бойтесь снижать качество: часто изображение по-прежнему хорошо выглядит, а размер файла становится значительно меньше.
Note: Обратите внимание, изображения с одинаковыми настройками качества, но в разных форматах будут отличаться. Это происходит из-за разницы в алгоритмах сжатия изображения. Например, JPEG и WebP с настройками качества 90 выглядят по-разному. На самом деле, даже изображения в одном формате и с одинаковыми настройками качества могут отличаться в зависимости от использованного компрессора.Выбор формата изображения
TL;DR
- Выберите подходящий стандартный формат: GIF, PNG или JPEG.
- Попробуйте установить разные настройки для каждого формата (качество, размер палитры и т. д.) и выберите наиболее подходящие.
- Для современных клиентов добавьте ресурсы в форматах WebP и JPEG XR масштабированные изображения:
- Масштабирование изображений - один из самых простых и эффективных методов оптимизации.
- Если вы используете изображения большого размера, пользователь может скачивать лишние данные.
- Reduce the number of unnecessary pixels by scaling your images to their display size Снизьте количество ненужных пикселей, уменьшив изображение до отображаемого размера.
Помимо алгоритмов сжатия с потерями и без потерь, в форматах изображения поддерживаются другие функции, например анимация и канал прозрачности (альфа-канал). Таким образом, при выборе подходящего формата вам нужно учесть желаемый визуальный эффект и требования к сайту или приложению.
| Формат | Прозрачность | Анимация | Браузер |
|---|---|---|---|
| GIF | Да | Да | Все |
| PNG | Да | Нет | Все |
| JPEG | Нет | Нет | Все |
| JPEG XR | Да | Да | IE |
| WebP | Да | Да | Chrome, Opera, Android |
Существуют три стандартных формата изображений: GIF, PNG и JPEG. Кроме них некоторые браузеры поддерживают новые форматы WebP и JPEG XR, для которых доступно большее сжатие и дополнительные возможности. Итак, какой формат выбрать?
- Изображение должно быть анимированным? Тогда выбирайте формат GIF.
- Цветовая палитра GIF состоит всего из 256 цветов. Это недостаточно для большинства изображений. Кроме того, формат PNG-8 лучше сжимает изображения с маленькой палитрой. Таким образом, выбирайте GIF, только если вам требуется анимация.
- Нужно сохранить все мелкие детали в самом высоком разрешении? Используйте PNG.
- В формате PNG не применяется сжатие с потерей данных, не считая выбора размера палитры. Благодаря этому изображение сохраняется в самом высоком качестве, но весит гораздо больше, чем файлы других форматов. Используйте этот формат только там, где это необходимо.
- Если изображение состоит из геометрических фигур, конвертируйте его в векторный (SVG-) формат!
- Избегайте текста в изображениях. Его нельзя выбрать, найти или увеличить. Если текст необходим для создания дизайна, используйте веб-шрифты.
- Вы оптимизируете фотографию, скриншот или изображение похожего типа? Используйте JPEG.
- В JPEG используется комбинация сжатия с потерями и без потерь для уменьшения размера файла. Чтобы выбрать лучшее сочетание качества и размера изображения, попробуйте установить несколько уровней качества JPEG.
Определив подходящий формат и его настройки для всех ресурсов, добавьте дополнительный вариант в WebP и JPEG XR. Это новые форматы, которые пока не поддерживаются во всех браузерах. Однако с их помощью может значительно уменьшить размер файла. Например, WebP сжимает изображение на больше, чем JPEG.
Поскольку WebP and JPEG XR поддерживаются не во всех браузерах, вам надо добавить дополнительную логику в приложения или на серверы, чтобы отправлять пользователю соответствующий ресурс.
- Некоторые сети доставки контента предоставляют услуги по оптимизации изображений, в том числе предоставление файлов в JPEG XR и WebP.
- Некоторые инструменты с открытым кодом, например PageSpeed для Apache и Nginx, автоматически производят оптимизацию, преобразование и доставку соответствующих ресурсов.
- Вы можете добавить дополнительную логику приложения, чтобы определить клиент и его поддерживаемые форматы, а затем отправить оптимальный вариант ресурса.
Обратите внимание, что если вы используете Webview для отрисовки контента в нативное приложении, тогда вы можете полностью управлять клиентом и использовать только WebP. В приложениях Facebook, Google+ и т. д. используются именно WebP-ресурсы, так как они действительно повышают производительность. Чтобы узнать больше об этом формате, посмотрите презентацию WebP: Deploying Faster, Smaller, and More Beautiful Images от Google I/O 2013.
Инструменты и выбор параметров
Не существует одного идеального формата, инструмента или алгоритма оптимизации, который бы подошел бы для всех изображений. Чтобы получить наилучший результат, вы должны выбрать формат и его настройки в зависимости от контента, а также визуальных и технических требований.
| Инструмент | Описание |
|---|---|
| gifsicle | создает и оптимизирует GIF-изображения |
| jpegtran | оптимизирует JPEG-изображения |
| сжимает PNG без потерь | |
| pngquant | сжимает PNG с потерями |
Не бойтесь экспериментировать с параметрами компрессоров. Установите разные настройки качества, выберите подходящий вариант и примените его к другим похожим изображениям на сайте. Но помните: не все графические ресурсы нужно сжимать одним и тем же методом!
Масштабирование передаваемых изображений
TL;DR
Warning: A tag here did NOT convert properly, please fix! ""Размер изображения - это сумма пикселей, умноженная на число байтов, используемых для кодирования каждого пикселя. Оптимизация изображения сводится к уменьшения этих двух составляющих.
Таким образом, один из самых простых и эффективных методов оптимизации - убедиться, что размер отправляемого изображения не больше, чем его отображаемый размер в браузере. Ничего сложного, но многие сайты совершают серьезную ошибку. Они размещают крупные ресурсы, и браузеру приходится самому масштабировать и отображать их в более низком разрешении. Помимо всего прочего, это увеличивает нагрузку на процессор пользователя.
Отправляя лишние пиксели и предоставляя браузеру самому масштабировать ресурс, мы упускаем возможность оптимизировать количество байтов, нужных для отрисовки страницы. Обратите внимание, что при масштабировании не только уменьшается количество пикселей, но и меняется исходный размер изображения.
| Исходный размер | Отображаемый размер | Ненужные пиксели |
|---|---|---|
| 110 x 110 | 100 x 100 | 110 x 110 - 100 x 100 = 2100 |
| 410 x 410 | 400 x 400 | 410 x 410 - 400 x 400 = 8100 |
| 810 x 810 | 800 x 800 | 810 x 810 - 800 x 800 = 16100 |
Обратите внимание, что во всех трех случаях отображаемый размер всего лишь на 10 пикселей меньше, чем исходный. Однако чем больше первоначальный размер изображения, тем больше лишних данных приходится кодировать и отправлять. Даже если вам не удастся установить полное совпадение исходного и отображаемого размеров, вы должны максимально сократить количество ненужных пикселей.
Список методов оптимизации
Оптимизация изображений - это одновременно наука и искусство. Мы можем назвать это искусством, потому что никто не может дать определенный ответ, как лучше всего сжать конкретное изображение. Однако это и наука, ведь в нашем распоряжении есть разработанные техники и алгоритмы, которые могут значительно уменьшить размер ресурса.
Помните о некоторых советах и техниках, которые помогут вам оптимизировать изображения:
- Выбирайте изображения в векторных форматах. Их качество не зависит от разрешения и масштаба, поэтому они подходят для больших экранов и разных типов устройств.
- Минифицируйте и сжимайте SVG-ресурсы. Многие графические приложения добавляют XML-разметку, которая часто содержит ненужные метаданные. Ее можно удалить. Убедитесь, что на серверах настроено GZIP-сжатие для SVG-ресурсов.
- Выбирайте наиболее подходящие растровые форматы. Определите необходимые требования к изображениям и выберите нужный формат для каждого ресурса.
- Пробуйте разные настройки качеств для растровых форматов. Не бойтесь снижать качество: часто изображение по-прежнему хорошо выглядит, а размер файла становится значительно меньше.
- Удаляйте ненужные метаданные. Многие растровые изображения содержат лишнюю информацию о ресурсе: геоданные, сведения о камере и т. д. Для их удаления используйте соответствующие инструменты.
- Масштабируйте изображения. Уменьшайте файлы на сервере, чтобы исходный и отображаемый размеры были практически одинаковы. Обратите особое внимание на большие изображения. Если их масштабирует браузер, производительность вашего сайта значительно снижается.
- Автоматизируйте. Используйте надежные инструменты и ПО, которые будут автоматически оптимизировать изображения на вашем сайте.
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License , and code samples are licensed under the Apache 2.0 License . For details, see our . Java is a registered trademark of Oracle and/or its affiliates.
Обновлено Август 8, 2018
По словам сотрудников Яндекса, “картинки являются очень важной частью нашего поиска. Они помогают пользователям увидеть прохождение Венеры по диску Солнца, узнать, как выглядит йоркширский терьер или новый седан tesla, состав группы свинцовый цеппелин и как завязать галстук”.
Благодаря ранжированию в поиске по изображениям, сайт сможет получать значительную долю трафика. В том числе и по коммерческим запросам, когда пользователь хочет увидеть, как выглядит тот или иной товар. Кроме этого, такие положительные поведенческие факторы, как количество переходов, продолжительность и глубина просмотра сайта посетителями, пришедшими из поиска по изображениям, оказывают влияние и на ранжирование сайта в органическом поиске по всем запросам. А привлечение целевой аудитории на коммерческий сайт даже из такого источника, как поиск по изображениям, при грамотной подаче контента может привлечь на сайт значительное количество целевых посетителей, которые будут совершать конверсионные действия.
Просмотр изображений в сервисе Яндекс.Картинки
В материале пойдет речь о стандартных методах оптимизации изображений, применимых для всех типов сайтов и учитывающихся всеми поисковиками. Сейчас каждый из них будет рассмотрен более подробно, также будет дано расширенное описание каждого пункта рекомендаций с пояснениями.
Оптимизация изображений
Наличие на сайте качественных изображений — одна из составляющих успеха большинства интернет-проектов. Пользователи предпочитают получать информацию в виде графических образов, а не текста. Она быстрее и лучше воспринимается, проще запоминается. Для повышения конверсии сайта и улучшения поведенческих факторов необходимо постоянное развитие графического контента. Нужно стараться максимально визуализировать все аспекты и нюансы имеющейся информации. Таким образом пользователи захотят просматривать больше страниц сайта, им будет проще определиться с выбором и совершить конверсионное действие.
Польза от оптимизации изображений недооценивается многими специалистами. Однако благодаря несложным действиям можно получить отличный результат в виде лояльных пользователей, количество которых из поиска по изображениям, а также из органического поиска будет увеличиваться.
Атрибуты изображений alt и title
Важнейшими атрибутами изображений, которые можно указать в соответствующем теге HTML-кода, являются атрибуты alt и title. Их значения — одни из главных источников информации об изображении для поисковых систем.
Атрибут alt — это альтернативный источник информации для пользователей, у которых показ изображений в браузере отключен. Если атрибут alt определен, то, когда показать картинку будет невозможно, на ее месте отобразится текст атрибута:
Изображение c заданным атрибутом alt
Без заданного атрибута alt изображение будет показано как пустое:
Изображение без заданного атрибута alt
Особенно важно описание картинок с помощью атрибута alt для сайтов, контент которых составляют преимущественно изображения.
Атрибут title предоставляет дополнительную информацию о картинке. Текст, заключенный в этом атрибуте, появляется при наведении курсора на картинку:
Изображение c заданным атрибутом title
Итак, рассмотрим основные рекомендации поисковых систем по работе с изображениями сайта, чтобы на их основе, а также на основе практики продвижения сайтов определить список действий, благодаря которым можно получить максимальный эффект от оптимизации изображений.
Не встраивайте значимый текст в изображения. Иными словами, все важные надписи должны быть в текстовой форме.
Давайте файлам изображений подробные, информативные названия. В названии файла лучше всего использовать 1-2 слова, описывающих изображение.
Вносите подробный текст в тег alt .
Оптимальный вариант:
Предоставляйте достаточно контекста для изображений. Окружающий изображение текст должен соответствовать тому, что на нем изображено.
Подумайте о том, как лучше всего защитить свои изображения. Это могут быть различные варианты, например, нанесение водяных знаков, размещение кода для вставки изображения на другой сайт, также можно сделать изображения доступными по лицензии, требующей ссылки на источник, например, лицензии Creative Commons.
Размещение фотографий хорошего качества. Качественные фото не только помогают пользователям увидеть все мелкие детали на изображении, но и лучше выполняют функцию уменьшенных картинок в результатах поиска, и с большей вероятностью будут нажаты пользователями.
Создать для каждого изображения отдельную целевую страницу, где будет собрана вся связанная с ним информация. Это актуально для сайтов, где изображения — одни из основных элементов контента, или для интернет-магазинов.
Старайтесь размещать изображения в верхней части страниц, где их можно увидеть сразу. Это позволит быстрее заинтересовать пользователя в просмотре страницы до конца.
Старайтесь структурировать каталоги таким образом, чтобы похожие изображения хранились вместе.
Укажите ширину и высоту всех изображений. Это позволит ускорить загрузку страниц, т.к. браузеры могут отображать их еще до загрузки изображений, если известны размеры места, которое зарезервировано для незаменяемых элементов.
Не забудьте о текстах, описывающих картинку:
- Подписи к картинкам (alt, title);
- Прилегающий к картинке текст;
- Имена файлов и скриптов, в том числе с учетом транслитерации и упрощенного подстрочного перевода;
- Тексты ссылок на картинки с других страниц и с других сайтов;
- Тексты и заголовки коротких документов, обрамляющих одиночную картинку.
Именно по текстам, которые относятся к картинкам, Яндекс находит изображения по запросам пользователей.
Яндекс индексирует картинки только стандартных графических форматов (JPEG, GIF и PNG). Перед загрузкой изображения на сайт стоит убедиться, что оно сохранено в одном из этих форматов.
На ранжирование также влияет качество самого изображения.
В результатах поиска для каждой найденной картинки показывается ссылка на страницу, на которой текстовое описание картинки лучше соответствует словам запроса. Таким образом, текстовый контент страницы — важный фактор ранжирования в поиске по картинкам. Как и в случае с Google, он должен содержать максимум информации о том, что изображено на картинке, а она должна дополнять текст.
Действия, которые необходимо выполнить для оптимизации изображений
1. Изображения должны храниться и открываться на том же сервере и хостинге, что и сам сайт. Это один из показателей качества сайта для поисковых систем. Только серьезные сайты и компании могут позволить себе хранить изображения на своем хостинге или сервере, т.к. это требует дополнительных материальных затрат. Кроме этого, такие изображения будут быстрее загружаться.
2. Использовать оригинальные высококачественные изображения с максимальным разрешением. Эти изображения, в свою очередь, должны обрабатываться системой управления сайта и показываться на соответствующих страницах в меньшем размере, чтобы страница быстро загружалась. При нажатии на изображение оно должно открываться в максимально возможном оригинальном размере, который только доступен.
3. Атрибуты alt и title у изображений должны быть заполнены таким образом, чтобы максимально точно описывать его содержимое. В них необходимо использовать 1-2 ключевых слова, под которые оптимизирована страница. Лучше всего, если это будет основное ключевое слово, совпадающее с заголовком страницы и анкором ссылки на нее из основного меню сайта.
4. Под изображениями разместить подпись, которая будет также показываться снизу при нажатии на него. Подпись может быть идентичной атрибуту alt. Подпись должна стоять в том же абзаце “P”, ячейке таблицы “TD” или теге “DIV”, что и изображение.
5. Страница, на которой размещено изображение, должна содержать соответствующий текст. Текст должен быть в том числе и о том, что представлено на изображении. Оно, в свою очередь, дополняет этот текст.
6. В атрибутах указать высоту и ширину изображения.
7. Переименовать файлы изображений, написав их транслитом. В имени файла в 1-2 словах указать то, что содержится в изображении.
8. К изображениям можно дополнительно добавить атрибут LONGDESC. Подробнее о нем: http://htmlbook.ru/html/img/longdesc.
9. В свойствах jpg — файлов оригинальных изображений заполнить следующие поля:
— Название: совпадает с атрибутом alt изображения;
— Тема: название раздела, к которому относится товар;
— Оценка: 5 звезд;
— Ключевые слова: keywords со страницы раздела, к которому относится товар;
— Комментарии: описание товара из поля «О товаре» со страницы товара;
— Размеры: максимальный оригинальный размер;
— Ширина: максимальный оригинальный размер;
— Высота: максимальный оригинальный размер;
— Горизонтальное разрешение: максимальное оригинальное значение;
— Разрешение по вертикали: максимальное оригинальное значение;
— Глубина цвета: максимальное оригинальное значение;
— Владелец: название компании;
— Компьютер: название компании.
Заключение
Как видно, советов и рекомендаций по оптимизации изображений от самих поисковых систем вполне достаточно, чтобы иметь общее представление о том, что нужно делать, чтобы сайт смог нормально ранжироваться в поиске по картинкам. Многие из рекомендаций пересекаются между собой, некоторые — уникальны. Чтобы реализовать большинство из рекомендаций, достаточно единоразовых действий, благодаря которым будет достигнут стабильный положительный результат. Не стоит пренебрегать возможностью получить значительное количество посетителей на свой ресурс. Всегда следует размещать как можно больше графического контента, благодаря которому сайт сможет завоевать доверие постоянных и новых посетителей.
Распределение показателей ранжирования, не связанных с ключевыми словами, по шкале от 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-специалисты часто забывают оптимизировать изображения, недооценивая влияния этого процесса на прибыль. Но уделив оптимизации достаточно времени и внимания, вы раскроете очередной потенциал роста бизнеса. Надеемся, наш гайд поможет в этом.
