Как оптимизировать изображения для сайта


Как оптимизировать картинки для сайта: 4 способа

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

Первая сторона оптимизации – скорость загрузки

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

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

Хорошо, так как оптимизировать картинки прямо сейчаc? Здесь я предлагаю 2 способа:

Уменьшить размеры изображений до таких, которые необходимы для вставки в статью

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Сжать изображение. Это позволит незначительно потерять в качестве, зато вес картинки уменьшиться на 30-70%!

Размеры изображений

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

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

Многие идут еще дальше – они вставляют в текст совсем небольшие картинки – 200-300 пикселей в ширину, но при этом кликабельные. То есть в тексте отображаются только миниатюры изображений, а при клике они раскрываются в полном размере. Есть много плагинов для того же WordPress, которые позволяют это сделать. Например, Lightbox.

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

Кроме этого, такой способ кое в чем выигрывает у обычного размещения некликабельных картинок в максимальную ширину блока со статьей. Нужно понимать, что не всегда 600-800 пикселей достаточно, чтобы отчетливо показать на скриншоте какие-то настройки. Особенно это касается пошаговый инструкций, когда человек важно разглядеть каждую картинку, чтобы прийти к нужному ему результату. Так вот, при клике по миниатюре изображение откроется в полном размере, а значит, его будет отчетливо видно.

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

Сжатие картинок

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

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

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

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

Таким образом, появление картинок на web-странице может превратиться в вечность. Конечно, ситуацию нельзя оставлять так.

Пример сжатия картинки

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

Как видите, в оригинале это аж полтора мегабайта, что очень много для web-страницы. Нам для размещения в статье как раз подойдет разрешение 640 на 420. Как видим, изначально размер уже 147 килобайт, что в 10 раз меньше. Но все равно это по-прежнему достаточно немало, поэтому мы попробуем еще немного уменьшить картинку с помощью сжатия.

Ну а как, собственно, сжать фото? Тут я вижу два варианта:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Открыть картинку в фотошопе. Нажать Файл – Сохранить для Web и задать нужные настройки.

Вот так это выглядит в фотошопе:

Этот вариант мне нравится больше тем, что управлять качеством можно очень гибко. Как видите, на картинку смотреть вполне себе можно, при этом ее вес снижен до 80 килобайт. Это почти в 2 раза. Ползунок качества при этом смещен на 40. При желании вы можете ставить еше меньше.

Тут важно понимать, что все-таки внешний вид картинок немного важнее их веса. Поэтому лучше пусть она будет весить чуть больше, но выглядеть нормально, чем вы ее сожмете в 10 раз, но при взгляде на фото глаза будут просить о пощаде. 40 – это достаточно мало, но в данном случае оказалось, что картинка сохранила свой внешний вид вполне нормально.

То есть для каждого изображения нужно смотреть индивидуально, как оно будет выглядеть при сжатии и выставлять тот или иной уровень качества. Например, для скриншотов, где очень важно что-то разглядеть, лучше не выставлять качество на столь низкий уровень, как 40. Лучше установить 60-80. Также не забудьте указать правильный формат изображения – jpeg.

Как сжать png изображения

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

Таким образом удавалось добиться снижения веса png-изображений в 2-3 раза без существенных изменений в качестве.

Спрайты или как оптимизировать запросы к серверу

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

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

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

Что ж, на этом с первой стороной оптимизации мы разобрались. Переходим к следующей.

Вторая сторона оптимизации – подписи к картинкам

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

Кроме title у изображений также есть атрибут alt, который вызывает еще больше споров, чем первый атрибут. Для начала необходимо разобраться, для чего они нужны. Title – это всплывающая подсказка, которая появляется при наведении на изображение. Alt – альтернативный текст, который будет показан только в том случае, если у пользователя будет отключен показ графики.

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

