Оптимизируйте свои изображения и не тратьте больше времени

По данным HTTPArchive, средний размер веб-сайта за 5 лет почти удвоился: с 1 МБ в 2014 году до 2 МБ в 2019 году. Конечно, доступ в Интернет стал быстрее, чем когда-либо, но все же, почему веб-сайты стали такими большими? Ответ частично лежит в мультимедийных активах в целом и изображениях в частности.

Прошло много времени с тех пор, как веб-сайты перестали быть простыми текстовыми страницами. Теперь они динамичные, полные изображений, видео, GIF-файлов… и мы хотим, чтобы все эти активы выглядели красиво и четко на экранах с огромным разрешением.

Если ваш сайт загружается очень медленно и вы никогда не оптимизировали изображения, у меня есть хорошие новости: сегодня вы узнаете, что можно сделать, чтобы ускорить работу WordPress. Давайте посмотрим, какие инструменты вы можете использовать для повышения производительности вашего веб-сайта и предотвращения того, чтобы изображения мешали работе ваших пользователей.

Почему важна оптимизация изображений

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

Изображения оказывают огромное влияние на общий размер веб-страницы

Как я сказал в начале, вес изображений на веб-сайте составляет важный процент от общего количества. Например, рассмотрите этот пост в блоге: DevTips — Как остановить WordPress от угадывания URL-адресов. Это довольно короткий пост, менее 400 слов, который предлагает быстрое решение четкой проблемы.

Согласно GTMetrix, для загрузки этого поста используется 850 КБ данных. Но почему такой короткий пост использует так много данных? Что ж, изображения частично ответственны за эту проблему: одно только избранное изображение поста весит более 200 КБ, что составляет 25% от общего объема.

Мобильный трафик

Согласно данным, найденным в statcounter, 52% веб-трафика приходится на мобильные устройства и 45% — на десктоп. Вот почему сегодня так много внимания уделяется использованию адаптивного дизайна, который хорошо работает на маленьких экранах.

Как вы, наверное, уже испытали на себе, интернет-соединение на мобильном телефоне не всегда хорошее (особенно если вы едете на работу или в метро). По данным Statistia, в 2019 году средняя скорость составляет около 14 Мбит/с. Поэтому, если мы хотим ускорить наши веб-сайты на мобильных устройствах, мы должны максимально уменьшить их вес, в том числе вес их изображений.

Затраты на хранение и передачу данных

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

Уменьшая размер ваших изображений, вы уменьшите оба фактора и будете экономить деньги каждый месяц?

Действия по оптимизации изображения

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

# 1 Загружайте правильно масштабированные изображения

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

Первое, что вам нужно сделать, это уменьшить изображения до разумного размера, прежде чем загружать их на свой сайт. Например, на нашем веб-сайте самые большие изображения, которые мы обычно загружаем, являются избранными изображениями наших сообщений. Мы решили ограничить эти изображения только размером 1200x800 пикселей. В этом другом посте я объяснил метод быстрого масштабирования и сжатия изображений перед их загрузкой.

# 2 Настройте свою тему, чтобы создать соответствующие миниатюры

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

Например, наши избранные изображения имеют размер 1200x800px. Эти размеры отлично работают при просмотре самого поста:

что явно слишком много для чего-то вроде этого:

Вот почему для этого конкретного случая наша тема регистрирует новый размер эскиза, который составляет всего 480x320 пикселей и используется на экране списка сообщений.

Если вы считаете, что ваша тема не генерирует соответствующие миниатюры, я рекомендую вам прочитать документацию WordPress, чтобы узнать, как определить размер миниатюры с помощью set_post_thumbnail_size или даже как определить дополнительные миниатюры с помощью add_image_size .

И, как всегда, если вам нужна помощь с этим, просто дайте мне знать в разделе комментариев ниже, и я буду рад помочь (или даже написать об этом пост?)

# 3 Используйте размеры изображения с умом

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

При вставке изображения в сообщение взгляните на боковую панель и выберите размер, который лучше всего соответствует вашим потребностям:

Например, если вы собираетесь поместить такое узкое и маленькое изображение, то маленькое изображение (300x200px) может подойти идеально:

но использование той же миниатюры для большего изображения приводит к ужасным результатам:

Лучше использовать версию с большим разрешением:

# 4 Используйте соответствующий формат изображения

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

• PNG. Отличный формат изображений для обмена скриншотами, на которых нет изображений, например, скриншот редактора WordPress.
• JPG. Один из самых распространенных форматов в мире. Он очень хорошо работает практически с любым типом фотографии, обеспечивая очень высокую степень сжатия. Однако он не идеален: если у фотографии очень резкие края (например, если есть текст или рисунки), вам придется использовать более низкие коэффициенты сжатия, иначе изображение будет иметь некрасивые артефакты.
• GIF. Король Интернета (и социальных сетей). Это тип формата, который позволяет использовать анимацию. Честно говоря, я думаю, что все «GIF», которые мы сейчас используем, на самом деле (короткие) видео, которые предлагают лучшую степень сжатия и более высокое качество…

# 5 Удалить неиспользуемые изображения

Со временем на вашем сайте WordPress легко хранить множество устаревших изображений, которые никто нигде не использует. Если вы хотите удалить их быстро, в этом посте Тони объясняет, как это сделать.

# 6 Включить ленивую загрузку

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

Ленивая загрузка — довольно простая идея: изображение не будет загружено до тех пор, пока оно не станет видимым в браузере посетителя. Например, если на нашем веб-сайте есть определенное изображение в нижнем колонтитуле, зачем нам загружать его до того, как пользователь дойдет до конца нашего веб-сайта? Подождите, пока они доберутся туда, и как только они это сделают, загрузите изображение (а если они этого не сделают, сохраните загрузку изображения!)

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

Я надеюсь, что сегодняшний пост поможет вам немного улучшить скорость загрузки веб-страниц. Есть несколько вещей, которые так легко исправить и получить такие хорошие результаты. Здоровья и удачи!

Избранное изображение команды Icons8 на Unsplash.