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

Оптимизация изображений
Автор блога
Андрей WPM

Андрей WPM

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

Приветствую всех вебмастеров! Вот наконец-то, я и добрался до написания подробного гайда (мануала), на тему – Оптимизация изображений на сайте. Тема достаточно щепетильная и далеко не маленькая, поэтому приготовьтесь к "многабукаф", их будет действительно много. В этом руководстве вы найдете всю необходимую информацию по изображениям для того, чтобы чётко понимать как их оптимизировать, как пользоваться и как с помощью них можно будет получить дополнительный трафик. Но давайте всё по порядку...

Чтобы всесторонне оптимизировать картинки на сайте, нужно предварительно понять, что за что отвечает и как работает. Только после этого, приступать к практике. Не поняв логику, для чего "это" надо, вы не добьётесь нужных результатов. Ну что ж, приступим!

 

Форматы изображений для сайта.

Формат изображений играет немаловажную роль в продвижении сайтов. От формата зависит вес самой картинки, а скорость загрузки напрямую от веса. И не для кого не секрет что, скорость загрузки влияет на позицию в выдаче (один из факторов ранжирования). Поэтому, весу изображений на сайте, нужно уделить пристальное внимание. Чем мы сегодня и займёмся в этой статье.

Для начала давайте определимся с форматами. Вот список самых популярных форматов, которые используются в web постоянно.

  1. JPG – Используется этот формат в детализированных изображениях (фотографии, скриншоты и т.д.).
  2. PNG – Используется для картинок с прозрачным фоном или для нарисованных иллюстраций (кнопки, значки, лого и т.д.).
  3. GIF – Используется для анимированных изображений и коротких видео (в основном рекламные баннеры и развлекательные картинки).
  4. SVG – Менее популярный формат. Используют его не очень часто, в виду того, что не все умеют им пользоваться. Если в дух словах – это векторный формат изображений.
  5. WEBp – Очень мощный формат, который рекомендует Google, но к сожалению, поддерживается не всеми браузерами.

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

 

Растровый формат JPG (JPEG).

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

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

домик на озере в горах
Размер оригинальной – 397kB. VS оптимизированной – 95kB.

 

Графический формат PNG.

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

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

значки шестеренки wordpress
Оригинальная – 288kB. VS Оптимизированная – 120kB.

 

Анимированный формат GIF.

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

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

анимация человек печатает на клавиатуре
Размер этой картинки – 484kB. Это очень много для сайта!

 

Векторный формат SVG.

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

В сети достаточно много негативных отзывов об этом формате и гораздо меньше возможности как то им манипулировать. Имеется ввиду, ограниченные возможности стилизации через css свойства и так далее. Если вы ещё новичок в сайтостроении, то я не рекомендую вам пока пользоваться этим форматом. Ниже несколько примеров иконок svg ( !показаны png ).


 

Веб формат WEBp.

Очень мощный, в плане оптимизации формат, но к сожалению, поддерживается ещё не всеми браузерами. В настоящий момент поддерживают только браузеры на движке WebKit (Google, Opera, Android). Возможно ещё какие-то браузеры уже его поддерживают, по крайней мере я официальных заявлений не встречал. Если вы знаете такой браузер, можете поделиться информацией в комментариях.

Визуально этот формат ничем не отличается от форматов jpg и png. Он поддерживает и детализированные изображения, и картинки с альфа каналом (прозрачностью). Плюс ко всему, весит очень мало и прекрасно сжимается. Одним словом – клад для web'а!

автомобиль bmw на улице
Изображение ни чем не отличается от обычного ( !сейчас показано jpg ).

 

Размеры и пропорции картинок.

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

Приведу пример: У меня в статье можно опубликовать картинку не более 750px по ширине. Но обычно, картинки хорошего качества гораздо бОльших размеров (1280px, 1920px и т.д.). Поэтому перед публикацией, я уменьшаю пропорции до нужных размеров, тем самым сокращаю размер практически вдвое (а иногда и втрое). При этом, картинка на сайте продолжает выглядеть так же, как если бы я загрузил оригинальное изображение. Она бы автоматически смасштабировалась под ширину страницы, но при этом вес бы её остался тот же. А как уменьшить пропорции картинок под нужный размер читайте ниже.

 

