Оптимизация изображений для сайта. Сервисы онлайн

Опубликовано: 11 Декабрь 2018
на канале: QURNOSOV

254

Сервис ILOVEIMG: https://www.iloveimg.com/ru
Транслитератор: http://translit.tsymbal.su

***

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

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

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

Итак, вот основные требования:

1. Размер изображения должен соответствовать размеру блока, в котором он находится. Если Ваш сайт адаптивен, то загружайте несколько версий изображений - для мобильных устройств, планшетов, персональных компьютеров и телевизоров.

2. Лучше, если изображение будет иметь векторный формат, к примеру, *.svg. Когда Вы загружаете фото, используйте формат *.jpg. Старайтесь обходить стороной изображения в формате *.png.

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

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

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

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

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

Следующим этапом будет сжатие изображения. Загружаем подготовленное изображение и получаем оптимизированное фото.

Теперь его можно загружать на сайт. Давайте сделаем это! Заходим в админку, переходим в раздел “Медиафайлы”. Загружаем изображение. Теперь нам нужно прописать заголовок и атрибут “alt” для поисковых систем.

Готово!

Кстати, если Вы являетесь владельцем сайта на Wordpress, то Вы можете установить плагин EWWW Image optimizer или плагин Optimus. Тогда сжатие изображений будет происходить в автоматическом режиме. Причем плагины могут оптимизировать не только загружаемые изображения, но и те, которые были загружены на сайт до установки плагина.

▪️ Мой ВК: https://vk.com/qurnosov
▪️ Мой Instagram: / qurnosov
▪️ Мой ТикТок: https://vm.tiktok.com/4JNFXY/
▪️ Тик Ток университета: https://vm.tiktok.com/ZSXExrN5/
▪️ Канал Telegram: https://t.me/qrnsv
▪️ Чат Telegram: https://t.me/qrnsv_chat

Смотрите видео Оптимизация изображений для сайта. Сервисы онлайн онлайн, длительностью часов минут секунд в хорошем качестве, которое загружено на канал QURNOSOV 11 Декабрь 2018. Делитесь ссылкой на видео в социальных сетях, чтобы ваши подписчики и друзья так же посмотрели это видео. Данный видеоклип посмотрели 254 раз и оно понравилось 10 посетителям.

2,104