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

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

26 августа, 2020

Оптимизация графики является весьма актуальной темой 2020 года. Я нашел отличный бесплатный сервис по оптимизации растровых изображений. Буду рад рассказать вам о нём.

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

Оптимизация изображения — это процесс удаления части информации, при котором уменьшается «вес» и время загрузки изображения.

Для чего это нужно

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

Задача для разработчика уменьшить трафик, получаемый пользователем.
Моё отношение к этому пункту чисто субъективное. Я считаю, что если можно сократить объём данных, то это нужно делать.

А теперь про сам сервис.

Сервис называется Squoosh.

Возможности сервиса

  • Обрабатывает форматы: JPEG, PNG, WEBP;
  • Использует 6 алгоритмов сжатия;
  • Даёт возможность изменить количество цветов в палитре от 2 до 255;
  • Встроена функция ресайза изображения.

Как пользоваться

1. Загружаем наше изображение.
2. Выбираем алгоритм сжатия.
3. Устанавливаем качество от 100% до 0.
4. Скачиваем оптимизированную картинку. «profit»

1. Для примера используем эту фотографию. Исходный размер 473 кб, разрешение 1920х1280.
before

2. Предположим, что нам необходимо задать ей разрешение 1620х1080 и уменьшить размер файла. Для этого используем панель RESIZE и COMPRESS. Зададим нужный размер и уменьшим качество, благодаря вертикальному ползунку, мы можем видеть изменения в картинке: Слева — до сжатия, Справа — после.
Процесс

3. Уже можно заметить, что размер файла стал меньше на 59%, при этом качество просело не так сильно. Вы можете сами поиграть с размерами и качеством, я лишь хотел объяснить суть 😉

4. После всех «махинаций» просто скачиваем оптимизированное изображение и вставляем его в свой проект.

Надеюсь, эта статья была для вас полезной. Делитесь своим мнением в комментариях.
А если вы только начинаете свой путь в веб-разработке советую пройти один из курсов онлайн-школы WayUp. Ребята за пару месяцев научат вас с нуля созданию сайтов, веб дизайну, работе на фрилансе и многому другому!