Узнаем нужный размер для статьи.

Чтобы узнать точные размеры картинок у вас в статьях, можно воспользоваться несколькими не хитрыми способами:

  1. Выделить на странице скриншотом нужную картинку, сохранить и посмотреть её размеры.
  2. Воспользоваться специальным инструментом, например экранной линейкой.

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

 

Узнаем размер с помощью скриншота.

Этот вариант сработает только если вы не увеличивали или уменьшали масштаб окна браузера. Чтобы размеры получились достоверными, масштаб окна должен ровняться 100%.

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

кнопка скриншота в браузере опера

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

Перед тем как сделать скриншот, загрузите в статью большую картинку (от 1920px и выше). Естественно, она вся не влезет по ширине страницы, поэтому WordPress её автоматически масштабирует под максимально допустимый размер, но вес останется таким же.

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

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

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

 

Узнаем размер с помощью экранной линейки.

Экранная линейка SPRuler – очень полезный инструмент в сайтостроении и блоговедении. Линейка стоит на ряду с обязательными утилитами для вебмастера как и пипетка цветов (кстати, я пользуюсь ColorMania). После установки программы, в трее появиться значок. Просто кликните на нем несколько раз, либо правой кнопкой мыши > Открыть линейку. Замерять изображение будете таким образом:

замер изображения экранной линейкой
Замеряем экранной линейкой ширину картинки.

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

 

Подгоняем размеры и пропорции изображений.

Чтобы подогнать нужные размеры и пропорции изображений, можно воспользоваться программой фотошоп или его аналогами (например Paint). Но фотошоп более функционален и лично я, отдаю предпочтение именно ему. В WordPress есть собственный инструмент редактирования изображений, только он крайне не удобный в использовании, тем не менее, обрезать до нужных размеров картинку можно. Я же буду показывать весь процесс подгона с помощью фотошопа.

Вы можете скачать PhotoShop CS6 (для слабых компьютеров), которым я сам пользуюсь на ноутбуке. В архиве активированная версия, так что, покупать ничего не придется.

Итак, открываем нужную картинку в фотошопе (по надобности дописываем текст, вставляем иллюстрации и т.д.) и нажимаем Сохранить для Web. Перед вами откроется страничка сохранения, на ней нужно выбрать следующие опции:

сохранение изображений для web в фотошопе
Файл > Сохранить для Web > JPEG > 80% > 750px > Сохранить.

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


 

Оптимизация изображений с помощью сжатия.

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

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

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

 

Сжимаем картинки через онлайн сервис Compressor.

У данного сервиса отличный алгоритм сжатия изображений. После процедуры их практически не отличишь друг от друга и вес значительно сокращается. Но у этого сервиса есть свой маленький недостаток – он оптимизирует только по одной фотографии и не понимает русские (кириллические) названия картинок. Зато качество работы однозначно лучше многих конкурентов. Так что, присмотреться к нему стоит.

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

главная страница сервиса compressor io
Демо страница сервиса compressor.io

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

форма загрузки изображений
Lossy – С потерей качества, Lossless – Без потери качества.

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

 

Сжимаем изображения плагином Robin Image Optimizer.

Достаточно мощный и в то же время бесплатный плагин для оптимизации изображений. Плагин от популярных разработчиков Webcraftic, которые создали бесплатный плагин оптимизации Clearfy. Обзор на этот плагин я уже писал ранее.

Итак, плагин Robin image optimizer то же имеет несколько режимов компрессии – с потерей и без потери качества. Можно настроить автоматическую оптимизацию при загрузке и тогда вообще не придется ничего делать, картинки будут сжиматься самостоятельно. Вот основные настройки этого плагина (все настройки подписаны на скриншоте, читаем внимательно!):

настройки плагина robin image optimizer
Настройки плагина с описанием каждого пункта.