Так есть ли какая-то польза от заполнения alt и title? Можно сказать, что она определенно есть, но не такая большая, как думают некоторые (заполняй alt и попадешь в топ). Подробнее о том, как заполнять эти атрибуты я писал в прошлых статьях о них.

Если кратко обобщить, то самое главное не спамить ключевыми словами. Текст должен быть длиной не более 150 символов и максимально конкретно описывать изображение. Оптимальным можно считать одинаковый title и alt. То есть просто заполняете один атрибут, копируете текст и вставляете в другой.

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

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

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

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

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

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

Готовы оптимизировать изображения?

Параметры типа файла изображения

Есть три основных типа файлов, на которых мы хотим сосредоточиться для сохранения изображений, оптимизированных для Интернета: GIF, JPG и PNG.У каждого типа файла есть свои сильные и слабые стороны, и очень важно знать и учитывать их при сохранении изображения.

Работа с JPG

JPG (также известный как JPEG) - самый популярный тип файлов для изображений в Интернете. JPG идеально подходят для фотографий или сложных изображений, содержащих много цветов, теней, градиентов или сложных узоров. JPG хорошо справляются с изображениями такого типа, потому что JPG имеют огромную цветовую палитру для работы.

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

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

Работа с PNG

PNG - еще один популярный формат файлов в Интернете. В Adobe Photoshop у вас будет возможность сохранять PNG как PNG-8 или PNG-24.

  • PNG-8 имеет очень ограниченную цветовую палитру из 256 цветов.Хотя размер изображения меньше, это не лучший вариант для сложных изображений и фотографий.
  • PNG-24 обеспечивает гораздо более высокое качество изображения, но за счет большего размера файла.

Самое главное, PNG могут обрабатывать прозрачность. Это одно из самых больших различий между PNG и JPEG.

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

Работа с гифками
GIF-файлы

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

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

Правильное сохранение изображений

Как и следовало ожидать, загрузка больших изображений занимает больше времени.Когда мы говорим «большой», мы имеем в виду размер файла, а не размеры изображения, т.е. значение в КБ, МБ, ГБ и т. Д. Видя, что 47% пользователей ожидают, что веб-страница загрузится менее чем за 2 секунды, а 40 % откажется от страницы, загрузка которой занимает более 3 секунд, важно, чтобы ваши изображения были достаточно маленькими, чтобы обеспечить быстрый сайт.

Чтобы правильно оптимизировать изображения для своего интернет-магазина, вы можете сделать три вещи:

Сохраните правильные размеры

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

Сохранить изображения для Интернета

Можно уменьшить размер файла без значительного снижения качества изображений. Наш любимый метод уменьшения размера файла без значительного снижения качества изображения - это использование функции Photoshop «Сохранить для Интернета». Откройте изображение в Photoshop и выберите «Файл»> «Экспорт»> «Сохранить для Интернета (устаревшая версия)…».Появится окно, в котором вы сможете выбрать качество экспорта. Мы обнаружили, что качество 60 работает лучше всего, поскольку при этом размер файла уменьшается до менее мегабайта, и нет заметной разницы в качестве.

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

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

Приложения и службы сжатия изображений

Сохранение изображения для Интернета: обзорный пример

Для начала давайте представим, что мы Stiff Salt (на самом деле принадлежит другу и разработчику Shopify), и мы хотели изменить изображение функции в нашем интернет-магазине.

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

Но… размер файла ОГРОМНЫЙ! 14,6 МБ, если быть точным. А размеры фото 5184 × 3456 пикселей. Сейчас это совершенно непригодно. Его буквально достаточно велико, чтобы напечатать плакат размером с фильм. При размере 14,6 МБ загрузка этого изображения на компьютер посетителя займет много времени. Это нехорошо.

Пора приступить к работе и значительно уменьшить размер изображения и размер файла.

