1. Что такое веб-оптимизированные изображения?
2. Масштабирование изображений
3. Сжатие изображений
4. Рабочие процессы оптимизации изображений для Mac
5. Рабочий процесс: изображения, добавленные в указанные папки, автоматически оптимизируются
6. Рабочий процесс: щелкните правой кнопкой мыши любое изображение, чтобы выбрать параметр масштаба
7. Оптимизация изображений для Windows
8. Используйте Wappwolf для автоматического масштабирования изображений
9. Используйте FileOptimizer для сжатия изображений
10. Онлайн автоматизированный процесс оптимизации изображений
11. Продолжить чтение:

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

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

Автоматизация на помощь! Почему бы не сосредоточиться на своих приоритетах и ​​позволить вашему компьютеру делать всю работу за вас?

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

Что такое веб-оптимизированные изображения?

Во-первых, краткий обзор того, что это значит оптимизировать ваши изображения. Хотя термин «оптимизированный» может означать разные вещи для разных компаний (в зависимости от конкретных целей эстетики сайта и емкости сервера), оптимизация изображения всегда сводится к двум необходимым шагам:

Масштабирование изображений

Самым трудоемким шагом в процессе оптимизации изображений является их правильное масштабирование. Хотя вы хотите, чтобы ваши изображения выглядели высококачественными, фотографии с высоким разрешением могут испортить время загрузки страницы. Сжатие изображений на реальной странице не поможет. Если исходный файл имеет размер 2000 x 2000 пикселей, не имеет значения, отображаете ли вы его с разрешением 200 x 200 пикселей - ваш браузер все равно загрузит исходный файл и все равно замедлит загрузку вашей страницы.

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

Например, в блоге Zapier мы стараемся поддерживать встроенные изображения блога шириной 660 пикселей (за некоторыми исключениями, сделанными для обучающих GIF-файлов). Однако для изображений заголовков нашего блога мы масштабируем изображения до 1500 x 500 пикселей.

Сжатие изображений

Вы также захотите сжать свои изображения, прежде чем загружать их на свой сайт. Сжатие изображений часто ассоциируется с размытыми изображениями низкого качества (а кому это нужно на их веб-сайте?), Но правда в том, что хорошее сжатие изображений практически без потерь - оно не снижает видимое качество изображения.

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

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

Рабочие процессы оптимизации изображений для Mac

Для этого рабочего процесса вам понадобятся только два бесплатных инструмента, один из которых поставляется с вашим Mac. Automator это встроенный инструмент на вашем Mac, который может - как вы уже догадались - автоматизировать задачи на вашем компьютере. Вы будете использовать Automator для изменения размера изображений. Затем вам нужно скачать ImageOptim бесплатный инструмент для перетаскивания, который быстро сжимает ваши изображения без ухудшения их качества.

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

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

Рабочий процесс: изображения, добавленные в указанные папки, автоматически оптимизируются

Чтобы приступить к созданию рабочего процесса оптимизации изображений, откройте Automator и выберите рабочий процесс « Действия с папкой». Это обеспечит запуск вашего рабочего процесса Automator при каждом обновлении папки. Выберите папку, которую вы хотите использовать в качестве папки триггера.

Далее вы добавите серию из трех шагов.

Шаг 1. Добавьте шаг « Копировать элементы Finder» . Это обеспечит сохранение ваших исходных изображений в выбранной вами папке, если вам не нравятся результаты рабочего процесса. (Вы можете пропустить этот шаг, если вам не нужно сохранять копии ваших изображений.)

Шаг 2 : Решите, что вы хотите сделать со своим изображением. При стандартном рабочем процессе вы можете выбрать либо параметр « Масштабировать изображения», либо « Обрезать изображения» . Какая разница?

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

Обрезать изображение - это тот шаг, который вам, вероятно, понадобится, если вам нужно, чтобы изображения соответствовали определенным размерам. Здесь вы можете выбрать масштабирование изображения по ширине, высоте, длинной стороне или короткой стороне перед кадрированием. Поэтому, если, как и я, вы хотите, чтобы изображения для вашего блога имели размер 1500 x 500 пикселей, вы хотите масштабировать их по ширине, а затем установите размеры 1500 x 500. Когда этот шаг будет выполнен, он сначала масштабирует вашу ширину до 1500 , а затем обрежьте изображение, пока высота не достигнет 500px.

Шаг 3 : Добавьте шаг Open Finder Items. Выбрав это действие, вы можете выбрать, какое приложение Automator будет использовать для открытия ваших изображений. Прокрутите список вниз, пока не найдете ImageOptim. Поскольку ImageOptim автоматически оптимизирует изображения, которые в нем открыты, этот шаг завершит процесс оптимизации, удалив ненужные данные и сжав изображение.

