- Ключевые различия между типами изображений
- Lossy vs. Lossless
- прозрачность
- Размер файла
- Как изображения влияют на SEO и скорость
- Оптимизация изображений в фотошопе
- Плагины для оптимизации изображений
- EWWW Image Optimizer
- Kraken.io Оптимизатор изображений
- Сжатие изображений JPEG и PNG
- Заключение
В последнее время это стало особенно ярким для меня. Я создавал сайт для моего семейный бизнес и понял, что я могу сэкономить около 1,2 МБ на одной странице, просто оптимизируя изображения. Это около 43% всех изображений на главной странице сайта. Я считаю, что оптимизация изображений дает гораздо больше преимуществ, чем некоторые другие, возможно, более популярные методы. В этой статье я дам вам несколько советов о том, как оптимизировать изображения вашего сайта и представлю несколько плагинов WordPress, которые будут выполнять эту работу.
Ключевые различия между типами изображений
Существует три основных формата веб-изображений: GIF, JPEG и PNG. Мы сосредоточимся на JPEG и PNG, так как GIF, вероятно, лучше всего ограничить клипартом, нарисованными линиями изображениями и анимированными изображениями, поскольку ни JPEG, ни PNG не поддерживают анимацию. Между ними есть ключевые различия, и это поможет вам лучше понять оптимизацию, если вы сначала узнаете некоторые из этих различий.
Lossy vs. Lossless
Хотя JPEG обычно создает файлы изображений меньшего размера, он теряет некоторые данные файла изображения в процессе. Поэтому мы называем JPEG форматом с потерями. PNG - формат без потерь, для сравнения. Он не теряет никаких данных из исходного изображения при сжатии.
прозрачность
Еще одна большая разница связана с прозрачностью. Изображение на снимке экрана слева внизу изображено на розовом фоне, а изображение справа - на прозрачном.
Форматы PNG и в меньшей степени GIF поддерживают прозрачность. JPEG не делают.
Размер файла
JPEG обычно создает файлы меньшего размера, чем эквивалентное изображение в формате GIF или PNG. Если вы хотите уменьшить размер файла и не возражаете потерять немного четкости или других частей данных изображения в обмен, JPEG является хорошим выбором. С другой стороны, PNG может иногда создавать файл меньшего размера, если размеры изображения не слишком велики, и это будет происходить без потери каких-либо данных. Так что в некоторых случаях стоит посмотреть на изображение в обоих форматах и сделать соответствующий выбор.
Как изображения влияют на SEO и скорость
Проще говоря, чем быстрее загружаются ваши страницы, тем лучше ваши результаты в органические поисковые рейтинги при прочих равных условиях.
И что является одним из самых больших тяг на время загрузки страницы? Изображений.
Поэтому, когда вы оптимизируете свои изображения и ускоряете темп загрузки этой страницы, вы повышаете ее SEO и органический рейтинг в результатах поиска. Более быстрая загрузка изображений и страниц также обеспечивает более плавное взаимодействие с пользователем, что может помочь вам увеличить трафик и само по себе может привести к лучшему поисковому рейтингу.
Оптимизация изображений в фотошопе
Многие блоггеры и владельцы сайтов чувствуют себя более комфортно, используя бесплатное или менее дорогое приложение для редактирования изображений Adobe Creative Cloud, Photoshop. Если вы предпочитаете это, вы будете рады узнать, что вы также можете оптимизировать свои изображения в Photoshop.
Откройте изображение в фотошопе. Перейдите в Файл> Экспорт, затем выберите «Сохранить для Web». Выберите способ отображения изображения на вкладках диалогового окна вверху: «Оптимизировано», «2-вверх» или «4-вверх».
Для оптимизации различных параметров вы будете работать с настройками, доступными в диалоговом окне в правом верхнем углу. Какие варианты доступны для вас, зависит от выбранного вами формата. Вы можете удалить все метаданные - авторские права, контактные данные и настройки камеры - и значительно уменьшить размер файла.
Выберите нужный формат, затем сохраните полученный файл изображения. Осторожно, хотя! Размер изображения не должен превышать 500 КБ.
Для получения дополнительной информации о работе с функциями оптимизации в Photoshop см. « Параметры оптимизации веб-графики «.
Плагины для оптимизации изображений
Если вы хотите, чтобы оптимизация изображений работала в среде WordPress, у вас есть несколько вариантов плагинов. Три, которые мне особенно нравятся, перечислены ниже.
EWWW Image Optimizer
EWWW Image Optimizer автоматически позаботится обо всех ваших изображениях в формате JPEG, PNG и / или GIF.
Если вы новичок в оптимизации, но ваш блог уже давно, вам особенно понравится эта функция: EWWW также может оптимизировать всю вашу библиотеку изображений, даже если они были опубликованы на вашем сайте.
Оптимизация выполняется на вашем собственном сервере вместо подключения ваших файлов к стороннему сервису. Конечный результат заключается в том, что оптимизация должна занимать меньше времени, что особенно полезно при оптимизации большого бэк-каталога.
Наконец, вы можете выбрать между стандартными методами без потерь и оптимизацией с потерями, которые помогут вам сэкономить еще больше места.
Kraken.io Оптимизатор изображений
Kraken.io использует свой собственный API для оптимизации ваших файлов JPEG, PNG и GIF, а это значит, что вам понадобится бесплатная учетная запись Kraken.io для получения вашего API и ключей.
Kraken.io использует интеллектуальный протокол сжатия с потерями, который должен привести к впечатляющему уменьшению размера файла без существенного снижения качества изображения. Кроме того, вы можете выбрать вариант без потерь.
Сжатие изображений JPEG и PNG
Сжатие изображений JPEG и PNG будет использовать только протокол сжатия и оптимизации с потерями, хотя основное качество ваших изображений должно поддерживаться на протяжении всего процесса.
В результате, он несколько упрощен, а некоторые могут сказать, ограничен в настройках конфигурации.
Это позволит вам установить максимальное разрешение, выбрать изображения для сжатия и решить, поддерживать ли метаданные.
Заключение
Вывод очевиден: для достижения наилучших результатов с точки зрения как времени загрузки страницы, так и SEO, важно оптимизировать все изображения, которые вы используете на своем сайте.
Выберите рабочий процесс, который будет работать для вас, а затем придерживайтесь его. Это гораздо проще и занимает меньше времени, чем возвращаться к решению проблем после свершившегося факта.
Если вы недавно начали оптимизировать изображения, поделитесь результатами и любимыми инструментами в комментариях ниже.
И что является одним из самых больших тяг на время загрузки страницы?