Помните, мы собираемся сделать три вещи с изображением.

  • Уменьшить размер изображения: Это размеры фотографии
  • Правильное сохранение изображения для уменьшения размера файла: Это размер файла и сколько места он занимает на жестком диске вашего компьютера и / или веб-сервере
  • Сжать файл изображения: Чтобы избавиться от дополнительных скрытых данных, занимающих место
Уменьшить размер изображения

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

  • Уменьшите размер изображения перед сохранением
  • Уменьшить размер изображения при сохранении изображения
  • Сохраните изображение, затем уменьшите его размер

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

Чтобы выяснить, какой размер, мы рассмотрели рекомендуемый размер изображения для главной страницы темы. Это было 1600 x 800 пикселей (помните, что оригинал был 5184 x 3456 пикселей).

В Photoshop выберите «Изображение»> «Размер изображения».

.

Как оптимизировать изображения для Интернета и ускорить работу интернет-магазина

Людям нравятся быстрые сайты; поисковым системам нравятся быстрые сайты. Все в Интернете любят сайты с быстрой загрузкой.

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

Как владелец сайта электронной коммерции может легко повысить скорость своего интернет-магазина?

Оптимизируя все ваши изображения для Интернета.

Почему это важно? С чего начать и что нужно делать? Ниже вы найдете ответы на все эти вопросы.

Почему скорость сайта имеет значение, когда речь идет о вашем интернет-магазине?

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

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

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

Насколько быстрым должен быть ваш сайт?

Как можно быстрее.

Это может показаться расплывчатым, но рассмотрите эту статистику:

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

Нужно сказать больше?

Посетители веб-сайта не ждут загрузки страницы целую вечность, да и не должны.

Как узнать скорость вашего сайта?

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

Так как же ускорить работу интернет-магазина?

Одно из лучших мест для начала - это оптимизация изображений для Интернета.

Изображения занимают больше места, чем любая другая часть веб-сайта, особенно если речь идет об интернет-магазинах.

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

Это, в свою очередь, влияет на то, как долго люди остаются на вашем сайте. и , сколько из них совершают конверсию.

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

Шаг 1. Сохраните изображение в правильном формате

Два наиболее распространенных формата изображений - это Portable Network Graphics (PNG) и Joint Photographic Experts Group (JPEG или JPG).

В чем разница?

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

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

Когда следует использовать каждый формат?

В большинстве случаев лучше всего подойдет

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

Вот хорошее практическое правило: когда использовать каждый формат.

  • Когда использовать PNG:
    • Для изображений с прозрачным фоном
    • Для изображений с непрозрачностью
    • Для небольших изображений, таких как логотипы или значки
    • Для изображений с текстом на них
    • Для снимков экрана или изображений, которые не используйте много разных цветов
    • Если вы хотите сохранить качество детализированного изображения, а размер файла не имеет значения
  • Когда использовать JPEG:
    • Для изображений с большим количеством разных цветов, например фотографий и реалистичные изображения
    • Для изображений продуктов и фона

Шаг 2. Измените размер изображения

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

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

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

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

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

На этом веб-сайте WooCommerce, например, изображения продуктов отображаются с разрешением 460 x 460 пикселей.

Важно: размер файла изображения и размер изображения - это разные вещи.

Размер изображения (460 x 460 пикселей) показан на скриншоте выше.

Размер файла изображения - это размер самого файла (например, 92 461 КБ). Это объем места, необходимый для хранения изображения на вашем сервере. Чем больше размер файла, тем больше времени требуется для загрузки изображения.

Вы хотите убедиться, что размер большинства изображений на ваших веб-сайтах не превышает 150 КБ, но желательно менее 100 КБ - в зависимости от назначения этого изображения

Как узнать, какой размер изображения нужен?

Если вы используете Google Chrome, вы можете использовать инструмент Inspector, который поможет вам определить размер пространства для вашего изображения.

Перейдите на свой сайт и щелкните правой кнопкой мыши область, ширину которой вы хотите исследовать. Затем нажмите «Проверить».

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

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

