Изображения: Ваш самый простой выигрыш в скорости страницы

1. Изображения и загрузка страницы
2. Так когда же мы пошли наперекосяк?
3. Почему вы не можете полагаться на CMS для изменения размера / сжатия ваших изображений?
4. Подготовка изображений для вашего сайта
5. Типы файлов
6. А как насчет GIF или WebP?
7. Выбор правильного типа файла
8. JPG против PNG
9. Почему бы не упомянуть SVG?
10. Реальные примеры
11. Время для визуального прогресса
12. SEO, мобильность и вес изображения

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

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

К счастью, оптимизация изображений - это действительно легкая победа.

Изображения и загрузка страницы

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

Сегодня мы часто видим страницы с мегабайтами изображений на странице. Это мегабайты . Страница никогда не должна быть больше 1 мегабайта, не говоря уже о нескольких мегабайтах, но это частая находка. На самом деле, многие сайты даже занимают более 10 МБ на страницу . Ни одна веб-страница никогда не должна быть такой большой - и когда она есть, почти всегда возникает проблема оптимизации изображений.

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

Так когда же мы пошли наперекосяк?

Когда я начал заниматься веб-разработкой почти 20 лет назад, сайты не могли иметь большой нагрузки и все еще ожидали получить какой-либо трафик. Страницы были полностью загружены менее чем за 100–250 КБ - HTML, изображения, сценарии и все. Они должны были быть. Браузеры и соединения были медленными.

Это не имеет ничего общего с поисковыми системами. Сайты просто не могли правильно загружаться на больших весах. Сайт размером 1 МБ на страницу, о котором я знал, загружался в течение 15 минут. Да, 15 минут

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

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

Почему вы не можете полагаться на CMS для изменения размера / сжатия ваших изображений?

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

Если он сжимает изображение (как в WordPress), скорость предустановки; это означает, что даже если он делает достойную работу, ваши файлы будут в среднем на 15-30% больше, чем если бы они были должным образом сжаты перед загрузкой. Если ваша CMS изменяет размеры изображений «на лету», что означает, что они изменяются по мере их доставки, тогда выполняется очень небольшое (если есть) сжатие.

Это может быть очень проблематично на сайтах, которые имеют несколько изображений на странице. Чаще всего в проведенных аудитах изображения в среднем занимают от 40 до 60 процентов веса страницы, при этом потенциальная экономия веса изображения может составлять от 30 до 50 процентов, если изображения были обработаны перед загрузкой.

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

Подготовка изображений для вашего сайта

Изменение размера изображений

Изменение размера изображения очень важно. Если у вас есть изображение шириной 2400 пикселей, и все, что вам нужно, это изображение шириной 500 пикселей на сайте, даже для изменения размера в вашей CMS потребуется сжатие всей информации в изображении размером 2400 пикселей. Это делает ваше изображение намного больше для начала.

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

Если это так, самое важное, что нужно сделать с любым изображением на сайте, это сохранить его в необходимом физическом размере, но НЕ больше. Это означает, что если вам нужно три изображения, а 800 x 600 пикселей - это самый большой необходимый размер, убедитесь, что вы изменили исходное изображение до 800 x 600 в соответствующей программе, такой как Photoshop. Затем, даже если вам все еще нужно изменить размер внутри CMS, вы работаете с меньшим размером файла с самого начала.

Типы файлов

Итак, сначала вы должны изменить размер изображения, сжать, а затем загрузить. Однако не только невозможность изменить размер и сжать перед загрузкой проблемы, но и просто выбор правильного типа файла стал проблематичным. Многие люди, которые работают с изображениями на сайте в наши дни, часто не имеют опыта работы с изображениями, поэтому они будут использовать JPG, когда вы должны использовать PNG, и наоборот.

Почему это важно? Когда вы используете неправильный тип файла, вы можете увеличить вес файла, иногда довольно значительно. Итак, какие типы файлов вы используете?

Существует несколько типов файлов, наиболее распространенными являются JPG, GIF, PNG и WebP. Из них чаще всего вы будете использовать JPG и PNG.

А как насчет GIF или WebP?

Никто не должен использовать GIF, если не анимировать изображение. И пока WebP демонстрирует большие надежды в своих высококачественных алгоритмах сжатия без потерь, в настоящее время он не очень поддерживается, и необходимо использовать специальное программирование, чтобы заставить его работать с любым браузером, кроме поддерживаемых браузеров, таких как Opera и Chrome.

Это не означает, что вы не можете использовать его, но это означает, что вы не можете использовать его без создания обходных путей для неподдерживаемых браузеров. Большинству проще придерживаться стандартных форматов JPG и PNG. WebP, вероятно, станет стандартом, как только мы улучшим его поддержку. Он может сохранять изображения с гораздо меньшим весом и гораздо более высоким качеством.

