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

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

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

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

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

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

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

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

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

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

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

На своем сайте я использую движок 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» и «Описание» также как и название статьи. В «Описании» можно также указать дополнительно другие запросы, чтобы захватить дополнительный трафик. Настраиваем отображение файла. Нажимаем «Вставить в запись».

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

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

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

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

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

Спасибо Вам за то, что поделились статьей в социальных сетях!
Вконтакте
Телеграм
Google
Подпишитесь на обновления блога:
Рекомендую ознакомиться с похожими статьями:
Оставлено 14 комментариев
  • Александр

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

  • AffiliateLabz

    Great content! Super high-quality! Keep it up! 🙂

  • Максим

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

    • admin

      Какими сервисами пользуешься?

      • Максим

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

        • admin

          tiny.png тоже простой инструмент для сжатия

        • Максим

          Не слышал о таком. Спасибо, попробую, может на него тоже перейду

  • Сергей

    Сейчас с доходами у населения совсем печально. А чтобы зарабатывать надо прежде всего вложить в своё обучение.

    • Андрей

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

      • Сергей

        Всё верно, и я так делаю, например рассылки+партнёрки+инвестиции+свой сайт

  • Hilary Pelzel

    As I site possessor I believe the content material here is rattling magnificent , appreciate it for your hard work. You should keep it up forever! Good Luck.

Оставить свой комментарий

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