Откройте инструмент инспектора, чтобы определить место для вашего изображения. В приведенном ниже примере размер области, которую будет занимать ваше изображение, составляет 1080 пикселей в ширину.Теперь вы знаете, что для предотвращения загрузки в веб-браузере двух изображений разного размера (как упоминалось выше) вам необходимо изменить размер изображения до 1080 пикселей в ширину или меньше .

Шаг 3. Сохраните изображение для Интернета

В большинстве программ для редактирования изображений есть опция «сохранить для Интернета», которая помогает настроить размер файла изображения.

Чтобы «Сохранить для Интернета» в Photoshop, выберите «Файл»> «Экспорт»> «Сохранить для Интернета» в строке меню в верхней части экрана.

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

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

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

Стрелки на этом снимке экрана указывают на размер файла изображения. Обратите внимание: чем ниже качество, тем меньше становится размер файла.

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

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

Шаг 4. Прогон изображения через компрессор

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

Это уменьшает размер файла изображения, не влияя на его качество.

Вы можете использовать плагин WordPress, такой как Smush Image Compression and Optimizer или EWWW Image Optimizer для массового сжатия или автоматического сжатия изображений при их загрузке на свой веб-сайт.

Если у вас Mac, скачайте бесплатно ImageOptim - очень простое приложение для перетаскивания. . Вы также можете воспользоваться бесплатными онлайн-компрессорами изображений, такими как TinyPNG или Kraken.

Нет времени на выполнение всех этих шагов?

Есть еще один вариант: использовать бесплатную сеть доставки контента Jetpack.

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

Легко настроить с помощью установки одним щелчком мыши и предоставляет дополнительные преимущества, такие как ускорение доставки файлов CSS и Javascript.

Для настройки:

  1. Установите бесплатный плагин Jetpack, если вы еще не используете его.
  2. Перейдите в Jetpack> Настройки> Производительность на панели инструментов.
  3. Прокрутите до раздела Performance & Speed ​​ и установите переключатель Enable Site Accelerator .

Готово! Функции ускорения изображения применяются как к существующим, так и к новым изображениям, поэтому вы сразу заметите увеличение скорости.

Вы также можете воспользоваться функцией Lazy Images в Jetpack.Ленивые изображения загружают только изображения, видимые на странице для посетителей сайта, задерживая загрузку закадровых изображений до тех пор, пока пользователь не прокрутит вниз. Это особенно полезно на мобильных устройствах, где пропускная способность является проблемой. Для активации:

  1. Перейдите в Jetpack> Настройки> Производительность .
  2. Прокрутите до раздела Производительность и скорость .
  3. Переключить Ленивая загрузка изображений.

Заключение

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

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

Нравится:

Нравится Загрузка ...

.

Как оптимизировать изображения для веб-сайтов и блогов

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

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

1. Размеры файлов

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

Самый простой способ избежать слишком больших изображений - убедиться, что при редактировании фотографий вы выбрали «Сохранить для Интернета.Вы можете сделать это с помощью быстрого сочетания клавиш - command + option + shift + s - в Photoshop, которое откроет новое окно с несколькими различными параметрами веб-оптимизации. Вы можете отформатировать свой файл (о чем мы поговорим ниже), настроить качество изображения (в правом верхнем углу диалогового окна) и установить размер файла (в правом нижнем углу).

Розовые фламинго на закате, автор - Анна Омельченко

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

Close Up Shih Tzu Dog by chaoss

Знание параметров вашей веб-страницы является ключевым моментом, так что вы всегда можете настроить изображение до нужного размера.Например, если на вашем сайте есть столбцы шириной 800 пикселей, вам нужно настроить изображения, чтобы они также были шириной 800 пикселей. Высота изображения не имеет большого значения, если вы не собираетесь использовать изображения определенной формы. Также важно следить за количеством килобайт в изображении, которое можно просмотреть в левом углу окна «Сохранить для Интернета». Хорошее практическое правило состоит в том, что небольшое количество килобайт означает более быструю загрузку. Но вам все равно нужно внести соответствующие изменения, и вам не придется жертвовать качеством фотографий ради времени загрузки.Менее 300К обычно безопасно.