СОВЕТ: если вы хотите использовать WebP Google имеет конвертер изображений для тебя.

Выбор правильного типа файла

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

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

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

JPG против PNG

Разница между потерями и сжатием без потерь.

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

Конечно, это зависит от качества сохраненного JPG. Чем больше качество снижается, тем больше данных теряется. Если изображение сохранено в слишком низком качестве, изображение может начать «ореол», то есть артефакты появятся в конечном изображении. Если вы хотите избежать этой проблемы, не уменьшайте качество изображения до 50%. В современных видеокартах 50-процентное соотношение должно оставлять качество достаточно высоким, чтобы выглядеть правильно, но достаточно низким, чтобы сохранить значительный размер файла.

СОВЕТ: Используйте прогрессивную настройку при сохранении JPG, чтобы при загрузке в браузер они словно «исчезали» в документе. Пользователи не будут сталкиваться с такими проблемами, как переход на страницу, и с большей вероятностью воспринимают страницу как более быструю загрузку.

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

Существует два типа PNG: один 24-битный, а другой 8-битный. Когда вы пытаетесь уменьшить размер файла, вам нужна 8-битная настройка PNG. Вы также можете пойти дальше и удалить цвета из вашего файла PNG.

СОВЕТ: При сохранении PNG в Photoshop используйте «Экспорт»> «Сохранить для Web» (прежняя версия). Вы можете выбрать меньшее количество цветов или черно-белое, что может уменьшить файлы PNG на целых 50–90 процентов.

Чтобы проиллюстрировать все это, я взял один и тот же файл - логотип - и сохранил его как PSD, PNG 8-BIT и PNG 8-BIT, черно-белые ниже. Мы можем видеть значительное уменьшение размера файла, когда мы используем PNG 8 с удалением цвета, чтобы использовать только необходимые цвета.

Исходный файл = 110 КБ

Стандартный экспорт Photoshop - PNG 8 = 13,8 КБ

Экспорт веб-сайта Legacy Photoshop - PNG 8 = 4,56 КБ

Экспорт веб-сайта Legacy Photoshop - PNG 8 (4 оттенка серого) = 1,41 КБ

Итак, мы видим здесь, что, используя правильный PNG-8 с уменьшением цвета, мы можем уменьшить размер нашего изображения более чем на 95 процентов . Наше изображение размером 110 КБ можно уменьшить до 1,41 КБ.

Может показаться, что это немного, потому что это одно изображение, но если у вас есть 10 логотипов спонсоров на странице, вы можете сэкономить от 40 КБ до 100 КБ только на этой странице.

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

Почему бы не упомянуть SVG?

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

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

Если вы используете SVG, вот несколько советов:

• Есть кто-то в штате или контракт, который может должным образом создать / реализовать их.
• Убедитесь, что изображения SVG светлее сохраненных изображений (они могут быть больше).
• Убедитесь, что теги правильно реализованы, чтобы вы могли получить преимущества от того, что будет тегом «alt» на обычном изображении при необходимости.
  • Примером этого может быть вызов файла SVG и использование тега alt в коде.
    <img src = ”logo.svg” alt = ”Логотип сайта” />
• Если социальный обмен важен для ваших изображений, вам нужно будет предоставить традиционный файл изображения, который можно загрузить для социального обмена.
• Не используйте SVG, если у вас есть большая или значительная часть пользователей, использующих старые браузеры. Они не справляются с SVG хорошо, если вообще.

СОВЕТ: Хороший инструмент для создания SVG-изображений Inkscape ,

Реальные примеры

Используя WebPageTest.org, мы можем видеть, как размер изображения влияет на крупные бренды. (Примечание 1000 мс = 1 секунда)

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

Время для визуального прогресса

Мы можем видеть здесь время, необходимое для того, чтобы документ был визуально завершен. Удивительно, но Huffington Post загружается довольно быстро, примерно за 2 секунды, в то время как Mashable занимает целых 18,2 секунды.

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

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

Мы также видим, что Mashable не использует методы сценариев, которые сводят к минимуму загрузку их страниц, и при 2,5 мегабайтах изображений на странице и еще 2,5 мегабайтах «другого» эта страница работает на 30-50% по сравнению с ее страницей. вес может быть, если правильно оптимизировать.

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

SEO, мобильность и вес изображения

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

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

Исправления оптимизации изображения - это легкая победа. Почти у каждого сайта, который я проверял за последние три года, есть проблема с имиджем. Твой? Если бы вы могли сэкономить от 20 до 40 процентов времени загрузки страницы, разве это не стоило бы того?

Мнения, выраженные в этой статье, принадлежат автору гостя и не обязательно относятся к Search Engine Land. Штатные авторы перечислены Вот ,

Об авторе

Похожие

Комментарии