Как оптимизировать графику для сайта?

  1. Почему я должен заботиться? Стоит задать себе вопрос: «Почему стоит позаботиться о размере нашей графики?». Ответ довольно прост. Это в первую очередь приведет к более быстрой загрузке страницы и меньшему использованию передачи на нашем сервере. Следует также отметить, что скорость загрузки страницы является одним из наиболее важных факторов, учитываемых Google при формировании результатов поиска. Прежде всего: разрешение!
  2. Второе: формат!
  3. Третье: сжатие!
  4. Графическая графика неровная
  5. Фото в галерее
  6. фон
  7. логотип
  8. иконки
  9. Как я могу проверить, оптимизирован ли мой сайт с точки зрения графики?

Почему я должен заботиться?

Стоит задать себе вопрос: «Почему стоит позаботиться о размере нашей графики?». Ответ довольно прост. Это в первую очередь приведет к более быстрой загрузке страницы и меньшему использованию передачи на нашем сервере. Следует также отметить, что скорость загрузки страницы является одним из наиболее важных факторов, учитываемых Google при формировании результатов поиска.

Прежде всего: разрешение!

Частая ошибка новичков - вставка графики в исходное разрешение. Это совершенно бессмысленно, потому что изображение автоматически масштабируется браузером, и качество изображения не улучшается. Каким должен быть размер графики в этом случае? Наиболее оптимальным является соблюдение размеров, в которых графика отображается в браузере. Другими словами, убедитесь, что браузер не должен масштабировать графику и иметь возможность отображать ее в исходном размере.

В случае адаптивных веб-сайтов может быть немного трудно определить, какой размер использовать. Это связано с тем, что графика на каждом устройстве может иметь разные размеры. Затем вы должны оценить, в каком максимальном разрешении будет отображаться данное изображение, и масштабировать его до своей любимой графической программы, например, в Photoshop или бесплатном GIMP.

По данным статистики сайта ranking.pl самое высокое, ведущее на рынке разрешение монитора - это разрешение FullHD, то есть 1920x1080 пикселей . Таким образом, вы можете установить общее правило, что вы не должны помещать на страницу графику, имеющую большие размеры, потому что это просто невыгодно.

Второе: формат!

Второй наиболее важной проблемой при оптимизации изображений является их формат. Самым популярным является, конечно, расширение .jpg, в котором есть файлы с растровой графикой . Это формат со сжатием с потерями , что в случае веб-сайтов является большим плюсом, потому что мы можем контролировать размер файла за счет потери качества. Формат png одинаково широко используется, имеет сжатие без потерь и, что важно, поддерживает прозрачность.

В случае векторной графики популярным является формат svg. Не менее распространена прямая вставка векторов в тег <svg>, введенный в HTML5. Подробнее о нем здесь , Довольно молодой, но хорошо известный и рекомендуемый метод также заключается в преобразовании векторов в шрифты, которыми затем легче манипулировать в CSS. Такая возможность дает нам инструмент icomoon который я всем сердцем рекомендую.

Проблема возникает, когда мы хотим, чтобы наша графика была максимально компактной. Если мы вставим растровую графику, то мы должны придерживаться формата JPG как можно дольше. Фактически, формат PNG лучше всего использовать, только если мы заботимся о прозрачности. Здесь стоит добавить, что во многих случаях эффект прозрачности может быть получен с помощью CSS через непрозрачность или с использованием цветового пространства RGBA .

Еще одна хорошая практика - максимизировать количество векторной графики, если наши изображения очень простые, то есть они состоят из простых геометрических фигур. Векторная графика весит очень мало, и она не оптимизирует себя. В большинстве случаев при использовании готовых шрифтов значков, таких как Font Awesome или Entypo , используйте только значки, которые мы используем для экспорта с помощью icomoona, чтобы браузеру не приходилось загружать все остальные, которые нам не нужны.

Третье: сжатие!

При сохранении изображения в графических программах мы можем установить уровень сжатия, чтобы уменьшить размер изображения. К сожалению, в этом случае это часто происходит за счет явно худшего качества. К счастью, у нас есть онлайн-компрессоры, которые благодаря соответствующим алгоритмам способны резко уменьшить размер и в то же время поддерживать качество на удовлетворительном уровне. Лучший инструмент такого типа, с которым я имел дело, это TinyPNG , Не позволяйте имени вводить в заблуждение! TinyPNG одинаково хорошо обрабатывает файлы JPG.

Ссылки на фотографии:

Как мы видим, мы часто можем увеличить размер файла более чем наполовину, что, на мой взгляд, является феноменальным результатом. Стоит использовать этот инструмент для экспериментов с различными графическими вариантами, потому что здесь мы можем «выиграть» наибольшую экономию.

Графическая графика неровная

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

Фото в галерее

Основное, что нам нужно помнить, это вопрос миниатюр. Подстраница с галереей должна загружать только миниатюры, а не оригинальные фотографии. В противном случае страница будет надежно загружаться в течение длительного времени, и это будет весьма раздражающим для получателей со слабым интернет-соединением или для пользователей смартфонов.

По этой причине разработчик должен подготовить две версии изображения: миниатюру и правильную фотографию, отображаемую в виде предварительного просмотра в лайтбоксе. Здесь стоит подчеркнуть, что в этом случае необходимо применять принцип, сформулированный ранее в этой статье, то есть не давать изображение предварительного просмотра в исходном размере , потому что время загрузки может быть слишком длинным, и графика в любом случае будет уменьшена. Если мы хотим вставить изображение в исходном размере (потому что, например, мы хотим, чтобы пользователь мог видеть детали изображения), лучшим решением будет создание внешней гиперссылки, по которой при необходимости можно щелкнуть.

фон

Выбор графики для использования в качестве фона проблематичен, обычно он должен иметь ширину всего окна. Это заставляет нас адаптировать картинку к FullHD. В этой ситуации мы можем действовать различными способами:

  • Если фон должен быть равномерным, достаточно создать регулярный шаблон, который будет повторяться.
  • Если фон должен быть более разнообразным, то мы можем создать несколько прозрачных графических изображений, которые будут прикрепляться к контейнеру с содержимым и служить «наложением» на фон шаблона.
  • В случае, если нам нужен фон для всей ширины окна, вместо 1920px, мы можем использовать немного меньший размер, например 1500-1600px. Фон является второстепенным элементом, на котором получатель уделяет мало внимания, поэтому результирующее снижение резкости на мониторах FullHD не должно иметь большого значения, и мы получим ценные килобайты.

логотип

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

иконки

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

Как я могу проверить, оптимизирован ли мой сайт с точки зрения графики?

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

Конечно, чем меньше, тем лучше;) Однако, чтобы считать размер нашей графики оптимальным, достаточно не превышать ограничение в 1 МБ.