Оптимизация картинок для сайта
Доброго дня, друзья.
Сегодня я расскажу, как правильно оптимизировать картинку перед загрузкой ее на сайт или блог.
Вся оптимизация сводится к выполнению простых действий:
- Подобрать картинку и проверить ее на уникальность;
- Изменить размер картинки, если в этом есть необходимость;
- Правильно назвать картинку и загрузить ее на сайт.
Подбор картинки и проверка ее на уникальность.
Очень часто я нахожу интересные изображения на Яндекс.Картинки и их использую, но перед использованием обязательно проверяю на уникальность. Как это сделать? Смотрите в моей статье «Проверка изображения на уникальность», здесь очень подробно я рассказал, как это сделать.
Изменение размера картинки.
Изменение размера картинки делается для того, чтобы она не занимала лишнее место на хостинге, не выходила за границы контентной части, не наезжала на сайтбар и смотрелась гармонично.
На своем сайте я использую движок 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» и «Описание» также как и название статьи. В «Описании» можно также указать дополнительно другие запросы, чтобы захватить дополнительный трафик. Настраиваем отображение файла. Нажимаем «Вставить в запись».
Картинку добавляем в статью и при этом она правильно оптимизирована.
Внедряйте и получайте результат! Если есть вопросы, обязательно задайте их в комментариях к данной статье. Постараюсь на них ответить.
С уважением, Андрей.
Отличный разбор, очень наглядно и никаких сложностей. Разобрался без трудностей с оптимизацией, спасибо.
Пожалуйста.
Great content! Super high-quality! Keep it up! 🙂
Thank You
Хорошая инструкция. Сам также делаю, только еще пропускаю через сервисы сжатия изображений. Получается экономить еще 15-30 кб с картинки.
Какими сервисами пользуешься?
В основном kraken.io. Пробовал другие, но ничего не приглянулось. У меня цепочка действий выглядит вот так — подобрал картинку на фотостоках — отфотошопил,уменьшил качество — сжал в кракене и после этого заливаю на сайт.
tiny.png тоже простой инструмент для сжатия
Не слышал о таком. Спасибо, попробую, может на него тоже перейду
Сейчас с доходами у населения совсем печально. А чтобы зарабатывать надо прежде всего вложить в своё обучение.
Сергей, полностью с тобой согласен.Я иду по пути множественных источников дохода, не надеюсь только на наемную работу.
Всё верно, и я так делаю, например рассылки+партнёрки+инвестиции+свой сайт
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.
thanks.