Режим работы:
пн-пт 9:00-18:00, сб-вс выходной
Купить лицензию
Техподдержка
Хорошие новости!

Работа с изображениями в графических редакторах

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

Скорость загрузки страницы сайта зависит от скорости загрузки:

  • 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 КБ

Связанные статьи:

Теги: работа с графическими файлами, обработка изображений в Фотошопе, Photoshop, оптимизация изображений, графический редактор

UPD: описание обновлено 27.01.2022

Еще нет своего сайта? Запустите интернет-магазин на платформе 5CMS - Все для продаж уже внутри!

Рекомендуем прочитать
Запрос в техподдержку

Предоставив исчерпывающее описание задачи/проблемы, вы существенно сократите время на уточнение вашего вопроса.

Настоящим подтверждаю, что я ознакомлен и согласен с условиями политики конфиденциальности
Я нe рoбoт
Отправить запрос
Сотрудничество
Настоящим подтверждаю, что я ознакомлен и согласен с условиями политики конфиденциальности
Я нe рoбoт
Отправить запрос
Дополнительные услуги
Настоящим подтверждаю, что я ознакомлен и согласен с условиями политики конфиденциальности
Я нe рoбoт
Отправить запрос
Комьюнити разработчиков
Настоящим подтверждаю, что я ознакомлен и согласен с условиями политики конфиденциальности
Я нe рoбoт
Отправить заявку
Задайте ваш вопрос

Мы используем файлы cookie для функционирования сайта. Подробнее...

ОК