Куда в интернете без картинок? Изображения делают любой сайт привлекательным, и составляют большую часть данных страницы. И если вы оптимизируете свой сайт для поисковой выдачи, следует избегать больших, тяжелых изображений. Картинки нужно оптимизировать точно так же, как и все остальное.
Давайте разберемся в процессах оптимизации, и методах их применения на веб-страницах.
Веб-страницы и изображения
Визуально привлекательные сайты содержат в основном изображения, но большинство картинок имеют очень большие размеры. Они составляют основную часть общего размера страницы или «веса страницы». Согласно статистике на 2016 год, около 64,3% содержимого – это изображения.
Как оптимизировать изображения сайтов для поисковых систем
Основная часть содержимого веб-сайта состоит из изображений, и большинство из них не оптимизировано для Интернета. Поисковые системы на основе картинок могут генерировать дополнительный трафик для вашего сайта, но при условии, что они оптимизированы. Согласно последним данным, 39% людей покидают сайт, если он медленно загружается. Это влияет на картину поведенческих факторов – растут отказы, и соответственно, сайт падает в выдаче. Медленно, но верно. Поэтому создание веб-оптимизированных изображений необходимо для снижения времени загрузки страницы.
Результаты недавних исследований также подтверждают важность оптимизации веб-страниц.
Ancestory.com показал 7% -ный положительный рост конверсий. Это было вызвано сокращением времени рендеринга веб-страниц на 68%, страниц на 46%, и времени загрузки на 64%.
AliExpress сократил время загрузки своих страниц на 36%. Их заказы выросли на 10,5%, а коэффициенты конверсии - на 27%.
Типы изображений и форматы
Есть в основном два типа файлов изображений – растровые и векторные. Растровые изображения широко используются в Интернете. Они создаются с помощью программного обеспечения на основе пикселей, или с использованием камеры или сканера. Векторная графика создается с помощью векторного программного обеспечения. Она используется для иллюстраций, рисунков и иконок.
Существует несколько форматов графических файлов:
Jpg - наилучший тип файла для фотографий, он хорошо масштабируется, но не наоборот. Качество изображения хорошо сохраняется после сжатия.
Png - формат для изображений большого размера с меньшим количеством цветов. PNG хорошо масштабируются, и используются для диаграмм, графиков и т. д.
Gif - формат gif плохо масштабируется. Он используется для небольших изображений, таких как значки, кнопки и т. д.
Svg - это формат векторного файла, SVG-файлы имеют очень малый размер изображения и очень хорошо масштабируются.
Bmp – BMP-файлы огромны по размеру и, как правило, неровные.
Что такое оптимизация изображения?
Оптимизация веб-изображений подразумевает использование сжатых по максимуму, но визуально приятных изображений. Оптимизация изображений проста, но важна для повышения производительности сайта.
Зачем нужна оптимизация изображений?
Оптимизация изображений позволяет быстрее загружать веб-страницы, и напрямую влияет на следующие характеристики веб-сайта:
Скорость страницы : оптимизированные изображения занимают сравнительно меньшее время для передачи с сервера.
Пропускная способность : использование тяжелых изображений требует увеличения нагрузки на пропускную способность.
SEO : скорость загрузки страницы является четвертым по важности критерием для агрегирования ключевых слов в поисковых системах.
Как измерить время загрузки страницы?
Быстрая загрузка сайта обеспечивает положительный пользовательский опыт. Для измерения и анализа времени загрузки страницы доступно несколько инструментов. Такие инструменты, как PageSpeed Insights, Pingdom Speed Speed Test и YSlow, измеряют производительность страницы. Они не только измеряют время загрузки страницы веб-сайта, но и дают советы по улучшению.
Оптимизация изображений для SEO
Для хорошего ранжирования сайта в поисковой системе недостаточно прописать ключевые слова в тексте. Изображения также должны быть помечены соответствующим образом, чтобы боты поисковых систем могли их обнаружить.
Для оптимизации изображений необходимо учитывать ряд свойств изображения, таких как размер, название и тэги ALT.
Методы оптимизации изображений
Оптимизация изображений подразумевает под собой не только уменьшение размера изображения. Изображение не должно быть размытым. Профессионально выглядящий образ специально сохранен для сети, должен иметь сбалансированное качество и размер файла.
Существует множество методов и алгоритмов для создания оптимизированных изображений.
Ручные методы
Общим и простым подходом является ручное изменение размера и сжатие изображений с помощью программного обеспечения, такого как Photoshop и Gimp.
Photoshop предлагает несколько вариантов сжатия размера изображения, сохраняя при этом качество. Диалоговое окно «Сохранить для Web и устройств» может сравнивать исходное изображение с другими вариантами сжатия.
Есть также плагины, такие как «JPEG XR», «Инструменты текстур NVIDIA» и «Экспорт PNG», которые расширяют возможности Photoshop. Продвинутые пользователи могут попробовать использовать их.
Gimp в качестве инструмента оптимизирует изображения с помощью опции «Экспортировать как». Вы можете выбрать формат выходного файла, выбрать его параметры качества и просмотреть результат.
Автоматизированная крупномасштабная оптимизация
PHP предоставляет встроенные пакеты GD и GD2 для автоматической оптимизации изображений. Это позволяет изменять размеры и проводить манипуляции на стороне сервера.
Как оптимизировать изображения в WordPress
На веб-сайтах WordPress используются полноэкранные изображения. Эти изображения обычно большого размера, неправильного формата и плохо оптимизированы. Поэтому дизайнерам веб-сайтов WordPress необходимо разработать четкую стратегию для создания оптимизированных изображений.
Общие методы оптимизации
Выберите нужный формат файла . Неправильное использование формата больших изображений может привести к увеличению веса.
Измените размеры изображений, чтобы они соответствовали требованиям к отображению. Встроенный редактор изображений WordPress предоставляет параметры для изменения размеров изображения.
Уменьшите качество изображения , сжав его.
Используйте адаптивные изображения , созданные с помощью WordPress. В редакторе можно управлять размерами - Миниатюра, Средний, Полный размер и т. д.
Как оптимизировать изображения для SEO
WordPress предоставляет поля изображения, которые необходимо указать при загрузке изображений. Вы должны заполнить эти поля, и не оставлять их по умолчанию. Добавьте ключевые слова для поиска.
Заголовок изображения отображается, когда читатель прокручивает изображение. Заголовок форматируется в Title, и не должен включать дефисы. Заголовок отображается под изображением. Это необязательное поле.
В описании укажите название, тут же приводится более подробная информация.
Имя файла должно включать короткие ключевые слова и включать дефисы для оптимальной оптимизации.
Alt - это самое важное поле для описания изображения. Он используется поисковыми системами, и выводится в том случае, когда изображение не загружается.
Как добавить Alt-теги к изображениям в WordPress
Если на странице одно изображение, используйте основное ключевое слово в атрибуте Alt. Если же картинок больше одной подобное может привести к переспамленности страницы. поэтому стоит рассмотреть синонимы, связанные фразы для заполнения этого поля.
Добавление тегов Alt для существующих изображений в WordPres
Шаг 1: Выберите страницу для редактирования и опцию «Редактировать страницу».
Шаг 2: Выберите изображение, для которого нужно прописать Alt.
Шаг 3: Нажмите кнопку «Изменить».
Шаг 4: Откроется панель «Детали изображения».
Шаг 5: Пропишите нужные текст в поле «Alt».
Шаг 6: Нажмите кнопку «Обновить».
Добавление тегов Alt для новых изображений в WordPress
Шаг 1: Выберите опцию «Add Media» на вкладке «Добавить новую страницу» или «Редактировать страницу».
Шаг 2: Выберите изображение, которое нужно добавить.
Шаг 3: Панель " Подробности" открывается справа.
Шаг 4: Отредактируйте поле «Alt».
Шаг 5: Нажмите «Вставить в страницу».
SEO-оптимизированные изображения: использование плагинов WordPress
WordPress хорошо оснащен самыми разными плагинами. В том числе существует множество плагинов, которые предоставляют возможности для SEO-оптимизации изображений. Давайте взглянем на некоторые популярные плагины и инструменты оптимизатора.
Этот плагин обеспечивает динамическое добавление оптимизированного Alt-текста и заголовков. Плагин не изменяет базу данных и может быть безопасно отключен, если не требуется.
В премиум-версии есть поддержка изображений товара WooCommerce.
SEO Image OptimizerПлагин динамически заменяет теги Title и Alt у изображений, а также предоставляет возможности для изменения размера и сжатия изображения.
SEO Friendly ImagesПлагин SEO Friendly Images позволяет автоматически вставлять заголовок ALT. Функции плагина могут использоваться для всех изображений.
PB SEO Friendly ImagesПлагин используется для автоматической оптимизации всех Alt и названий изображений.
Вывод
Значение оптимизации изображений на веб-страницах нельзя недооценивать. Это важный аспект увеличения скорости страницы. Ранжирование в поисковых системах также выше у страниц, которые содержат оптимизированные изображения. Поэтому веб-дизайнеры должны сосредоточиться на создании и использовании изображений, которые имеют оптимальный баланс качества и размера.
Картинки — важная часть любого информационного сайта. В связи с большим количеством статей и изображений в них, размеры папки загрузок на хостинге (wp-content/uploads) а также скорость загрузки страниц могут достигать таких пределов, за которые хостинг выключает сайт, а поисковые системы снижают позиции. Не желаю вам сталкиваться ни с тем и ни с другим и предлагаю в срочном порядке проделать на ваших сайтах несложный алгоритм действий по оптимизации изображений.
- Сделаем бекап папки с изображениями — это обязательно, так как чем код не шутит.
- Затем мы удалим абсолютно все миниатюры любых размеров и предназначений.
- После мы проверим файл functions.php на наличие неиспользуемых размеров миниатюр.
- Заново сгенерируем миниатюры.
- И оптимизируем в итоге размер картинок.
Все это мы будем делать с помощью нескольких бесплатных инструментов. Для экономии времени рекомендую делать это сразу на нескольких проектах, так как большинство процессов автоматические, и их просто нужно поочередно запускать.
Что нам потребуется для работы
Для меня оптимизация изображений важнее этого небольшого глюка, который легко исправляется вручную обычным рутинщиком или лично владельцем сайта. К тому же, случился он только на 2-х сайтах.
Идем на страницу:
И нажимаем на заголовок поста.
Открываем Визуальный редактор и находим неправильную картинку.
Выбираем изображение и жмем Изменить.
И в открывшемся окне сразу нажимаем Обновить в правом нижнем углу.
Вот и все. Так проделываем со всеми слетевшими картинками.
Удаляем плагины
Так как проделанная работа для сайта носит разовый характер, то лучше сразу после нее удалить все установленные для этой цели плагины, потому что в обычной жизни сайта они ни для чего не нужны, а бесполезная нагрузка ни к чему.
Спасибо за внимание. Если есть вопросы, пишите комментарии, постараюсь помочь. Дополнения также приветствуются (возможно, вы знаете какие-то лучшие способы).
Привет читателям, сегодня затронем одну из самых важных для очень многих пользователей тем — оптимизация изображений на вашем WordPress сайте. Ниже я привожу авторские описания трех самых интересных, на мой взгляд, плагинов непосредственно для оптимизации ваших картинок и еще три, условно говоря — вспомогательных, но не менее полезных плагина по дополнительной работе с изображениями.
На самом деле, подобных плагинов существует больше, но мы остановимся на наиболее актуальных именно на момент написания статьи. Плагины которые не обновляются уже более года или имеют явно сомнительный рейтинг я вообще стараюсь не рассматривать и не описывать, за редкими исключениями.
Кроме того, стоит помнить, что существуют различные онлайн сервисы типа jpegmini , для обработки и оптимизации изображений. И конечно, есть самые обычные программы для компьютера типа пресловутого Фотошопа или разных просмотрщиков графики с возможностью оптимизации картинок при сохранении.
EWWW Image Optimizer – это WordPress-плагин, который автоматически оптимизирует ваши изображения прямо во время их загрузки. Он также оптимизирует и ранее загруженные изображения.
Функции:
- Уменьшает размер картинок, благодаря чему страницы загружаются быстрее. Кроме того вам проще выполнять бэкапы, и вы можете сохранить больше дискового пространства.
- Возможность оптимизировать сотни изображений за несколько минут, хотя оптимизация PNG-файлов занимает больше времени;
- Благодаря интеграции с TinyJPG достигается лучшая JPG-оптимизация;
- Возможность совместного использования pngout, opting и pngquant для лучшей PNG-оптимизации. Плюс присутствует опция lossy PNG от TinyPNG;
- Возможность оптимизировать все, что угодно с помощью расширения класса wp_image_editor;
- Возможность выбрать любую вашу папку для сканирования, чтоб найти фото для оптимизации;
Ваши изображения останутся такими же качественными, так как по умолчанию EWWW Image Optimizer использует техники оптимизации без потерь. Единственное исключение из этого правила – это GIF-файлы, так как даже после оптимизации без потерь, вы не сможете отредактировать анимацию, не применив gifsicle-операцию, которую невозможно оптимизировать;
- Конвертация без потерь файлов gif2png и jpg2png;
- Конвертация png2jpg проходит с потерями;
- Оптимизация JPG и PNG с потерями использует сложные алгоритмы, чтоб минимизировать перцепционную потерю качества;
- jpegtran, TinyJPG, JPEGmini, optipng, pngout, pngquant, TinyPNG и gifsicle – это инструменты, которые используются для оптимизации;
WP Smush – это плагин, который поможет уменьшить вес картинок, улучшить производительность сайта и его SEO показатели, используя бесплатный WPMU DEV WordPress Smush API. WP Smush сканирует и оптимизирует загружаемые или уже загруженные изображения, отсекая все лишние данные.
Функции, доступные и в платной, и бесплатной версии:
- Оптимизация изображений с использованием продвинутых техник компрессии без потерь;
- Работает с форматами JPEG, GIF и PNG;
- Уменьшает вес загружаемых картинок автоматически;
- Вручную уменьшайте вес индивидуальных изображений в медиа библиотеке, или обрабатывайте изображения группами по 50 прикреплений;
- Уменьшает картинки, которые весят 1MB или меньше;
- Использует быстрый и надежный Smush API от WPMU DEV;
- Просмотр продвинутых статусов сжатия для каждого прикрепления в отдельности или всей библиотеки в целом.
Функции WP Smush Pro:
- Умная многошаговая компрессия с потерями. Сжатие с потерями примерно в два раза превосходит сжатие без потерь, а качество при этом практически не страдает;
- Еще более впечатляющая компрессия без потерь;
- Уменьшает картинки, которые весят 32MB или меньше;
- Возможность сжать все картинки в один клик без лимитов;
- Возможность создавать бэкапы ваших изображений до их сжатия;
Optimus — WordPress Image Optimizer
Плагин автоматически оптимизирует и сжимает изображения прямо во время их загрузки и без потери качества.
Как работает плагин?
Во время загрузки изображений в медиа-библиотеку, Optimus посылает их на свой Optimus-сервер, где файлы обрабатываются и присылаются обратно, где сжатые версии сохраняются в медиа-библиотеке.
Файлы возможно сжать таким образом, что они потеряют до 70% своего веса, в зависимости от картинки и ее формата.
Доступны три разные версии Optimus:
- Optimus — бесплатная базовая версия плагина, сжимающая файлы, которые весят менее 100kb.
- Optimus HQ – это премиальная версия с расширенной функциональностью для личных проектов.
- Optimus HQ PRO — это премиальное профессиональное решение для сайтов ваших клиентов.
Особенности:
- Миниатюры изображений также подвергаются процессу оптимизации;
- Качество изображений, полученных в результате сжатие, никогда не страдает;
- Сохранение данных об авторе, EXIF и копирайтов.
The Media File Renamer – это WordPress-плагин, который переименовывает ваши медиа-файлы для того, чтоб выстроить систему файлов и улучшить SEO.
Если файл переименован, то обновляется и все то, что с ним связано (записи, страницы, пользовательские типы и их метаданные). В новой колонке медиа-менеджере появляется новое идеальное название файла и кнопка для его переименования. Есть возможность разблокировать автоматическое переименование. Также присутствует маленькая панелька File Renamer in Media, которая позволяет переименовать все файлы сразу.
- Плагин прекрасно работает с WP Retina 2x, и многими другими;
- Совместим с , Linux, BSD и OSX системами.
Pro-версия. Некоторые функции:
- Ручное переименование;
- Переименование, согласованное с прикрепленной к записи информации;
- Журнал SQL-запросов.
Предупреждение! Так как процесс переименования – не безопасен, то сначала рекомендуется переименовать парочку заголовков на пробу.
Imsanity автоматически уменьшает размер крупных изображений во время загрузки, делая изображения идеальными для отображения в браузере. Плагин сохраняет максимально допустимые ширину, высоту и качество изображения.
Плагин идеален для блогов, которым нет необходимости использовать изображения со очень высоким разрешением.
Функции:
- Плагин автоматически пересматривает размеры крупных изображений, конвертируя их в более подходящие;
- Imsanity уменьшает вес уже загруженных изображений;
- Позволяет настроить максимальную ширину/высоту и качество jpg-файлов;
- Опционально конвертирует BMP-файлы в JPG-файлы для дальнейшей оптимизации;
- Плагин работает, не требуя каких-либо действий со стороны пользователя;
- Встроенные функции для изменения размеров изображений для пользователей
Вероятно, вы уже не раз видели на различных сайтах такой эффект. Lazy Load — плагин «ленивой» загрузки, загружающий изображения только тогда, когда они видимы, что в свою очередь позитивно влияет на скорость загрузки сайта. Lazy load images использует для этого jQuery.sonar.
Еще статьи
Наиболее важным и существенным способом для служат действия по сжатию картинок, добавляемых на страницы сайта. При этом важно не только уменьшить размер картинки, но не потерять его качества. Для сжатия можно использовать программы, онлайн сервисы. Я уже неоднократно рассказывал о способах сжатия медиафайлов на страницах этого блога. Сегодня возвращаюсь к этой теме вновь, так как нашел неплохой плагин, служащий вышеуказанным целям.
Сделать ваш сайт быстрее, сжимая свой JPEG и PNG изображения поможет плагин Compress JPEG & PNG Images. Его достоинство и отличия от способа с применением программ и онлайн сервисов то, что делает он это автоматически при загрузке нового файла. Качество, разумеется, не теряется. Недостаток — присутствует ежемесячный лимит на сжатие загружаемых фалов, Но оплата эта чисто символическая.
Особенности плагина Compress JPEG & PNG Images
Автоматическое сжатие новые файлов.
Легкое объемного сжатия всех существующих, загруженных ранее картинок в вашей библеотеке.
Возможно отдельное сжатие для каждого изображения в вашей библиотеке СМИ.
Многоузловая поддержка с помощью API.
Как это работает?
После того как вы загрузите изображение на свой WordPress сайта, каждый изменения размера изображение будет загружено на TinyJPG или услуги TinyPNG. Ваше изображение анализируется, чтобы применить наилучшее сжатие. Исходя из содержания вашего образа выбирается оптимальная стратегия. Результат отправляется обратно на ваш сайт где медиафайл заменяется оригинальный файл с заданным размером.
В среднем изображения JPEG сжимаются на 40-60% и изображений PNG на 50-80% без видимой потери качества. Ваш сайт будет загружаться быстрее для ваших посетителей, и вы будете экономить дисковое пространство и пропускную способность!
Установка и настройки плагина
Найти плагин вам можно в админпанели, вбив название «Compress JPEG & PNG Images» в окно поиска плагинов. Сразу после загрузки и активации, обратите внимание на строки в самом верху на списком плагинов. Там будет присутствовать ссылка, переход которой и дальнейшие несложные действия, предоставят вам возможность получить ключ API.
Без получения этого ключа, который нужно будет вставить в окне настроек, плагин работать не будет!
После того, как получите ключ, вы можете сразу же начать сокращение изображений. Вы можете представить PNG или JPEG файл с любым клиентом HTTP. Сервер будет сжимать изображение и отвечать с URL, где вы можете захватить результат.
Уникальный ключ API вы получаете для активации плагина и может быть использован для нескольких веб-сайтов на движке вордпресс.
Ключ может быть использован для сжатия изображений в формате JPEG и PNG с плагином WordPress и еще расширением Magento , который был выпущен недавно.
Особенности API
- Сжатие PNG и JPEG изображения;
- Автоматическое обнаружение PNG и JPEG изображений;
- Изменение размера PNG и JPEG изображения;
- Сохранение (размеры) изображение на Amazon S3;
- Загрузить один раз, сжимать и изменить размер нескольких раз.
Для документации и другие примеры вы можете исследовать API Reference .
Ценообразование
Вы платите только за то, что вы используете. Первые 500 сжатия каждый месяц бесплатно. Вы платите за сжатие только если вы сжимаете более 500 изображений в месяц.
Там никаких затрат подписки, без ограничений размеров файлов и не минимальные платежи. Только успешные сжатия взимается.
Изображения загружены с API Цена на изображения
- Первые 500 изображений в месяц бесплатно
- Следующая 9 500 изображений в месяц $ 0,009 за изображение
- Более 10 000 изображений в месяц $ 0,002 за изображение
Инструкция по установке
- Введите ключ API TinyPNG или TinyJPG и настройте размеры изображений для сжатия на специальной странице админпанели вашего сайта.
- Посмотрите, как много места занимают ваши картинке на странице «Медиафайлы».
На этой странице можно использовать возможность как отдельного сжатия для выбранной картинки, так и групповой постраничный, установив галочку «Действия» для массового сжатия»Сompress Images» на каждой странице админки, вмещающей в себе, как известно, двадцать файлов.
Для того, что бы зараз сжать ВСЕ имеющиеся на вашем сайте картинки с вышеуказанными расширениями, нужно в админпанели перейти из строки «Инструменты» на страницу «Comhress All Images»(Сжать все изображения):
Примечание : Обращаю ваше внимание, что плагин доступен на русском языке, а картинки по настройке и работе с плагином я скопировал с сайта разработчика плагина, в которых все записи на английском. На самом деле после активации плагина в вашей админке будет тот язык, который вы настроили для своего движка.
(Visited 133 times, 1 visits today)
Мы продолжаем серию записей посвящённую оптимизации wordpress сайта. В предыдущей записи я рассказывал . Тема сегодняшней записи – Оптимизация изображений wordpress сайта. Сегодня я дам вам несколько полезных и практических советов, которые позволят вам снизить нагрузку на сайт и сделать его быстрее. Я думаю не для кого не секрет, что самую сильную нагрузку на отображение сайта в интернете оказывают графические элементы, такие как изображения.
Конечно влияние изображений на сайт, зависит от их размера и веса. Например, если размер каждого изображения на вашем сайте не превышает 100-150 килобайт (для самых больших по размеру изображений), то это нормально. Если вы публикуете на своём сайте много записей с изображениями, то вы просто обязаны следить за их весом. Перед тем как загрузить фото на сайт, посмотрите сколько оно весит, постарайтесь максимально уменьшить вес фото. Старайтесь не загружать на сайт большие по размеру изображения 2500х4500.
Лично я, перед тем как загрузить фото или скриншот на сайт, сканирую их для уменьшения веса, в специальном онлайн сервисе, о котором я рассказывал в статье – . Обязательно используйте данный сервис, он очень простой и полезный, вам понравится, быстро сканирует изображения, уменьшая их вес в разы.
Хочу дать ещё один, очень дельный совет. Когда вы загружаете изображение в библиотеку, то wordpress автоматически создаёт несколько вариантов размеров изображений, которые у вас указаны в Настройках медиафайлов. По умолчанию у вас указаны размеры для: Миниатюр, Средний размер, Крупный размер, то есть когда вы загружаете фото, то создаётся ещё 3 фото. А теперь умножьте все фотографии, которые вы загрузили на 3, представляете какой груз 200 складируется в вашем корневом каталоге. Чтобы wordpress не создавал другие размеры, то просто обнулите размеры в настройках медиафайлов.
Но смотрите, я обнулил средние и крупные размеры, потому что я их не использую, я всегда выбираю для изображений полный размер. Ну и размер для миниатюр я оставил, так как я их использую. Если вы не выбираете средний и крупный размер при вставке изображения на сайт, то можете обнулить их, чтобы ваша память не заполнялась лишним грузом.
На сегодня всё, но оптимизация wordpress сайта продолжается, не расслабляйтесь! Все вопросы пишите в комментариях.