Вот краткий список его достоинств:

  • 4 разных сервера оптимизации на выбор. Можно поэкспериментировать и выбрать лучшее качество.
  • Отсутствие лимитов. Многие плагины оптимизируют изображения платно. Либо это месячная подписка, либо количество. Здесь же всё бесплатно.
  • Можно включить автоматическую компрессию при загрузке. В этом случае достаточно один раз настроить плагин и забыть о нём. Все необходимые манипуляции он будет производить сам.
  • Есть возможность включить оптимизацию по расписанию. В некоторых случаях, это действительно полезная функция.
  • Можно произвести полную оптимизацию картинок с помощью кнопки или же для каждого изображения индивидуально.

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

 

Сжимаем картинки программой XnConvert.

Эта программа просто клад! Умеет работать с русскими (кириллическими) названиями картинок, полностью бесплатная, умеет оптимизировать изображения целыми папками, содержит в арсенале кучу форматов для перекодировки и многое другое.

Скачать программу можно с официального сайта разработчиков XnConvert.com абсолютно бесплатно. После установки особо ничего делать не надо. Настраивать уровень компрессии и другие параметры будете непосредственно перед самой процедурой оптимизации. Окно программы выглядит следующим образом:

главное окно программы xnconvert
Окно загрузки изображений в программе XnConvert

Во вкладке "Выходные данные" вы сможете настроить некоторые параметры один раз и больше их не трогать. Я ничего на этой странице не делал, все галочки сняты. Такие настройки дают максимальную оптимизацию. Единственное, иногда добавляю к паттерну имени {Filename} цифры, чтобы различать копии изображений.

окно настроек выходных данных
Настройки выходных данных изображений XnConvert

А вот в следующем окне можно экспериментировать как вам удобно. Я обычно придерживаюсь 80% качества. При таком проценте изменения практически не заметны, зато вес улетает с картинок будь здоров!

окно настроек уровня сжатия
Настройки уровня оптимизации изображений XnConvert

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

Данной программой вы сможете не только оптимизировать изображения, но и конвертировать их в другие форматы, в том числе в WEBp и обратно! Список насчитывает более 20 форматов. Настройки находятся во вкладке Формат.

Чтобы посмотреть на результат работы этих трёх инструментов, можете скачать подготовленный архив. В нем вы найдете оригинальное (обрезанное) изображение и 3 результата. Обратите внимание на качество – оно не изменилось.

пример-оптимизации.zip


 

Правильные названия изображений.

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

  1. Название картинки должно быть написано латинскими буквами.
  2. Оно не должно быть бессмысленным или автоматически сгенерированным.
  3. Обязательно должен быть прописан тег alt у всех картинок + подпись.

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

 

Транслитерация имени картинок.

По законам SEO, имена картинок должны не только соответствовать содержанию, но и быть написанные латинскими буквами. Прописать имена латинскими буквами можно несколькими способами.

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

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

Могу порекомендовать 3 плагина, которые отлично справляются со своей задачей:

  • Clearfy Pro от разработчиков WPShop (рекомендую).
  • Clearfy от разработчиков Webcraftic (бесплатный аналог).
  • Cyr To Lat (одноименный плагин транслитерации).

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

 

Осмысленные названия изображений.

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

 

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

 

Оптимизируем атрибут Alt.

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

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

Итак, при загрузке очередной картинки на сайт, WordPress автоматически берёт название картинки и вставляет его в поле заголовок. Пример: имя картинки красивая-картинка.jpg, а вот то что он подставит в поле заголовок – красивая-картинка, но при этом alt пустой!

 

загрузка изображений wp
Пустой атрибут альт при загрузки картинки

 

Автоматический атрибут Alt.

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

  1. Пропишем правильное название для нашей картинки – наша-супер-картинка.jpg (обратите внимание, прописываем на русском языке!).
  2. При загрузке изображения на сайт, имя картинки транслитнится на латинские буквы nasha-super-kartinka.jpg, а русское описание запишется в заголовок.
  3. С помощью хука нужно взять русское описание из заголовка наша-супер-картинка и скопировать его в атрибут Alt.
  4. После этого почистить описание и в заголовке и в атрибуте от тире между словами.

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

