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

Published: 11 December 2018
on channel: 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

Watch video Оптимизация изображений для сайта. Сервисы онлайн online, duration hours minute second in high quality that is uploaded to the channel QURNOSOV 11 December 2018. Share the link to the video on social media so that your subscribers and friends will also watch this video. This video clip has been viewed 254 times and liked it 10 visitors.

1,487