2. Форматирование файлов изображений

Изображения бывают всех форм и размеров, и важно убедиться, что они имеют соответствующую маркировку для их конечного назначения. Существует три стандартных типа файлов изображений, с которыми вы, скорее всего, будете работать: JPEG, PNG и GIF. Каждый тип файла обладает уникальными качествами, которые делают его подходящим для конкретных сценариев: JPEG наиболее подходит для сжатия цифровых фотографий, а GIF обычно используется для видеоклипов с низким разрешением, анимированных изображений и логотипов с ограниченной цветовой палитрой.PNG широко используются в Интернете, поскольку они поддерживают изображения на основе палитры, оттенки серого и изображения RGB.

Котенок дома в солнечный день, Максим Ширков

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

3.Не делайте миниатюрные изображения разрешенными

Черника крупным планом от bozulek Человеческий глаз, Макро Анемона Свежий мед в сотах от StudioSmart Черно-белые зебры от Шанталь де Брюйн

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

4. Именование изображений

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

В центре Тосканы от JaroPienza

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

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

Хотите найти изображения для оптимизации для Интернета? В нашем отчете «Тенденции творчества за 2015 год» представлено более десятка тщательно отобранных коллекций, в том числе несколько, посвященных тому, что популярно в социальных сетях и Интернете. Посмотреть »

Верхнее изображение: Летающие мыльные пузыри с отраженными домами от bonzodog

Создаете мощный мультимедийный веб-сайт? Узнайте еще больше о сжатии изображений.

.

Как оптимизировать изображения для Интернета

Стратегия успешного поиска

Эта статья была первоначально опубликована 5 сентября 2013 г. и обновлена ​​18 октября 2019 г.

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

Руководство по оптимизации изображений

В этом руководстве вы найдете все, что вам нужно знать об оптимизации изображений для Интернета, в том числе о том, как оптимизировать изображения для SEO:

Приступим!

Почему изображения имеют значение

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

Но сначала важно полностью понять, почему вам нужны изображения на своем веб-сайте.

Изображения усиливают контент

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

Подумайте, сколько времени нужно, чтобы прочитать короткий, насыщенный абзац. Не долго, правда? Однако изображения могут быть обработаны за 13 миллисекунд - в 60 000 раз быстрее, чем один текст.

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

Изображения улучшают удержание контента

Хотя инфографика может создать виральность вашего бренда, простая фотография в правильном контексте может значительно улучшить понимание аудитории.

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

Точно так же электронные информационные бюллетени с визуальными элементами получают больше кликов и вовлеченности.Изображения также увеличивают время пребывания на странице.

Изображения передают идентичность вашего бренда

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

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

Эта способность ассоциироваться с брендом без использования текста невероятно сильна.

Связано: Как заявить о себе в социальных сетях

Изображения привлекают трафик на ваш сайт

Поисковые запросы по изображениям составляют 27% всех запросов, созданных в 10 самых популярных поисковых системах США. Таким образом, количество посещений веб-сайтов в результате поиска изображений значительно увеличилось после того, как Google изменил свою кнопку «Просмотр изображения» с «Поиск изображений» на «Посетить [Страница]».

Изображения делают ваш сайт более привлекательным

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

В начало

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

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

В начало

7 шагов по оптимизации изображений для Интернета

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

Давайте изменим это с помощью следующих семи шагов:

  1. Выберите правильные изображения.
  2. Внимательно рассмотрите текст, связанный с вашими изображениями.
  3. Отрегулируйте размер и формат изображения.
  4. Учитывайте отложенную загрузку.
  5. Включить кеширование браузера.
  6. Не забывайте метаданные изображения.
  7. Создайте карту сайта для изображений.