function wpm_replase_alt_to_title( $response ) {
  if ( ! $response['alt'] ) {
    $response['alt'] = sanitize_text_field( $response['title'] );
    $response['alt'] = str_replace( "-", " ", $response['alt'] );
    $response['title'] = $response['alt'];
  }
 return $response;
}
add_filter( 'wp_prepare_attachment_for_js', 'wpm_replase_alt_to_title' );

Данный хук нужно вставить одним из способов:

Что делает скрипт? В начале он проверяет установлен ли атрибут альт, если в нем что-то есть, то ничего не делает (чтобы не перезаписывало существующие записи). Если же атрибут пустой, то тогда копирует из заголовка в alt содержимое. Вторым шагом чистит от тире между словами. Третьим записывает очищенный вариант в заголовок обратно (не обязательно, но я рекомендую). Результат работы хука:

автоматический атрибут альт
Автоматически подставленный атрибут alt

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

 

Подпись снизу изображений.

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

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

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

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

окно настроек изображений в редакторе
Главные настройки изображений в редакторе

Главные настройки:

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

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

дополнительные настройки изображений в редакторе

Дополнительные настройки:

  • Атрибут title прописывается по желанию, я его не прописываю, потому что не люблю когда при наведении мышкой на изображение всплывают какие-то слова.
  • CSS-класс изображения используется достаточно редко, поэтому тоже никогда не заполняю.
  • Открывать в новой вкладке будет полезно когда при клике на картинку вам нужно чтобы пользователь перешел на другой сайт ( например рекламный баннер ).
  • Отношение подразумевает под собой цель ссылки ( nofollow, noreferer, noopener и так далее ).
  • CSS-класс ссылки использую постоянно для открытия картинки в лайт боксе. В главных настройках выбираю пункт Медиафайл, а здесь прописываю класс foobox.

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

 

Оптимизация изображений – Полный чеклист.

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

  1. Придумываем название картинки так, чтобы оно чётко описывало содержание и могло быть использовано в качестве атрибута Alt в дальнейшем. Например: домик-на-берегу-озера.jpg.
  2. Подгоняем размеры и пропорции картинки под нужные значения. Если до этого не замеряли ширину страницы, сделать это и запомнить результат на будущее.
  3. Оптимизируем картинки с помощью одного из трех вариантов сжатия: Онлайн сервис, плагин или программа. Стараемся сохранить качество!
  4. Перед загрузкой изображений установить плагин для транслитерации названий, чтобы при загрузки имя картинки менялось на латинские буквы автоматически.
  5. Установить на сайт скрипт-хук, который будет подставлять в поле атрибута Alt описание в автоматическом режиме при добавлении в запись.
  6. Добавляем подпись снизу изображений, которая будет описывать что вы имеете ввиду показывая эту картинку посетителям.
  7. При необходимости прописываем дополнительные атрибуты или оборачиваем картинку ссылкой при надобности.
  8. Повторять эту процедуру при каждом добавлении изображений на сайт. Взять это за привычку и не забывать.
ноутбук на рабочем столе xnconvert
Чеклист по оптимизации изображений от WPMaster.kz

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

 

Андрей WPM
Опубликовал - Андрей WPM

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


CTRL+D

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



15
Вопросы не по теме статьи, задавайте в разделе "Флудилка".

avatar
1000
  Подписаться  
новее старее
Уведомление о
Павел Коновалов
30 комм.
Павел ( konovalovpavel.ru )

Годная статья. Сам пользуешься плагином Robin? Делал эксперимент по сжатию изображений различными сервисами. Результат в этой статье https://konovalovpavel.ru/umenshit-razmer-kartinki-onlajn/
Бывает загружаю на сайт картинку большего размера, но использую плагин fancybox для увеличения.
P.S. Андрей, начиная с раздела про программу Конверт изображения отсутствуют. Смотрю в браузере Chrome.

Александр Зырян
21 комм.
Александр ( webnub.ru )

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

Rusfet
5 комм.
Rusfet ( Moy.bike )

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

Елена
1 комм.
Елена

Для новичков еще бы указать, где искать вот это: файл functions.php
За чек лист спасибо!

Eris
5 комм.
Eris

Интересно, а что лучше сжимает подготовленные в Фотошоп картинки: бесплатный Clearfy или прога xnConvert?