- Выберите правильный размер изображения
- Как я могу узнать, какой размер изображения мне нужен?
- Установить пост картинку
- Дополнительные настройки изображения
- Плагины WordPress для оптимизации изображений
- вывод
Фотографии, безусловно, являются важным элементом в ваших сообщениях в блоге: они ослабляют статью, дают посетителю первое представление о теме и / или авторе, повышают читабельность вашей статьи ... короче: то, что изображения в блоге важны, не подлежит сомнению. А WordPress позволяет даже неспециалистам добавлять изображения на свой сайт. Тем не менее, я всегда вижу сайты, на которых изображения отображаются неправильно или изображения слишком длинные для загрузки. Здесь я покажу вам, как правильно оптимизировать изображения для WordPress и тем самым улучшить SEO - это лучше найти в Google.
Потому что ясно одно: изображения оказывают значительное влияние на скорость загрузки вашего сайта , потому что они составляют большую часть объема данных. И в зависимости от размера файла, который может многое сделать. Например, слишком часто я вижу загруженные на сайт фотографии полностью неотредактированными, как только они выходят из камеры.
Почему время загрузки так важно? Ну, не у всех, кто заходит на ваш сайт, есть быстрое подключение к Интернету. Некоторые люди мобильны и, возможно, просто 3G. И даже в 2017 году все еще достаточно регионов, где нет быстрого VDSL. Если на вашей стороне несколько изображений с размером файла 2-3 МБ, это может занять несколько минут в зависимости от соединения. Это раздражает посетителя, и велика опасность покидать ваш сайт. А поскольку Google рассматривает поведение пользователя и пользовательский опыт как сигнал ранжирования , он оценивает страницы с длительным временем загрузки как довольно плохие - и, следовательно, не очень хорошие для вашего SEO.
Так что ты делаешь? Оптимизация изображений для вашего сайта не так сложна и выполняется в несколько простых шагов. Я покажу вам, как это работает и что вы должны рассмотреть.
Сегодня в сети в основном используются форматы изображений JPG и PNG. В некоторых случаях формат GIF и .ico для значка. JPG или JPEG - это формат, в котором даже ваша цифровая камера или смартфон хранит изображения, и этот формат также является предпочтительным для фотографий. Для графики, логотипов или прозрачных изображений рекомендуется формат PNG. Различают PNG8 (256 цветов) и PNG24 (16,7 миллионов цветов). Формат PNG8 заменяет старый формат GIF, который фактически используется только там, где требуется анимированная графика.
Примечание : фотографии в формате JPG; (Векторная) графика, логотипы, прозрачность: PNG
Как насчет SVG? SVG - это специальный формат для векторной графики, который в основном используется профессиональными графическими дизайнерами. WordPress не поддерживает SVG с нуля, потому что этот формат на самом деле не графический, а формат документа и может представлять угрозу безопасности. Если вы все еще хотите использовать SVG, вы можете сделать это через изменение functions.php вашей темы или через плагин.
Выберите правильный размер изображения
Размер изображения играет решающую роль в загрузке сайта. Если вы используете фотографии прямо с камеры без редактирования, вы можете быстро собрать несколько МБ.
Размер файла вашего изображения зависит от (подходящего) формата, разрешения и размера изображения (размеров изображения). Эту подготовительную работу лучше всего выполнить с помощью подходящей программы для редактирования изображений, такой как Photoshop, Photoshop Elements или GIMP (Бесплатно).
1-й шаг: уменьшить разрешение
Для отображения в Интернете достаточно разрешения 72 или 96 ppi (пикселей на дюйм). Разрешения в 300 точек на дюйм, которые исходят от вашей цифровой камеры, не требуются для Интернета и увеличивают размер файла без необходимости. Вам нужны такие разрешения для печати, в Интернете снижение разрешения для большинства людей не заметно.
2-й шаг: уменьшить размеры
Снимки с цифровой камеры часто бывают довольно большими с 3000.4000 или более пикселей. Для вашего сайта вам, вероятно, не нужно более 2000 пикселей в ширину, в большинстве случаев от 800 до 1600 пикселей. (Идеальная ширина для фотографий Facebook: 1200 пикселей в ширину). Если вы уменьшите размеры ваших фотографий, вы можете сэкономить значительное время загрузки.
Подведем итоги:
- идеальная ширина: 800 - 1600 пикселей
- идеальное разрешение: 72 или 96 точек на дюйм
- идеальный формат: JPG (фото), PNG (графика)
- идеальное качество хранения: 75 - 80%
- идеальный размер файла: <400 КБ
Как я могу узнать, какой размер изображения мне нужен?
Во-первых, посмотрите, насколько велики фотографии в ваших сообщениях в блоге. Вы можете легко узнать о встроенных инструментах разработчика в Chrome или Firefox. Нажмите на изображение справа и выберите «Исследовать предмет» (Firefox) или просто «Исследовать» (Chrome).
Теперь открывается исходное текстовое представление - и там должен быть отмечен код, содержащий изображение. Если навести указатель мыши на отмеченный код, появится размер изображения. Здесь изображение отображается шириной 780 пикселей, фактический размер изображения составляет 1024 пикселя. Оптимальный размер изображения будет 780 пикселей.
Вы также можете сохранить изображение для безопасности немного больше, по крайней мере, 1024 или 1200 пикселей - если вы хотите изменить тему - и затем интегрировать уменьшенную версию (например, средний размер изображения) в WordPress.
Имя файла не влияет на время загрузки, но все же влияет на ваш SEO. (Думайте здесь как синоним поиска картинок Google!). Вы должны использовать короткое, говорящее имя файла здесь. Избегайте использования умлаутов, пробелов и специальных символов, так как некоторые браузеры / устройства могут иметь проблемы с ними и могут не отображать изображение. Я рекомендую использовать строчные буквы для согласованности (Linux, операционная система большинства веб-серверов, в отличие от Windows строго различает прописные и строчные буквы) и переносить слова в имени файла.
Вы обычно делаете эти настройки локально на вашем ПК или Mac. Теперь мы пришли, чтобы загрузить и вставить ваши фотографии на WordPress.
Прежде всего, вы должны загрузить изображение в библиотеку WordPress. Вы можете сделать это через пункт меню «Медиа» или прямо из поста через кнопку «Добавить файлы».
Теперь выровняйте соответствующее изображение и разместите его. Возможные варианты: «По центру», «По левому краю» или «По правому краю». Кроме того, вы выбираете здесь размер презентации, возможно, заголовок, заголовок и очень важный: альтернативный текст.
Почему текст ALT (альтернативный текст) так важен? Проще говоря, это то, что читают Google и другие поисковые системы. Это также важно с точки зрения доступных веб-сайтов: он читается программами чтения с экрана, поэтому текст должен быть максимально осмысленным!
Небольшое отступление: в чем разница между заголовком, альтернативным текстом и тегом заголовка в WordPress?
Заголовок WordPress предназначен для внутреннего администрирования и генерируется автоматически из имени файла. Ранее заголовок WordPress автоматически использовался для текста ALT, если он не был указан. Начиная с версии 4.7 WordPress оставляет текст ALT пустым, поэтому, пожалуйста, завершите!
Тег заголовка не так важен, как текст ALT, он используется при наведении мыши на изображение. Google, вероятно, считывает это, но большинство пользователей все равно не видят его, потому что мобильные браузеры его больше не показывают.
Установить пост картинку
Теперь вы должны установить изображение поста. Вы делаете это в правом столбце рядом с редактором сообщений. Здесь вы можете загрузить новое изображение или использовать уже добавленное изображение из медиатеки.
В зависимости от темы и настроек, изображение поста используется в обзорах архива, а также в качестве изображения предварительного просмотра для Facebook или Twitter, если вы поделитесь своей статьей там.
Если вы хотите назначить другое изображение для Facebook / Twitter, вы можете легко решить эту проблему с помощью плагина Yoast SEO.
Дополнительные настройки изображения
Если вы переместите изображение в визуальном редакторе и нажмете на перо, откроется окно с дополнительными параметрами. Здесь вы можете снова настроить заголовок, альтернативный текст, выравнивание, размер, ссылку, тег заголовка и стили CSS, а также масштабировать раздел изображения.
Плагины WordPress для оптимизации изображений
Чтобы получить еще больше от оптимизации изображений, вы можете использовать плагины улучшения изображений для WordPress. Я предпочитаю использовать Smush или Imagify. Photoshop & Co. уже хорошее начало, эти плагины получают немного больше.
вывод
Оптимизация изображений может значительно улучшить время загрузки и SEO вашего сайта. Здесь вы обязательно должны помнить каждую загрузку! Здесь опять самое главное вкратце:
- Размер файла <400 КБ
- Разрешение: 72 или 96 точек на дюйм
- Размеры: 800 - 1600 пикселей
- Формат: JPG (фото), PNG (графика), качество 75 - 80%
- Имя файла: короткое, говорящее имя, без пробелов, специальных символов или умлаутов!
- Подумайте о тексте ALT!
Почему время загрузки так важно?Так что ты делаешь?
Почему текст ALT (альтернативный текст) так важен?