Фото оптимизация: 3 способа оптимизации изображений для сайта без потери качества

Содержание

Как оптимизировать фото и привлекать трафик из поиска по картинкам

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

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

Размер имеет значение

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

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

Однако ни в коем случае не стоит сводить суть оптимизации фото к уменьшению их размера до минимума. Публикуя фотографии, решите, насколько маленькой может быть фотография без потери визуальной привлекательности страницы. «Яндекс», Google и другие поисковые системы ценят эстетичные публикации. При этом они заботятся, чтобы в погоне за эстетичностью сайты не становились сильно «тяжелыми».

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

Следующие сервисы понадобятся вам для проверки скорости загрузки страницы и автоматического изменения размера фото:

Google PageSpeed Insights. Крупнейшая поисковая система мира разработала этот сервис, чтобы помочь вебмастерам управлять скоростью загрузки страниц.
Compressor.io. Бесплатный набор инструментов, позволяющий уменьшить размеры фото для увеличения скорости загрузки страниц.

После определения оптимального размера фото для вашего сайта приступайте непосредственно к поисковой оптимизации картинок.

Продвинем ваш бизнес

В Google и «Яндексе», соцсетях, рассылках, на видеоплатформах, у блогеров

Подробнее

Сколько стоит оптимизированное фото

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

Представьте себе сайт юридической компании. Как вы считаете, сумеет ли организация данного профиля получить выгоду от продвижения с помощью картинок? Или она просто потратит время и деньги, чтобы поставить галочку в маркетинговом плане и отчитаться перед инвестором об использовании модного способа раскрутки?

А теперь представьте ресурс, который зарабатывает на трафике, например, продает баннерную рекламу с оплатой за показы. Этот сайт заинтересован в привлечении трафика практически любыми средствами. Привлекая пользователей с помощью поиска по картинкам, владелец сайта фактически обменивает возможность просмотреть и скопировать уникальные качественные фото на просмотры рекламы.

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

96 причин не хоронить SEO – чек-лист по оптимизации сайта

Уникальность фотографий

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

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

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

Название фотографий

Публикуя фотографии, корректно называйте файлы. Например, если вы делитесь с пользователями изображением смартфона Samsung Galaxy Note 10+, логично, если файл с его изображением называется samsung-galaxy-note-10plus.jpg, а не abracadabra2244.jpg.

Поисковые системы используют названия файлов, чтобы определять, что изображено на картинках. Вам выгодно, чтобы «Яндекс» и Google поняли, что на фото изображен именно Samsung Galaxy Note 10+, а не какая-то abracadabra.

Атрибут alt

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

Обратите внимание, атрибут alt формирует описание изображения, которое отображается на странице, если фотография по каким-то причинам не загружается. Поэтому постарайтесь с помощью 4-6 слов (125 символов) максимально точно указать, что изображено на фотографии. Впишите в атрибут alt ключевое слово, если это можно сделать естественно.

Например, если вы публикуете фото вышеупомянутого смартфона, в атрибут alt можно вписать следующее: смартфон Samsung Galaxy Nexus (черный). Представьте, как будет выглядеть ваша страница, если пользователь вместо фотографии увидит что-то вроде «купить смартфон недорого в Москве».

Атрибут title

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

Контент страницы

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

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

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

Семантическая разметка

Крупнейшие поисковые системы мира, включая «Яндекс» и Google, используют стандарт Schema.org для структурирования веб-страниц и улучшения результатов поиска. Используйте разметку Schema.org для изображений, чтобы улучшить результаты ранжирования ресурса в поиске по картинкам. Для этого заполните на сайте поля «URL изображения», «Миниатюра», «Название», «Подпись», «Описание», «Высота» и «Ширина». Более подробно об этом можно почитать в документации «Яндекс.Вебмастера».

Как быстро оптимизировать все фото на сайте

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

Публикуйте только уникальные фото. Корректно заполняйте атрибуты alt и title. Окружайте фотографии качественным и полезным текстом. Не забывайте про семантическую разметку. Оптимизация каждой фотографии отнимет у вас несколько минут. Представьте, сколько времени вы потратите, чтобы оптимизировать 1000 изображений. Если хотите решить эту задачу быстро, уделяйте время каждой фотографии во время публикации.

Адаптация материала Image Optimization: How to Rank on Image Search by Dave Davies.

Крутой сайт, годный контент или картинки оптимального размера сами по себе не гарантируют успех для бизнеса. Этого реально добиться только комплексным продвижением в интернете, которым занимаются в TexTerra.

Оптимизация сайта под «Яндекс»: топ-9 факторов для интернет-магазинов в 2021 году

Squoosh — бесплатный сервис, который сожмёт любую картинку без потери качества

3 марта 2022

Веб-сервисы

Мощный инструмент с живым превью и массой настроек, который даст фору платным приложениям.

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

Для загрузки изображения достаточно перетащить его в окно браузера или вставить из буфера обмена. Примечательно, что операции с файлами осуществляются локально на вашем устройстве — после загрузки страницы не нужен даже интернет. К тому же сервис имеет открытый исходный код, доступный на GitHub.

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

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

Оптимизация файла осуществляется тремя способами: изменением разрешения, сужением цветового спектра и, собственно, сжатием. После включения соответствующего тумблера, например Resize, появляются дополнительные настройки. Доступны пресеты, ручные установки, выбор метода масштабирования и вспомогательные опции.

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

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