1. Выберите нужные изображения

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

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

Не добавляйте изображения в сообщение ради изображений.

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

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

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

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

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

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

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

Связано: Рекомендации по использованию изображений на страницах товаров электронной коммерции

Stock Photo - это вариант

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

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

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

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

По теме: 8 разных способов использовать стоковую фотографию

Перед фактами

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

Безусловно, существует множество ситуаций, когда использование изображений лиц людей просто не работает. Но когда есть возможность - делайте.

В начало

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

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

Не поддавайтесь искушению пропустить ввод этих текстовых деталей.

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

Имейте в виду, что хотя WordPress является одной из популярных систем управления контентом для веб-сайтов, варианты, которые мы здесь обсудим, обычно применимы ко многим различным инструментам для создания веб-сайтов.

Имея это в виду, давайте разберемся во всем.

Название изображения

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

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

Имя файла также должно включать ключевые слова, по которым изображение может ранжироваться в поиске Google, без стоп-слов.Разделите ключевые слова дефисами, а не подчеркиванием, поскольку поисковые системы их не распознают.

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

Альтернативный текст изображения

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

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

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

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

По теме: Как провести SEO-исследование ключевых слов для привлечения трафика на ваш сайт

Подпись к изображению

Подписи - это описательный текст под изображением, который виден всем пользователям.

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

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

Описание изображения

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

В начало

3. Отрегулируйте размер и формат изображения

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

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

Измените размер изображений

Средний веб-сайт содержит около 1.8 МБ изображений, что составляет 60% от размера сайта. Хотя важно размещать на своем веб-сайте высококачественные фотографии с высоким разрешением, они часто могут привести к снижению скорости загрузки страницы.

Это особенно верно, когда изображения не оптимизированы для просмотра в Интернете.

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

Когда дело доходит до онлайн-доступа, скорость - почти все.

Например, Amazon выяснила, что задержка загрузки сайта в одну секунду может стоить им 1,6 миллиарда долларов годового дохода.

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

Здесь важно отметить, что размер изображения и размер файла - это разные вещи.

Размер изображения - это размер изображения (например, 1024 x 680 пикселей), а размер файла - это объем места, необходимый для его хранения на сервере (например, 350 КБ).

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

Связано: 10 лучших практик редактирования изображений

Выберите правильные типы файлов изображений

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

Наиболее распространенными типами файлов веб-изображений являются JPEG, GIF и PNG.

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

JPEG

Joint Photographic Experts Group - более известная как JPG / JPEG - является одним из старейших типов файлов.

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

GIF

Graphics Interchange Format, GIF, прославившийся благодаря анимированным файлам растровой графики, важен не только для вязания гномами воздушных шаров с сердечками и других глупостей.

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

PNG

Portable Network Graphics, PNG, поддерживается большинством браузеров, имеет меньший размер файла и большее количество цветов, чем GIF, и его цвета не так легко ухудшаются, как JPEG. Однако прозрачные изображения PNG вызывают ошибку при использовании в Internet Explorer, поэтому лучше использовать формат PNG, когда вы не имеете дело с прозрачными изображениями.

Выберите правильную степень сжатия

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

Если вы сжимаете изображение слишком сильно, вы уменьшаете не только размер файла, но и качество.

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

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

  • Imageoptim: 69% (JPEG) против 40% (PNG)
  • Shortpixel: 42% (JPEG) против 59% (PNG)
  • Kraken.io: 13% (JPEG) против 63% (PNG)
  • TinyPNG: 27% (JPEG) против 65% (PNG)
  • Optimizilla: 27 (JPEG) против 60% (PNG)
  • Imagify.io: 6% (JPEG) против 1% (PNG)
  • Compressor.io: 42% (JPEG) против 58% (PNG)

