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

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

19.02.2020 14 Автор Андрей

Доброго дня, друзья.

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

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

Вся оптимизация сводится к выполнению простых действий:

  • Подобрать картинку и проверить ее на уникальность;
  • Изменить размер картинки, если в этом есть необходимость;
  • Правильно назвать картинку и загрузить ее на сайт.

Подбор картинки и проверка ее на уникальность.

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

Изменение размера картинки.

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

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

В Яндекс.Картинки я нашел картинку, которая мне понравилась и скачал ее.

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

Размер этой картинки составил 1280х720 пикселей. В большинстве случаев на сайтах и блогах используется ширина 600 или 800 пикселей, поэтому эту картинку я уменьшил до размера 600х338 пикселей при помощи программы «Фотошоп». Как это я сделал, смотрите в статье «Как изменить размер картинки в Фотошопе».

Если у вас не установлена такая полезная программа на компьютере, то можно воспользоваться Photoshop-Online, которую можно найти по адресу e.photoshopline.ru. Это не программа, а онлайн – сервис. На компьютер ничего не надо устанавливать.

Заходим в этот сервис и открываем «Открыть с компьютера».

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

Находим папку с изображением и открываем его.

Если у вас не включилась русская версия программы, то нужно нажать на вкладку «More» и выбрать «Русский». У вас появится версия программы на русском языке.

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

Заходим во вкладку «Изображение» и нажимаем «Размер картинки».

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

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

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

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

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

Происходит изменение размера.

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

Скачиваем свое изображение на компьютер – нажимаем «Файл» и «Export as», выбирая формат PNG или JPG.

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

Появляется сообщение «Сохранить для web».

Ставим качество 100% и нажимаем «Сохранить».

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

Сохраняем картинку на компьютере и используем на своем сайте.

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

Часто бывает так, что при сохранении картинки ее размер в байтах превышает исходник. Чтобы этого избежать, достаточно при ее сохранении поставить качество не 100%, а например, 70% и таким образом скорректировать качество картинки и ее объем в байтах.

Правильное название картинки и загрузка на сайт.

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

Как это сделать?

Есть простой способ. Переходим на сайт в консоль управления на вкладку «Записи». Создаем новую запись через вкладку «Добавить новую».

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

Указываем заголовок статьи и нажимаем «Сохранить».

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

Скрипт WordPress автоматически переводит название статьи на английский язык.

Нажимаем «Изменить».

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

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

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

Переименовываем картинку.

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

Загружаем это изображение в выбранное место в статье через вкладку «Добавить медиафайл».

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

Заполняем специальные поля – «Атрибут alt» и «Описание» также как и название статьи. В «Описании» можно также указать дополнительно другие запросы, чтобы захватить дополнительный трафик. Настраиваем отображение файла. Нажимаем «Вставить в запись».

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

Картинку добавляем в статью и при этом она правильно оптимизирована.

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

С уважением, Андрей.