- Почему для WordPress оптимизация изображений имеет решающее значение?
- # 1 Кадрирование / изменение размера ваших изображений
- # 2 Lossy Vs. Сжатие без потерь
- # 3 Тип файла
- # 4 Удалить ненужные метаданные
- # 5 Выберите правильную графику
- # 6 Включить альтернативный текст
- # 7 Заголовок изображения
- # 8 Заголовок изображения
- Как сделать WordPress Image Optimization?
- Шаг 1: Создайте инвентарь ваших изображений
- Шаг 2: удалите ненужные изображения / замените их веб-шрифтами
- Шаг 3: убедитесь, что размеры файла оптимальны
- Шаг 4: Аудит имен изображений и альтернативного текста
- Завершение
Почему для WordPress оптимизация изображений имеет решающее значение?
Изображения добавляют визуальную привлекательность веб-сайта и помогают настроить тон для визуального восприятия пользователем вашего сайта.
Все это хорошо, за исключением одного - чем больше изображений вы используете, тем тяжелее становится ваша веб-страница. Теперь, почему это плохо? Хорошо, рассмотрите эти характеристики:
- Изображения занимают большую часть веса страницы. ( источник )
- Чем тяжелее веб-страница, тем дольше она загружается. ( источник )
- Если загрузка веб-страницы занимает более 3 секунд, вероятность того, что пользователь уйдет со страницы (показатель отказов), увеличится на 32%. ( источник )
Эти статистические данные говорят нам о том, что изображения, будучи тяжелее, когда дело доходит до размера файла, увеличивают вес страницы; заставляя веб-страницы вашего сайта загружаться медленно. Более того, пользователи ожидают, что будут быстро перемещаться по вашему сайту, и не будут пользоваться им, когда время отклика будет медленным. Таким образом, единственный обходной путь - убедиться, что вы оптимизируете изображения, представленные на вашем сайте.
В этой статье мы обсудим 5 лучших способов сделать это.
# 1 Кадрирование / изменение размера ваших изображений
Обрезка изображений для устранения как можно большего количества ненужного контента - отличный способ уменьшить размер файла. Поскольку изображения состоят из пикселей, несущих данные, каждый пиксель увеличивает вес изображения. Обрезка изображения максимально удаляет нежелательные пиксели, и, следовательно, уменьшает вес изображения.
Другая распространенная ошибка, которая часто упускается из виду, это не уменьшение исходного размера изображения в соответствии с размером дисплея. Например, допустим, вы используете изображение размером 1620 * 780 пикселей. Если вы отображаете его на своей веб-странице с размером 250 * 150 пикселей без изменения размера исходного изображения, то это становится излишне большим файлом, что замедляет скорость загрузки вашей страницы. Следовательно, всегда лучше изменить размер изображения в соответствии с размером дисплея. Вы можете найти список простых в использовании онлайн-инструментов для изменения размера ваших изображений Вот ,
# 2 Lossy Vs. Сжатие без потерь
Когда дело доходит до изображений, которые вы используете на своем веб-сайте, сжатие их перед публикацией является стандартной практикой. Однако вам также необходимо подумать о типе сжатия, который вы собираетесь использовать. Существует два типа сжатия, которые используются в разных типах файлов. Как вы уже могли догадаться, это сжатие с потерями и без потерь.
Когда вы используете сжатие с потерями, вы в основном уменьшаете размер файла, опуская данные пикселей, где окружающие пиксели либо похожи, либо идентичны. Невооруженным глазом воспринимает цвет по-разному, и эта техника сжатия использует это преимущество. Данные пикселей удаляются только в тех местах, где их трудно заметить. Это оставляет вас с изображением, которое выглядит не сильно отличается от исходного изображения, но значительно светлее. Визуальный результат этого типа сжатия можно увидеть только при небольшом увеличении.
Сжатие без потерь, как следует из названия, не пропускает данные о пикселях, а просто сжимает их со всеми неповрежденными данными. Это приводит к четкому и четкому изображению, но с небольшой разницей в размере файла.
Вы также можете получить относительно четкое изображение с высокой степенью сжатия, используя комбинацию этих двух методов. Вот некоторые из наиболее эффективных онлайн-инструментов, которые вы можете использовать для сжатия изображений:
- Compressor.io
- Smush.it
- TinyPNG (у них также есть плагин для WordPress) - это мой любимый компрессор файлов - он может получить любое изображение размером менее 200 КБ.
Помните о конечном использовании изображения, когда решаете, какую технику сжатия использовать.
# 3 Тип файла
Когда вы редактируете / сохраняете изображения, которые будете использовать на своем веб-сайте, вам также необходимо заранее выбрать оптимальный тип файла в зависимости от конечного использования. Чтобы дать вам больше ясности по этому вопросу, давайте рассмотрим три наиболее часто используемых типа файлов для изображений и то, для чего они подходят.
JPEG является наиболее часто используемым форматом изображения. Он имеет большую глубину цвета, и вы можете использовать методы сжатия с потерями и без потерь, чтобы настроить качество и размер файлов в соответствии с вашими требованиями. Из-за своей глубины цвета и проницательности файлы JPEG обычно являются предпочтительным типом файлов для сложных изображений и фотографий.
Изображения в формате PNG насыщенные и четкие, но при этом имеют больший вес, поскольку в них используется только сжатие без потерь. Этот тип файла обычно используется для логотипов и других простых плоских изображений.
GIF-файлы также используют только сжатие без потерь. Кроме того, они ограничены только 256 цветами. Однако они поддерживают анимацию и, следовательно, широко используются для анимационных изображений низкого качества.
Формат файла SVG - это векторный формат изображения (о котором мы поговорим чуть позже), основанный на XML и использующий сжатие без потерь. При этом, поскольку он использует векторную графику, он имеет наименьший размер файла и лучше всего используется для плоских геометрических изображений и логотипов. Для сравнения, если изображение JPEG с 75% -ным сжатием имеет размер файла 30 КБ, то же самое изображение будет использовать только около 6-7 КБ в формате SVG. То есть при условии, что изображение является чисто векторной графикой.
Это важно отметить, поскольку SVG также поддерживает интерактивность и анимацию. Вы можете встраивать растровую графику в файл SVG, так же, как JPEG в HTML. Но это, очевидно, увеличит размер вашего файла.
# 4 Удалить ненужные метаданные
Когда вы нажимаете на изображение, ваша камера часто сохраняет определенные метаданные вместе с изображением. Метаданные - это не что иное, как детали, такие как марка и модель камеры, данные о местоположении изображения, ISO изображения, выдержка, дата, время и т. Д. Однако, когда ваша цель - использовать эти изображения для вашего веб-сайта, эти данные становятся избыточным весом, чаще да, чем нет. Следовательно, удаление этих данных может уменьшить размер вашего файла. Существует ряд бесплатных онлайн-инструментов, которые вы можете использовать для удаления этих метаданных, некоторые из которых перечислены Вот , Вы также можете удалить эти данные вручную, выполнив следующие действия.
- Щелкните правой кнопкой мыши по изображениям на вашем компьютере и выберите «Свойства».
- Перейдите на вкладку «Подробности» и нажмите «Удалить свойства и личную информацию» в нижней части окна.
- Выберите свойства, которые вы хотите удалить, и нажмите «ОК». Вы также можете выбрать, удалять ли данные из исходного файла или сохранять копию из этого диалогового окна.
# 5 Выберите правильную графику
Когда дело доходит до цифровых изображений, обычно используются два основных типа графики - растровая и векторная графика. Мы рассмотрим, как они различаются, но прежде чем обрабатывать изображение для использования на веб-сайте, вы должны рассмотреть их и сделать соответствующий выбор.
Разница между этими двумя типами графики заключается в том, что растровая графика использует пиксели для формирования изображений, а векторная графика использует контуры (точки, линии, многоугольники и т. Д.). Поскольку растр использует данные пикселей, он способен создавать насыщенные изображения с высоким уровнем детализации, независимо от того, насколько неправильными являются формы, содержащиеся в изображении. Из-за этого изображения, которые используют растровую графику, имеют больший размер файла, и они также имеют тенденцию становиться размытыми при увеличении масштаба в определенной степени.
Напротив, векторные изображения не размываются, поскольку используют пути и, следовательно, не зависят от разрешения. Они также имеют меньший размер файла. Тем не менее, векторная графика не является наиболее подходящей для изображений, которые содержат сложные, неправильные структуры внутри них. Поэтому векторная графика обычно используется для изображений геометрической природы, таких как логотипы, значки и т. Д.
# 6 Включить альтернативный текст
Альтернативный текст - это, в основном, краткое описание любого изображения, которое вы загружаете на свой сайт. Это один из наиболее важных аспектов оптимизации ваших изображений для поисковых систем, поскольку он помогает им понять содержание изображения (поскольку сканеры поисковых систем не могут обрабатывать изображения) и представить его как результат для релевантных поисков.
Например, давайте посмотрим на эту картинку.
Для этого конкретного изображения вы могли бы использовать вставку альтернативного текста, такого как «Темная заброшенная дорога», вместо того, чтобы оставить его пустым.
Вы можете сделать это, добавив альтернативный текст в ваш HTML-код сразу после тега изображения, следующим образом:
<img src = ”road view.jpg” alt = ”темная заброшенная дорога”>
Если вы используете CMS, например WordPress, у вас будет возможность включить альтернативный текст при выборе изображения для загрузки. В качестве лучшей практики всегда лучше, чтобы текст alt был кратким и коротким, желательно в пределах девяти слов.
Помимо помощи поисковым системам в понимании содержания изображения и помощи в оптимизации ключевых слов, альтернативный текст также помогает описать содержимое изображения людям с нарушениями зрения.
# 7 Заголовок изображения
Это то, что обычно называют «тегами заголовка изображения», хотя технически это не тег. Заголовок изображения обычно появляется во всплывающей подсказке, когда вы наводите курсор на изображение. Как и альтернативный текст, заголовок изображения может быть включен в HTML-код или в поле «Заголовок» в WordPress или аналогичных интерфейсах CMS. Если вы используете HTML, вы можете вставить тег заголовка для вашего изображения следующим образом:
<img src = ”road view.jpg” title = ”темная заброшенная дорога”>
В приведенном выше примере поле с текстом «темная заброшенная дорога» появится, когда люди наводят курсор на изображение.
# 8 Заголовок изображения
Подпись к изображению обычно появляется под или над изображением, и, как и заголовок изображения, предназначена для удобства пользователей, предоставляя им лучший контекст о содержании изображения. Вот хороший пример изображения с надписью:
Эта извилистая дорога вдоль западного побережья Австралии предлагает великолепный вид на закат
Эта извилистая дорога вдоль западного побережья Австралии предлагает великолепный вид на закат
Как сделать WordPress Image Optimization?
Вот пять шагов, если следовать им должным образом, может творить чудеса с имиджем вашего сайта и сделать ваши веб-страницы легкими и супер быстрыми в кратчайшие сроки.
Однако мы не собираемся останавливаться на этом. Скорее всего, у вас уже есть куча изображений, загруженных на ваш сайт, и вам, возможно, придется сначала оптимизировать их, прежде чем применять эти методы к изображениям, которые вы загружаете впредь.
Возвращаясь к более старым изображениям на вашем сайте и оптимизируя их, иногда это может сбить с толку, особенно если количество изображений выше. Чтобы помочь вам в этом, мы проведем вас через процесс аудита изображений, который вы можете использовать для того же.
Шаг 1: Создайте инвентарь ваших изображений 
Прежде чем приступить к аудиту изображений на вашем сайте, вам необходимо создать их инвентаризацию. Вы можете использовать онлайн-инструмент, такой как Кричащая лягушка сделать это. Вот пошаговое руководство о том, как это сделать. Посмотрите на количество внешних изображений на вашем сайте. Обычно это происходит либо из-за использования встроенных кодов, извлеченных с других сайтов, либо из-за использования сети доставки контента для размещения изображений вашего сайта. В идеале количество внешних кодов для встраивания на вашем сайте должно быть минимальным, если оно вообще есть.
Шаг 2: удалите ненужные изображения / замените их веб-шрифтами
Просмотрите список изображений на вашем сайте и выясните, есть ли ненужные изображения, которые вы можете удалить. Кроме того, вы можете заменить их веб-шрифтами, если это работает лучше.
Шаг 3: убедитесь, что размеры файла оптимальны 
Вы можете использовать Screaming Frog для сортировки изображений, размер файла которых превышает определенный. Для достижения наилучших результатов вы можете установить максимальный размер файла для каждого изображения 75 КБ. После этого вы можете снова запустить сканирование и получить список изображений, которые превышают этот предел, и сосредоточиться на дальнейшем их сжатии.
Шаг 4: Аудит имен изображений и альтернативного текста
Еще раз, вы можете использовать Screaming Frog, чтобы просмотреть имена изображений и внести любые необходимые изменения в соответствии с рекомендациями, которые мы обсуждали ранее в этой статье. Вы также можете отфильтровать изображения, которые не имеют альтернативного текста, и добавить их. В случае, если вы используете CMS, например WordPress, вы можете зайти в свой репозиторий изображений и отредактировать необходимые поля, как показано на рисунке выше.
Эти четыре шага являются лишь базовым процессом, но они могут быть очень эффективными при оптимизации изображений, которые у вас уже есть на вашем сайте.
Завершение
Подводя итог тому, что мы уже рассмотрели в этой статье, оптимизация изображений в WordPress имеет решающее значение по следующим причинам: она резко снижает вес вашей страницы и повышает скорость загрузки, таким образом улучшая пользовательский опыт и сводя к минимуму показатель отказов. Вы можете сделать это, выполнив следующие действия:
- Обрезка / изменение размера ваших изображений
- Выбор наиболее подходящей техники сжатия
- Выбор правильного типа файла для цели изображения
- Удаление ненужных метаданных
- Выбор наиболее подходящей графики для типа изображения
Вы можете в дальнейшем оптимизировать SEO, убедившись, что вы тщательно выполняете следующие шаги:
- Включить альтернативный текст, который является кратким, и предпочтительно 9 слов или меньше
- Придавая вашим изображениям правильное название
- Включая подписи, в которых четко указано содержание изображения
Тем не менее, оптимизация ваших изображений это только одна часть SEO. Чтобы по-настоящему оптимизировать свой сайт для поисковых систем, вам необходимо рассмотреть все аспекты SEO, от контента до макетов страниц. Если вы не уверены, с чего начать, вот местный контрольный список SEO, который вы можете использовать.
Эти шаги - почти все, что вам нужно выполнить, чтобы оптимизировать визуальный контент вашего сайта и убедиться, что он легкий, быстрый и обеспечивает удобство работы для пользователя.
Почему для WordPress оптимизация изображений имеет решающее значение?
Теперь, почему это плохо?