Интересно отметить, что хотя Imageoptim подходил для JPEG, он был ужасен для PNG.Итак, в целом Shortpixel - ваш лучший выбор. Вы также можете сжимать изображения с помощью плагина, такого как Smush, или инструмента оптимизации изображений, такого как Pixlr (JPEG) или GIMP.

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

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

Связано: 5 важных приемов Photoshop для начинающих

Другие советы по работе с файлами изображений большого размера

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

Еще один совет - создавайте адаптивные изображения. Такие изображения будут увеличиваться или уменьшаться в зависимости от размера браузера и используемого устройства. Это помогает как в скорости сайта, так и в SEO.

В начало

4. Рассмотрите ленивую загрузку

Ленивая загрузка - это когда браузер откладывает загрузку изображений до тех пор, пока они не появятся на экране. Это означает, что изображения в нижней части веб-сайта (в нижней части страницы) не загружаются, пока пользователь не перейдет в эту часть веб-сайта.

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

Хотя до сих пор ведутся споры о влиянии отложенной загрузки на поисковую оптимизацию, инструмент Google PageSpeed ​​Insights рекомендует это делать, а Google отвечает за всю игру.

Есть несколько способов реализовать отложенную загрузку. Однако большинство из них требует ручного кодирования. Тем не менее, если вы используете WordPress, команда Ahrefs настоятельно рекомендует плагин A3 Lazy Load.

Изображение: Плагин A3 для отложенной загрузки

К началу

5.Включить кеширование браузера

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

Вы также можете включить кеширование браузера вручную, добавив этот код в свой файл .htaccess:

  ExpiresActive On # Изображений ExpiresByType image / jpg «доступ на 1 год» ExpiresByType image / jpeg "доступ на 1 год" ExpiresByType image / gif "доступ на 1 год" ExpiresByType image / png "доступ на 1 год"  

Измените «1 год» в коде на любой временной интервал, который кажется подходящим для ваших нужд (спросите себя, как часто вы обновляете контент), например «1 месяц» или «1 неделя».”

В начало

Метаданные - это любая вспомогательная информация, хранящаяся в файле, в том числе время создания или последнего редактирования файла.

Метаданные могут составлять до 15% от общего размера изображения JPEG.

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

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

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

Для создания таких структурированных данных лучше всего следовать рекомендациям Google по структурированным данным.

Связано: структурированные данные - кто, что и почему использует схему

В начало

7.Создать карту сайта изображения

Карта сайта важна, потому что она сообщает поисковым системам обо всех страницах вашего сайта.

Google позволяет файлам Sitemap для изображений содержать URL-адреса из других доменов, в отличие от обычных карт сайта, в которых применяются междоменные ограничения. Это означает, что вы можете использовать сети доставки контента для размещения изображений, которые могут повысить производительность вашего сайта.

Хорошие новости: создание карты сайта для изображений - это не то, что вам нужно делать вручную.

Если вы используете WordPress, вы можете использовать плагин Yoast SEO для автоматического добавления вашего контента - включая фотографии, видео, миниатюры и сообщения - в карту сайта.К сожалению, Yoast не включает в карту сайта какие-либо подписи к вашим изображениям. Вы можете добавить их на свой сайт вручную, используя следующие коды:

Изображение: Изображение Sitemap Справка консоли поиска

По теме: 12 лучших инструментов SEO, которые помогут вашему сайту отображаться в результатах поиска

В начало

Заключение и следующие шаги

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

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

Если вы чувствуете себя увязшим в оптимизации изображений для SEO, GoDaddy SEO Services поможет вам.Свяжитесь с SEO-экспертами GoDaddy сегодня, чтобы узнать, чем они могут помочь!

Эта статья включает материалы, изначально опубликованные в блоге GoDaddy следующими авторами: Кристофером Эмблером, Женевьев Туэндж и Томом Эвером.

.

Смотрите также

Поделиться в соц. сетях

Опубликовать в Facebook
Опубликовать в Одноклассники
Вы можете оставить комментарий, или ссылку на Ваш сайт.

Оставить комментарий