Squoosh полностью бесплатен и не содержит рекламы. Сервис работает в любых браузерах, включая мобильные.

Попробовать Squoosh →

Онлайн-компрессор изображений

Загрузить файлы

Перетащите сюда свои файлы

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

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

Зачем вам сжимать изображения?

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

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

Как работает компрессор изображений?

Наш инструмент использует сжатие с потерями для сжатия файлов изображений. Он поддерживает три типа файлов: PNG, JPG/JPEG и GIF. Эта система интеллектуально анализирует загруженные изображения и уменьшает их до минимально возможного размера файла без негативного влияния на общее качество.

Для начала вам нужно загрузить несколько изображений, которые вы хотите сжать. Вы можете загружать до 20 изображений одновременно, и вы можете свободно смешивать и сочетать типы файлов. Другими словами, вам не нужно загружать только JPG и ждать загрузки PNG. Наш сервер может автоматически анализировать файлы для вас.

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

Как уже говорилось, наш сервер определит идеальную степень сжатия, чтобы уменьшить размер файла, не снижая слишком сильно качество. Однако, если вам нужно большее или меньшее сжатие, вы можете его контролировать. Коснитесь миниатюры изображения, которое хотите изменить. Теперь переместите ползунок качества вверх или вниз, пока не остановитесь на параметрах размера/качества файла, которые вы считаете правильными. Когда вы закончите, нажмите кнопку «ПРИМЕНИТЬ» и перейдите к повторению этих шагов со следующим изображением.

Если вас устраивает текущий пакет, нажмите кнопку «СКАЧАТЬ ВСЕ». Это загрузит ZIP-файл со всеми вашими сжатыми изображениями. Если вам не нужны все они, вы можете нажать кнопку «СКАЧАТЬ» под каждой миниатюрой вместо того, чтобы загружать каждую по отдельности.

Готовы к следующей партии? Нажмите кнопку «ОЧИСТИТЬ ОЧЕРЕДЬ» и начните заново. Вы можете использовать этот инструмент столько раз, сколько необходимо, бесплатно.

Безопасно ли сжимать изображения?

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

TinyPNG — API разработчика

Начало работы

Как только вы получите свой ключ, вы можете сразу начать сжимать изображения. Официальные клиентские библиотеки доступны для Ruby, PHP, Node.js, Python, Java и .NET. Вы также можете использовать плагин WordPress для сжатия изображений JPEG и PNG.

Сообщество также создало большое количество сторонних надстроек с помощью Developer API.

Вы также можете создать собственную интеграцию с любым клиентом HTTP(S). Сервер сожмет ваше изображение и ответит URL-адресом, по которому вы сможете получить результат.

 curl --user API:  YOUR_API_KEY  \
      --data-binary @  неоптимизированный. png  -i https://api.tinify.com/shrink

Функции

Тот же API для изображений WebP, JPEG и PNG

API сжимает изображения WebP, JPEG и PNG. Вам нужно только загрузить исходное изображение и загрузить результат. Все остальное происходит автоматически .

Загрузить напрямую или указать URL-адрес изображения

Вы можете либо загрузить изображений напрямую, либо указать URL-адрес изображения, которое вы хотите сжать.

Преобразование изображений в WebP, JPEG или PNG

(новое)

Преобразование изображений в другой формат или запросите у API наименьший формат изображения! Изображения с прозрачным фоном можно залить указанным цветом.

Сохранить метаданные

Вы можете сохранить информацию об авторских правах , местоположение GPS и дату создания в сжатых изображениях JPEG. Для изображений PNG информация об авторских правах может быть сохранена.

Amazon S3 и Google Cloud Storage

(новый)

Вы можете указать API сохранять оптимизированные изображения непосредственно в корзинах Amazon S3 или Google Cloud Storage . При этом вы также можете установить собственные заголовки Cache-Control и Expires.

Идеальное изменение размера изображения

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

Обнаружение области интереса

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

Объяснение обнаружения области интереса

загрузите исходное изображение …… обнаружена область интереса …… изображение масштабируется и обрезается

Обнаружение вырезания изображения

(новый)

Мы добавлен новый алгоритм для обнаружения отдельно стоящих объектов на однотонном фоне. API добавит фоновое пространство или удалит лишние области при изменении соотношения сторон. Таким образом, объект на вашем изображении останется отдельно стоящим и не будет обрезан по краям при изменении размера.

Объяснение изменения размера вырезанных изображений

загрузите исходное изображение …… обнаружен отдельно стоящий объект …… применяется новый размер изображения

Цены

Вы платите только за то, что используете. Первые 500 компрессий каждый месяц бесплатны. ты будешь оплачивается только как , если вы сжимаете более 500 изображений.

Нет абонентской платы и нет минимальной платы . Плата взимается только за успешное сжатие.

Images uploaded with APIPrice per unit

First 500 images per month free
Next 9 500 image compressions $0.009 per image
After 10 000 image compressions $0.002 per image

… или просто рассчитайте свои расходы

Калькулятор цен

Сжатые изображения: 2 000

$13,50 общая стоимость

Когда вы достигнете предела сжатия, API вернет сообщение об ошибке: 9005 Ваш месячный лимит45: 9005 превысил . Обновите свою учетную запись, введя платежные данные на панели инструментов WordPress и API.

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