Шаг 4 : Пришло время проверить ваш рабочий процесс. Чтобы протестировать шаг в Automator, вам нужно добавить шаг «Получить указанный элемент поиска» в начало рабочего процесса. Отсюда выберите изображение, которое вы хотите протестировать, затем нажмите «Выполнить» в правом верхнем углу приложения. Это запустит ваш рабочий процесс на указанном изображении. Как только это будет сделано, дважды проверьте изображение - как оно выглядит, его размеры, размер файла - и убедитесь, что оно было оптимизировано так, как вы ожидали.

Шаг 5. Удалите шаг «Получить указанный элемент поиска» и сохраните. Теперь вы готовы к работе! Когда вы добавляете новое изображение в указанную папку, этот процесс запускается автоматически.

Рабочий процесс: щелкните правой кнопкой мыши любое изображение, чтобы выбрать параметр масштаба

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

Для начала выберите «Сервис» при создании нового файла Automator. Затем выполните те же действия, что и выше.

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

Оптимизация изображений для Windows

Если вы пользователь Windows, у вас не будет тех же опций, что и у пользователя Mac, поскольку идеального аналога Automator для Windows по-прежнему нет (хотя AlternativeTo имеет несколько идей ). Тем не менее, есть еще несколько приемов и инструментов, которые мы использовали, которые помогут вам быстрее масштабировать и сжимать изображения.

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

При использовании в паре с Dropbox, Wappwolf позволяет автоматически масштабировать изображения, помещенные в указанную папку. Однако эта папка должна быть папкой Dropbox, поэтому убедитесь, что вы сначала установили Dropbox на свой ПК.

Шаг 1: Создайте папку в вашем Dropbox, где вы будете размещать изображения, которые вы хотите оптимизировать. Это может быть основная папка или подпапка.

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

• Маленький (640x480)
• Электронная почта (800x600)
• Экран (1024x768)
• Печать (1600x1106)
• Высококачественная печать (2048x1536)

Шаг 3: Готово! Чтобы использовать, просто перетащите изображения с вашего ПК в указанную папку Dropbox и позвольте Wappwolf сделать все остальное! Как только автоматизация запустится, вы увидите дополнительные подпапки в вашем Dropbox, которые выглядят так:

Используйте FileOptimizer для сжатия изображений

Так же, как ImageOptim, FileOptimizer Он бесплатный, имеет простой интерфейс и позволяет легко оптимизировать изображения, просто перетаскивая файлы.

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

Онлайн автоматизированный процесс оптимизации изображений

Существует ряд других онлайн-инструментов для оптимизации и изменения размера изображений, большинство из которых потребует от вас отправки изображений через API-вызов. Для большинства из нас это намного сложнее, чем изменение размеров изображений вручную, но с помощью интеграции приложений Zapier это может быть самым простым способом изменить размер ваших изображений.

Вы будете использовать два инструмента: Filestack API для изменения размера и фильтрации изображений, и TinyPNG инструмент для уменьшения размера ваших изображений. Чтобы использовать оба из них автоматически, вы хотите использовать Filestack а также TinyPNG Zapier интеграции (обе из которых в настоящее время находятся в бета-версии).

Изменение размера изображений в Zapier с помощью Filestack

Вот как вы будете использовать это. Сначала добавьте файл, который вы хотите оптимизировать, в папку Dropbox или Google Drive. Затем добавьте шаг Filestack Resize Image , добавьте файл из Dropbox или Google Drive и установите максимальные размеры, которые вы хотите для своих изображений. Filestack затем уменьшит ваше изображение до этого размера, убедившись, что самая длинная сторона не длиннее установленных вами размеров.

Оптимизируйте изображения в Zapier с TinyPNG

Затем добавьте шаг TinyPNG в свой Zap (сначала обязательно добавьте бета-интеграцию). Добавьте ссылку на изображение с шага Filestack, и TinyPNG оптимизирует изображение, чтобы сделать его как можно меньше.

Выполните последний шаг Dropbox или Google Drive, чтобы сохранить изображение обратно на компьютер, и включите Zap. Затем, когда вам нужно оптимизировать изображения, просто сохраните их в папку, выбранную на первом шаге вашего Zap, и интеграция сделает это за вас.

Узнайте больше о Filestack в нашем Filestack Обзор или попробуйте TinyPNG онлайн для более ручного способа оптимизации изображений.

Теперь вы счастливы, ваша команда SEO счастлива, а ваши читатели и клиенты счастливы, когда ваши страницы загружаются быстро. Есть какие-нибудь другие инструменты или рабочие процессы оптимизации изображений, которые вам нравятся? Дай мне знать в комментариях!

Продолжить чтение:

Изображение от Александру Ставрица ,

Похожие

Комментарии