Почему важно ображать внимание на работу с изображениями, а не заливать на сайт все поряд?
Скорость загрузки страницы сайта зависит от скорости загрузки:
- html - контент страницы
- стили
- скрипты
- изображения
А скорость загрузки зависит от их веса.
Вот пример страницы каталога товаров:
прим. файлы сжаты (gzip) на уровне сервера
- html - 22 КБ
- стили (CSS) - 24 КБ
- скрипты (JS) - 65 КБ
- изображения - 250 КБ
Итого: 361 КБ
А теперь представим, что кто-то умудрился загрузить изображение подкатегории весом в 2 МБ = 2000 КБ
Вес всей страницы станет сразу почти в 6 раз больше!!!
Даже из кэша браузера данное изображение будет доставать мееееедленно.
Скажется это негативно на скорости загрузки страницы? Да безусловно!
Так ведь таких изображений на странице может оказаться не одно, а штук шесть - представьте себе, как печально посетителям такого сайта.
Как этого избежать?
Элементарно - подойти ответственно к наполнению сайта контентом и наконец-то начать обрабатывать загружаемые изображения! Т.к. пример выше показал, что именно изображения составляют основной вес страницы и можно сказать, что скорость загрузки зависит именно от них.
Скорость загрузки сайта больше всего зависит от того, насколько качественно вы оптимизируете изображения!
В какой программе можно обрабатывать изображения?
- Photoshop - эта программа должна быть у любого контентщика
- либо можно использовать онлайн-сервисы
- также .png изображения можно сжимать на сайте compresspng.com/ru/
Правила для изображений:
должно быть в формате .jpg или .png
в имени файла не должно быть кириллицы
размер изображения должен соответствовать занимаемому размеру на сайте
Пример оптимизации размера и веса изображения в Photoshop:
Например, мы подготавливаем изображение для товара. Если посмотреть рекомендации для создания товара в админке, то указано использовать фото размером не более 1024х768px:
Итак, открываем в Фотошопе исходный файл:
Затем меняем размер:
После того, как размер изменен, нужно сохранить полученное изображение:
в Windows меню может отличаться от MacOS, вам нужен пункт "Сохранить для WEB"
В открывшемся окне вам надо найти размер файла:
затем смотрим на настройки оптимизации:
Изменяя параметр качество мы меняем размер файла.
После этого не забываем сохранить изображение.
Приемлемый вес изображений, к которому нужно стремиться:
- Для фото товаров - до 120 КБ.
- Для аннотации блога - 10-18 КБ
- Для изображения шириной 1190px (на всю ширину экрана) - до 150 КБ
- Для слайдов на главной - до 100-150 КБ
- Для баннеров - до 30 КБ
- Для широкого баннера на главной - до 50 КБ
Связанные статьи:
UPD: описание обновлено 27.01.2022