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

Улучшаем конверсию и поведенческие факторы на сайте за 2 минуты.

Текст от нашего партнера — OptiPic.

Ускорение сайта улучшает поведенческие факторы и поднимает конверсию. Для примера — график зависимости конверсии от времени загрузки, который основан на исследовании Walmart:

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

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

Страница сайта обычно состоит из:

• HTML-кода: разметка, верстка, тексты;
• JavaScript-скриптов с логикой, которая будет выполняться на стороне браузера;
• CSS-файлов со стилями страницы;
• видео;
• изображений.

Если посмотреть в среднем картину в разрезе и сравнить объем в байтах всех этих типов ресурсов на странице, то можно увидеть,что изображения на страницах — это самая большая часть:

Оптимизация изображений позволяет значительно ускорить загрузку сайта. Сжатие уменьшает объем изображений на 70-98% без визуальной потери качества:

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

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

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

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

В результате оптимизации изображений вы получите

• Ускорение загрузки страниц;
• Увеличение конверсии;
• Увеличение показателей Google Pagespeed Insights;
• Снижение отказов, улучшение поведенческих факторов на сайте;
• Улучшенное ранжирование сайта в поисковой выдаче;
• Снижение нагрузки на хостинг/сервер;
• Экономию места на диске.

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

Первый способ — вручную оптимизировать каждое изображение на сайте. Для этого можно использовать Photoshop или другой инструмент. Обычно при сохранении изображения в редакторе есть пункт «сохранить для web».

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

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

Дешевле и быстрее — автоматизировать процесс

Сервис OptiPic.io специально предназначен для решения этой проблемы.
Буквально за 2 минуты вы сможете подключить свой сайт к системе, которая просканирует весь сайт, найдет и оптимизирует все найденные изображения.

Оптимизация всех изображений на сайте проходит в на полном автопилоте в фоновом режиме. Сервис сам находит на сайте все изображения и оптимизирует их.

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

OptiPic легко подключается к любому сайту практически в 2 клика.
Поддерживаются все CMS и фреймворки, а также самописные сайты на PHP.

Преимущества OptiPic

• Полная автоматизация.
  Оптимизируются не только уже существующие на сайте изображения, но и добавляемые в дальнейшем новые. Сервис работает сам по себе в фоновом режиме;
• URL изображений не меняется. Сжатые изображения хранятся на вашем сайте;
• Простая интеграция с любым сайтом на PHP — даже самописным;
• Русская техподдержка;
• Система не имеет каких-либо ограничений на объем или размер изображений;
• Работает на обычных хостингах, не требуется vps или выделенного сервера;
• Не требуются навыки системного администрирования и программирования для установки и использования;
• Бесплатная помощь в подключении;
• Без ежемесячных платежей.

Оценить эффективность оптимизации можно на сайте OptiPic.io. Это бесплатно и не требует регистрации.

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

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

Какая из этих картинок привлекает больше внимания?

Больше всего лайков собрала статья с первой картинкой.

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

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

Для чего нужны изображения

Давайте сначала определимся, что дают нам изображения:

1. Помогают продвижению сайта
2. При первом посещении страниц помогают понять тематику сайта и создать соответствующее настроение.
3. Привлекают внимание к товарам или услугам, вызывают желание заказать.
4. Становятся элементами навигации и помогают ориентироваться на сайте.
5. Располагают к чтению текстов и облегчают их восприятие, так как позволяют разбавить длинные описания.
6. Повышают доверие
   к компании и бренду, если речь идет о фотографиях офиса, процесса работы, сотрудников.
7. Развлекают, особенно, если содержат юмор.

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

На каких страницах картинки необходимы

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

1. Главная страница

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

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

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

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

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

Каждый слайд должен кратко отражать суть предложения и вести на соответствующую страницу.

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

Хороший пример: простой и понятный слайд на сайте Зоомагазина

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

Картинки должны быть небольшого размера и полностью кликабельными.

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

Пример хорошо подобранных изображений для списка услуг:

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

Текст не должен быть длинным (рекомендуемый объём 1500-2000 символов), поэтому нет смысла «разделять» его изображениями.

Иконки следует выбирать в едином стиле и одного размера, тогда информация будет выглядеть аккуратно:

2. Страница о компании

Страница является продолжением Главной и закрепляет впечатление о компании.

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

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

Пример фотографии процесса работы:

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

Если компания большая, то покажите хотя бы основные лица компании:

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

3. Страницы товаров

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

Покажите товар с разных ракурсов (не более 10 штук, не менее трех), чтобы пользователи смогли рассмотреть его с разных сторон. Так клиент быстрее примет решение о заказе.

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

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

И хороший пример того, как подробно показать товар

4. Портфолио

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

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

Хороший вариант деления работ: можно отфильтровать проекты по виду дизайна:

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

Пример, как делать не нужно:

5. Блог

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

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

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

Пример непривлекательного раздела статей:

С изображениями анонсы выглядят ярче:

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

Фрагмент статьи с правильным использованием изображений:

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

Правила общие для всех страниц, некоторые из них уже указаны выше, а также в статье «Добавляем картинки и видео на сайт: на что обратить внимание?» – прочитайте обязательно, но повторим их для закрепления информации.

Изображения должны:

1. Соответствовать тематике и аудитории сайта, а также тексту рядом. Не путайте пользователей.
2. Быть качественными. Фотографии с потерей резкости, мутные и содержащие «шум» только испортят впечатление о сайте и помешают клиенту выбрать товар.
3. Быть реальными. Изображения из фотобанков кочуют с сайта на сайт, и пользователи уже легко узнают их и не верят им. Для статьи в блоге, конечно же, можно взять шаблонную картинку, но ни в коем случае не добавляйте ее на страницу о компании или в портфолио, и уж тем более для карточки товара.
4. Быть без водяных знаков. Они не спасают от копирования и только портят изображения. Как уберечь фото и видео от копирования, читайте здесь.
5. Быть в едином стиле. Понимаем, что для всего сайта сложно выполнить данное условие, но хотя бы для одной страницы они должны быть похожими: одинаковой ширины и выровнены по одной линии.
6. Иметь небольшой вес, то есть быть размером не более 80-100 килобайт, чтобы не увеличивать время загрузки сайта. Исключение составляют увеличенные версии изображения, которые могут быть тяжелее.
7. Быть в формате GIF, PNG или JPEG. Не рекомендуем использовать форматы BMP и TIFF, чтобы не было проблем с корректной загрузкой контента.

В дополнение к правилам рекомендуем посмотреть статью «На что люди обращают внимание при просмотре сайта».

Где брать изображения для сайта?

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

1. Услуги фотографа

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

2. Фото производителей

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

3. Фотостоки и фотобанки

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

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

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

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

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

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

Примеры плохих названий:

• Kniga065745932.png — непонятные цифры
• IMG85416.jpg — неинформативный вариант
• kupit-sumka-nedorogo-gucci.jpg — спам

Хорошие варианты:

• kurtka-reebok-belaja-front.jpg
• kartina-mone-soroka.jpg

Атрибут alt

При размещении изображений в коде каждой картинки указывайте атрибут alt тега <img>, в нем кратко описывайте, что изображено на картинке. Текст должен быть уникальным и содержать ключевые слова.

Атрибут alt нужен поисковым системам и пользователям, у которых по каким-либо причинам не отобразилось картинка (на ее месте будет отображаться указанный текст).

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

Неудачные примеры alt:

• alt=»туфли pollini белые, черные, красные, фото, цена, отзывы» — снова спам
• alt=»блузка» — мало информации
• alt=»78823094093″ — неинформативный вариант

Правильное заполнение alt:

• alt=»кеды adidas зеленые»
• alt=»Сальвадор Дали Пейзаж близ Алепурдана»

Индексация

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

Заключение

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

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

Здравствуйте, дорогие друзья. Сегодня я расскажу как оптимизировать изображения для ускорения загрузки сайта. Но, для начала расскажу, почему ни писал почти неделю. Эту неделю я боролся с бюрократией, пытался получить новый загранпаспорт. Вы просто не представляете, что сейчас творится в паспортных столах, — это просто кошмар (очереди, давка, скандалы). Ещё хуже, чем обычно. Всё очень медленно. У меня такое ощущение, что в первый раз я получил паспорт гораздо проще и быстрей.

В общем, «плюнул» я на это. Зашёл на просторы Интернета, зарегистрировался на портале госуслуг и оформил получение данной услуги, без очередей и траты драгоценного времени.

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

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

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

Где узнать о причинах медленной загрузки сайта

Сервисов для проверки скорости загрузки сайта – много. Но мы поговорим о сервисах, которые показывают причины медленной загрузки.

Я использую два сервиса:

PageSpeedInsights – сервис от Google, по 100 бальной шкале показывает показатель скорости загрузки сайта для мобильных устройств и компьютеров. И даёт рекомендации по устранению причин медленной загрузки. Плюс данного сервиса – русский язык и хорошая справка. Минус – нет готовых решений.

PageSpeed

GTmetrix – этот сервис аналогичен Гугловскому, также проводит анализ сайта и выдаёт причины снижающие скорость загрузки сайта. Показатель скорости загрузки выражается в зарубежной системе оценки (где, А – высшая оценка). Плюс сервиса – наличие готовых решений (не на все причины конечно). Минус – отсутствие русского языка (хотя это сомнительный минус).

GTmetrix

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

Зачем нужна оптимизация изображения

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

К вопросу о том, что такое оптимизация изображения и как её делать? Скажу по-простому, — под оптимизацией изображения подразумевается уменьшение размера без потери качества. Только не надо путать размер (вес) файла с шириной и высотой в точках. Так же к оптимизации относится указание размеров изображения в HTML и CSS коде, и некоторые другие премудрости.

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

У кого есть Photoshop – можно делать с помощью этого графического редактора. Я именно так и делаю. Создал сценарий и одной кнопкой оптимизирую скриншоты к статьям.

Photoshop

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

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

Compressor.io – наилучший результат сжатия (среди многих сервисов протестированных мной).

SiteReportCard – есть удобная возможность выбрать один из результатов оптимизации.

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

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

JPEG Optimizer – данный сервис лучше всех справляется с изображениями в формате JPEG.

В общем как видите инструментов достаточно и все хороши по-своему.

Массовая оптимизация изображений

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

Kraken.io – через этот сервис Вы можете оптимизировать сразу несколько изображений. Максимальный размер одного файла или суммарный вес всех изображений не должны превышать 10Мб. Вы можете за один раз оптимизировать несколько десятков, а то и сотню изображений. А ещё здесь есть возможность, скачать оптимизированные изображения в один клик, zip-архивом.

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

Krakin

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

Если у Вас блог на платформе WordPress, то изображения будут храниться в

http://vashdomen/wp-content/uploads

и

http://vashdomen/wp-content/themes/vashtema/images

Это чаще всего, хотя могут быть и исключения.

Как узнать какое изображение тормозить загрузку сайта и оптимизировать его

Вот тут то и понадобится сервис GTmetrix. Проведя анализ сайта, нужно перейти в раздел «Optimizeimages». Здесь будут представлены все изображения требующие оптимизации и более того – уже готовый оптимизированный вариант изображения.

Параметры оптимизации изображения

Нужно только скачать его и загрузить по указанному пути.

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

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

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

Если после анализа сайта вы видите низкий показатель «Serve scaled images»,

Не соответствие размеров

следовательно, оригинальный размер изображения изменён в HTML или CSS. Вот вам пример: на предыдущем скриншоте видно, что оригинал указанного мной изображения 300х300, а в исходном коде это изображение уменьшено до 200х200 пикселей.

Размеры в коде

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

Для начала скачиваете изображение к себе на компьютер, редактируете, и закачивает обратно по тому же адресу. В WodrPress дальше делать ничего не надо. А вот если это самописная страница, не забудьте в HTML коде указать нужные параметры ширины (width=»200″) и высоты (height=»200″). Отсутствие этих параметров влияет на скорость загрузки сайта, о чём свидетельствует параметр «Specify image dimensions» при анализе сайта в GTmetrix.

Сведения о размерах изображения

Как видно на скриншоте в моей теме не хватает параметров (16х16, 32х32) для иконок комментариев, категорий, даты и так далее.

Как указать параметры ширины и высоты изображения в теме WordPress

Итак, разберём мой пример. В моей теме не указаны размеры вот этих изображений:

Изображения без указания размера

Значит нужно найти в шаблоне место, где выводятся эти изображения. А выводятся они на главной странице и на странице материала. За главную страницу отвечает файл (index.php), а за материал отвечает файл (single.php).

Так вот отрываем административную панель WordPress– «Внешний вид» > «Редактор» — нужный файл. И добавляем параметры ширины и высоты, на основе предложенных размеров в отчёте GTmetrix.

Вставка параметров размера

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

А ещё скорей всего у вас в отчёте будет низкий показатель по параметру «Combine images using CSS sprites». Это параметр сообщает, что на сайте есть одинаковые изображения, которые можно объединить в спрайты для ускорения загрузки сайта. Но в двух словах этого не рассказать. Поэтому об этом поговорим в следующих статьях. А пока у вас есть над чем работать.

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

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

До встречи в следующих статьях.

С уважением, Максим Зайцев.

10 советов по оптимизации изображений для сайта

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

Задавались ли вы когда-нибудь такими вопросами:

• Почему во время поиска изображений в Googlе я не вижу картинок со своего сайта?
• Нужно ли добавлять альт теги к изображениям?
• В чём разница между JPEG, GIF, PNG форматами и какой из них лучше выбрать?

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

1. Присваивайте изображениям описательные названия, используя простые понятные слова

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

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

Для примера воспользуемся вот этой фотографией:

Можно оставить название, которое автоматически сгенерировала камера, например DCMIMAGE10.jpg. Однако намного разумнее будет назвать файл 2012-Ford-Mustang-LX-Red.jpg

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

• 2012 Red Ford Mustang LX
• Ford Mustang LX Red 2012
• Red Ford Mustang LX 2012

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

Если вам лень заниматься столь скрупулёзным трудом, то хотя бы приучите себя включать в названия ключевые слова (и постарайтесь, чтобы названия были описательными!)

2. Оптимизируйте альт теги с умом

Альт теги (alt tags) это текстовые альтернативы изображениям, необходимые в случаях, когда браузер не способен отобразить фотографию. Но даже если фотография отображается как следует, вы можете навести на неё курсор и увидеть альт теговый текст этого изображения (зависит от настроек браузера).

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

Давайте взглянем на исходный код альт тегов:

Задача первостепенной важности: заполнить альт теги для каждого изображения товара на вашем сайте.

Вот несколько правил касательно альт тегов:

• Описания приводите на понятном английском языке (латинскими буквами, если на русском), как и в случае с изображениями.
• Если вы реализуете товары, имеющие номера моделей, их также следует вводить в альт теги.
• Не вводите ненужных слов (например: alt = ”форд мустанг мощный автомобиль купить сейчас самые низкие цены продажа со скидкой”)
• Не используйте альт теги в изображениях, которые используете для украшения сайта. Поисковые механизмы могут отреагировать на такое действие резким понижением приоритета всех изображений без исключения.

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

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

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

• Интерьер авто
• Заднюю часть машины, особенно этот прекрасный спойлер
• Снимок дисков крупным планом
• Снимок того, что под капотом — это же Мустанг!

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

• 2012-Ford-Mustang-LX-Red-Leather-Interior-Trim.jpg -> где тегом будет: alt = ” 2012 Ford Mustang LX Red Leather Interior Trim “
• 2012-Ford-Mustang-LX-Red-Rear-View-Air-Spoiler.jpg -> с тегом: alt = ” 2012 Ford Mustang LX Red Rear View Air Spoiler “

Главное здесь — сделать теги описательными, дабы привлечь потенциальных покупателей на сайт: за это немалый кусок работы Google вознаградит вас клиентами.

Крупные изображения

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

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

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

4. Стремитесь к максимально меньшему размеру изображения

Задумайтесь:

• Большинство потребителей ждут загрузки сайта с компьютера или планшета около трёх секунд.
• …и около пяти секунд для загрузки страницы с телефона.
• Сотрудники Amazon подсчитали, что если скорость загрузки страницы увеличить на 1 секунду, компания теряет 1.6 миллиардов долларов в год.
• В поисковых алгоритмах Google также используется время загрузки страницы.

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

И что делать?

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

Если вы можете уменьшить размер файла, это прямым образом увеличит скорость загрузки страницы, что в свою очередь сохранит для вас посетителей. Если вы пользуетесь Photoshop, то можете воспользоваться опцией “Save for Web” (Сохранение для использования в сети). Данная команда позволит сохранить изображение, максимально уменьшая его размер без потери качества.

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

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

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

Что, если у меня нет Photoshop?

Если данной программы у вас нет — не беда. В интернете найдётся достаточно онлайн-редакторов, позволяющих работать с изображениями. Adobe даже выпустила онлайн приложение photoshop.com. Данная программа не обладает всеми функциями обычного Photoshop, однако там есть все базовые инструменты для работы с изображениями и за её использование вам не придётся отдавать баснословные суммы.

Вот ещё несколько удобных онлайн-редакторов:

• PicMonkey — эксперты описывают его как «просто потрясающий редактор»
• Pixlr — очень удобный редактор, к которому также абсолютно бесплатно прилагается приложение на смартфон, так что работать можно хоть на ходу
• FotoFlexer — ещё один довольно продвинутый онлайн-редактор, который позволяет работать даже со слоями

И, наконец, всегда есть GIMP. GIMP — общедоступная, бесплатная программа, работающая на Windоws, Mac и Linux. Приложение может всё то же, что и Photoshop, однако не столь удобно в использовании. Но среди бесплатных приложений найти что-либо лучше, чем GIMP, просто невозможно.

Сколько должны «весить» изображения?

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

5. Запомните, какой формат использовать, и в каких случаях

Существуют три основных типа файлов, в которых сохраняются изображения: JPEG, GIF и PNG.

Рассмотрим все три на примере одного и того же изображения и сравним разницу.

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

GIF (.gif) не могут обеспечить столь высокое качество, как у JPEG, а потому используются для более простых изображений, таких как иконки или картинки декоративного эффекта. Также GIF поддерживают анимацию, о чём наверняка знает каждый пользователь Reddit.

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

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

Однако обратите внимание, что изображение PNG-24 «весит» в три раза больше, чем версия PNG-8. Так что будьте внимательны, когда работаете с этим форматом.

Как видите, JPEG тут бесспорный победитель. При подгонке изображения под один и тот же размер, качество у GIF и PGN существенно снижается.

А вот несколько рекомендаций по использованию разных форматов:

• В электронной торговле для большинства случаев лучшим выбором будет JPEG. Этот формат обеспечит наилучшее качество при наименьшем размере файлов.
• Никогда не используйте GIF в больших изображениях товаров. Файлы данного формата весьма крупные по размерам и эффективного способа уменьшить их не существует. Используйте GIF для миниатюр, пиктограмм и декоративных изображений.
• PNG является хорошей альтернативой как JPEG, так и GIF. Если у вас нет иной возможности получить фотографии товара кроме как в PNG формате, попробуйте использовать PNG-8, а не PNG-24. PNG идеально подходит для декоративных изображений ввиду исключительно малых размеров последних.

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

6. Запомните, как надо обращаться с миниатюрами

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

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

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

7. Используйте визуальные карты сайта

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

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

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

Использовать карты сайта пусть и не даёт гарантии того, что Google проиндексирует ваши изображения, однако это значительно оптимизирует работу сайта. В Google Webmaster Tools содержится множество советов для правильного составления карты сайта и грамотного выбора изображений для неё.

При работе с Google Sitemaps важно присваивать изображениям специальные теги. Также можно сделать отдельную карту сайта непосредственно для самих изображений. Главное в этом процессе — указывать в тегах всю необходимую информацию, как в существующих картах, так и в последующих. При работе над созданием карты сайта с описанием изображений, пользуйтесь вот этими рекомендациями.

8. С осторожностью используйте на сайте декоративные элементы

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

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

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

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

• Изображения, выступающие в качестве границ или узоров, переведите в формат PNG-8 или GIF. Можно создать отличные изображения всего в несколько сотен байт величиной.
• По возможности для создания цветных зон используйте каскадные таблицы стилей (CSS). Всё, что можно заменить на CSS — заменяйте.
• Обратите внимание на фоновые обои. Нередко случается так, что их размер неоправданно велик. Уменьшите размер, следя за тем, чтобы не испортить качество.

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

9. С осторожностью используйте сети передачи данных (CDN)

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

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

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

 Исходя из этого вот ещё несколько золотых правил:

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

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

10. Проверяйте изображения

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

• Проверьте количество изображений товаров на одну страницу: поскольку для сайтов, занимающихся электронной коммерцией, время загрузки играет ключевую роль, логично предположить, что чем меньше изображений на странице, тем активнее клиенты будут листать страницы и тем больше покупок будет совершено. Но также возможно и обратное: увеличение количества изображений сделает просмотр сайта более интересным, что, опять же, приведёт к большему числу покупок. Единственный способ найти правильное решение — проверить оба варианта.
• Какие ракурсы товаров клиенты предпочитают больше: вам наверняка будет приятно видеть, насколько дружелюбнее становятся покупатели, когда у них есть возможность обозревать товары с того ракурса, с которого они хотят его (товар) видеть. Надежней всего выяснить предпочтения посетителей — устроить опрос мнений: ЧТО во время просмотра изображений привлекает их больше всего. Устраивать опросы клиентов время от времени — ещё одна полезная привычка, которой стоит обзавестись.
• Определите, сколько товаров стоит размещать на одной странице конкретной категории товаров: 10, 20, а может 100? Попробуйте разные варианты и выясните, какой нравится клиентам больше всего.

(справа сверху – вниз налево)

Источник

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

Для того, чтобы ваш сайт посещало большое количество человек, уверен на 100%, что вы пишите классные и большие посты.

Затачиваете их под НЧ и СЧ запросы, покупаете внешние ссылки, одним слово применяете стандартные правила SEO.

А знакомо вам такое понятие, как оптимизация изображений, насколько грамотно вы делаете ее на своем блоге (применяете ли оптимизацию картинок для сайта в целом).

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

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

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

Что я делал с картинками на сайте не правильно? ВСЕ! Такого понятия, как seo оптимизация, я знать никогда не знал и если бы не случай, никогда и не узнал.

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

Зачастую имена имели якобы оптимизированные картинки: 3456.png или as12.jpg. Интересно, какое ключевое слово они в себе несли с таким названием?

Поля «ALT» и «TITLE», которые можно было заполнить при добавлении очередной картинки на сайт, так и оставались полями, которые можно было заполнить.

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

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

Для чего нужна оптимизация картинок

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

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

В качестве примера давайте введем в строку поиска запрос «компьютер» и посмотрим на выдачу самых популярных систем: Яндекса и Google.

Гугл повел себя немного по другому от Яндекса.

Как видите в выдаче Яндекса, вверху над всеми результатами появились очень привлекательные (вкусные) картинки, которые так и манят сделать по ним переход.

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

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

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

3) Контент — рулит! Не сможете без супер мощного и классного контента, сделать популярный и полезный сайт, приносящий пассивный заработок.

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

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

5) Скорость загрузки страниц блога. В наше время скоростных модемов никто не будет ждать больше 5-ти секунд, пока загрузится необходимая страница. А если не сделать оптимизацию изображения, тогда такая страничка не сможет загрузиться и через 20 секунд.

Как делается оптимизация картинок — 12 советов

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

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

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

3) Не размещайте картинки вес, у которых больше, чем 50 Кб — помните о посетителях, которые не будут тратить час драгоценного времени, пока загрузится страница.

4) Обязательно оптимизируйте логотип своего сайта или компании. Это немного сможет уберечь собственные картинки от воровства и будет играть роль рекламы домена.

5) Используйте атрибут «ALT». В данном атрибуте прописывайте альтернативное описание изображения. Именно то, что там будет написано, увидят пользователи, если выключен показ рисунков в браузере.

В данный текст, стоит включить ключевое слово, так как атрибут «alt» учитывается при ранжировании страниц.

6) Используйте атрибут «TITLE». В данном атрибуте прописывайте то, что увидят пользователи, если наведут курсор мыши на картинку. Немного изменив описание атрибута «alt» можно использовать его и в «title».

7) Не забывайте про «HEIGHT» и «WIDTH». Данные атрибуты указывают высоту и ширину изображения. Чем больше мы дадим информации поисковикам о картинке, тем лучше это скажется на выдаче.

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

9) Текст, который окружает картинку должен включать в себя ключевые слова. Роботы Яндекса и Гугла придают больший вес тегам <h2>,<h3>,<h4> и т.д., поэтому употребление их в тексте рядом с картинками будет только плюсом.

10) Называйте изображения правильными именами. Если вы поместили изображение о ремонте компьютера, тогда и имя у такой картинки должно быть соответствующее типа «remont-kompyutera», но ни в коем случае не «16-nu» или что-то подобное.

11) Думайте о формате. Google и Яндекс воспринимают рисунки формата png и jpg, как фотографии, а формат gif, как картинки (кнопки или элементы дизайна).

12) Оптимизируйте не только картинку на странице, но и саму страницу. Чем больше вес будет иметь страница, тем больше его будет иметь и картинка.

Вот шаблон правильной оптимизации изображений:

<img title="название изображения, используя ключевое слово" src="http://seoslim.ru/wp-content/uploads/2012/05/besplatno.jpg" alt="альтернативное название с ключевиком" />

<img title=»название изображения, используя ключевое слово» src=»http://seoslim.ru/wp-content/uploads/2012/05/besplatno.jpg» alt=»альтернативное название с ключевиком» />

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

Выбираете нужное изображения и в поле «Заголовок» прописываем title картинки. В поле «Текст» пишем alt изображения. Ну а из поля «Размер» выбираем необходимый размер width и height.

Заключение

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

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

Если есть, вопросы задавайте — помогу всем. Пока!

Оптимизация изображений для сайта | Impuls-Web.ru

Приветствую вас, дорогой друг!

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

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

Навигация по статье:

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

1. 1.Размер изображения
2. 2.Формат, в котором вы сохраняете картинку
3. 2.Степень ее сжатия

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

Если вы планируете использовать изображение, например, в качестве фонового на своём сайте, то следует брать ширину не более 1600 – 1800 пикселе.
А для того, что бы это изображение растягивалось на всю ширину на любых, даже самых больших экранах, лучше использовать специальное css-свойство:

background-size:100% auto;

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

Если вы подготавливаете картинку для миниатюры или вставки в какую-нибудь статью, то здесь вам нужно обратить внимание на то, какую ширину имеет ваш основной контейнер с текстом этой статьи. То есть если, к примеру, контейнер для вывода миниатюры имеет ширину 900 пикселей, то вставлять сюда изображение имеющее ширину 1500 или 2000 пикселей не имеет смысла.

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

В каком формате лучше сохранять изображения для сайта?

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

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

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

Оптимизация изображений при помощи PhotoShop

Первый и самый простой способ подготовки картинки к выгрузке на сайт, это использование программы Adobe PhotoShop или его аналогов.

Прежде всего, изменяем размер изображения:

1. 1.В главном меню программы выбираем пункт «Изображения» => «Размер изображения».
2. 2.Задаём нужную нам ширину, при этом, обращая внимание на то, что бы у вас стояла галочка «Масштабировать стили» и «Сохранять пропорции». Иначе изображение будет деформироваться. После задания параметров нажимаем «Да».
3. 3.Теперь заходим в меню «Файл», и выбираем «Сохранить для Web и устройств».
4. 4.В левой части окна у нас отображается окно предпросмотра и сразу же под этим окном отображается вес картинки. На данный момент в таком формате и с такими параметрами это изображение будет у нас весить 142 килобайта.
5. 5.В правой части экрана мы можем изменять формат изображения. В основном здесь будут использоваться JPEG и PNG -24. Например, если здесь выбрать формат PNG -24, то вес увеличится до 1.3 мегабайта. Кроме формата в самом верхнем поле вы можете выбирать качество оптимизируемого изображения. Например, для JPEG у нас по умолчанию доступно три варианта. Это хорошее качество, низкое и среднее качество.
6. 6.Так же вы можете задавать качество изображения в ручную, используя поле Quality.

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



Если мы перейдем на вкладку 4up, то здесь нам будет предлагаться несколько разных вариантов оптимизации. В самом первом окне отображается оригинальное изображение, во втором окне — с качеством 50, в третьем – с качеством 25, и в последнем – с качеством 12.



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

7. 7.После того, как все параметры выбраны, нажимаем на кнопку «Save» и сохраняем нашу картинку.

Оптимизация изображений при помощи специальных программ

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

Я для этих целей использую программу Riot. Скачать её вы можете по ссылке ниже:

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

1. 1.Для открытия изображения мы можем воспользоваться либо кнопкой «Open», либо же просто взять нужное нам изображение и перетащить его в окно программы.
2. 2.Сразу же программа предупреждает нас о том, что размер картинки слишком большой и предлагает нам его уменьшить. Выбираем здесь «Yes» и вводим здесь необходимую ширину.
3. 3.В левой части экрана мы видим оригинал нашего изображения, а также его вес. В правой части отображается уже оптимизированное изображение и его вес.
4. 4.В нижней части окна вы можете выбирать между тремя форматами: jpeg, png и gif.
5. 5.При помощи ползунка Quality вы можете изменять в процентах качество изображения. При этом результат вы будете видеть в правой части окна. Я обычно ставлю около 50%.
6. 6.Так же на нижней панели инструментов вы можете при помощи кнопок поворачивать картинку, отображать ее по горизонтали или по вертикали, а так же изменять его размер.
7. 7.После того, как вы выставили все необходимые параметры, кликаем на кнопку «Save». Программа предлагает нам заменить оригинальный файл. Если вас устраивает такой вариант, то выбираете «Yes» и изображение заменяется на уже оптимизированное, что так же очень удобно.
8. 8.Если же данный вариант вас не устраивает, то выбираете «No» и задаете имя, под которым хотите сохранить оптимизированную картинку. Я заменять не буду, так как мне нужно, что бы сохранился оригинал для того, что бы в конце статьи можно было провести сравнительный анализ.

Оптимизация изображений при помощи сервиса Web Resizer

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

Первый сервис называется Web Resizer, он бесплатный и регистрироваться здесь не обязательно.

1. 1.Для того, что бы загрузить изображение, нажимаем на «Обзор», выбираем изображение и затем кликаем на кнопку «Upload Image». При этом максимальный вес изображения, загружаемого для оптимизации, должен быть не более 10 Mb.

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

2. 2.Если мы прокрутим немножко ниже, то мы видим, что здесь мы можем сразу же задавать размер, который нам нужен. По умолчанию он составляет 400 пикселей.
   Так же, при желании, вы можете повернуть изображение и задать другие параметры.
3. 3.После того, как все настройки заданы, обязательно нажимаем на кнопку «Apply changes». И вот у нас открывается наше оптимизированное изображение.
4. 4.Теперь кликаем по нему правой кнопкой и выбираем «Сохранить изображение как». Сервис сохраняет все оптимизированные изображения с базовым названием «result», вам нужно задать то название, которое вам нужно.

Онлайн сервис TynyPNG

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

1. 1.Сразу же в верхней части экрана нажимаем на кнопку и загружаем нужное изображение. Так же изображение можно сюда перетянуть.
2. 2.Каких либо параметров для сжатия здесь не задается. И после сжатия мы видим начальный и конечный вес изображения.
3. 3.Для загрузки кликаем по ссылке «Download». Так же, вы можете сохранять изображение в ваш DropBox, и если вы будете оптимизировать не одно, а несколько изображений, то можно будет их скачать архивом, при помощи кнопки «Download All».

Онлайн-сервис OptimiZilla

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

1. 1.Для загрузки картинки нажимаем на кнопку «Загрузить», выбираем нужное ту, которая нам нужна.
2. 2.Сразу же выполняется сжатие. Если мы прокрутим немножко ниже, то увидим здесь такое же окно предпросмотра, где в левой части отображается исходный файл, а в правой части оптимизированный. Можем его уменьшать или увеличивать, и так же изменять его качество.
3. 3.После того, как все параметры заданы, нажимаем на кнопку «Сохранить», а после на кнопку «Скачать», или же, если вы загружали несколько изображений для оптимизации, то на «Скачать все».

Подводим итог

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

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

Мы видим, что самый большой вес у нас имеет изображение, оптимизированное при помощи онлайн-сервиса OptimiZilla.

А наименьший вес удалось получить при помощи программы Riot.

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

Видеоинструкция

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

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

До встречи в следующих статьях!

С уважением Юлия Гусарь

Оптимизация изображений для сайта — программа Фотошоп и онлайн-сервисы

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

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

Заполняем атрибуты alt и title

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

Alt и title не должны быть одинаковыми. Вот фотография федеральной трассы Р-21 «Кола»:

В данном случае в alt можно написать ключевые слова «дорога», «небо», «федеральная трасса Р-21 «Кола», «ремонт дороги», а в title — «трасса Р-21 «Кола».

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

Формат изображения

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

Соответственно, если картинка заполнена изображением на 100% своей площади, то формат PNG лучше не использовать. Кроме того, изображения в формате PNG слишком много весят (по сравнению с JPG) и, что самое важное, при сжатии они очень сильно теряют в качестве.

Оптимизируем размер изображения с программой Adobe Photoshop

Adobe Photoshop — программа, которая позволит вам легко оптимизировать любое изображение.  Сделать это очень просто, не нужно возиться с настройками, достаточно лишь выбрать пункт в меню File — Save for Web&Devices.

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

Также у вас есть возможность самостоятельно задать качество, использовав в правом верхнем углу настройку Quality. Остальные настройки не так важны, трогать их совсем не обязательно. 200 килобайт — уже значительно лучше, однако не стоит забывать о размере фотографии. В данном случае он равен 2500×1667 px. Очевидно, что для сайта такой размер не нужен. Сожмем его до 800 px по ширине.

Теперь фотография весит всего 24 килобайта, и это уже гораздо лучше, чем 200. Да, может показаться, что и 200 килобайт — это не много. Но это только тогда, когда вы используете в статье 1–2 изображения. А если их десятки? Это уже серьезно повлияет на скорость загрузки страниц. А если на вашем сайте планируется размещение большого количества фотографий, то в этом случае оптимизировать их размер стоит хотя бы из соображений экономии места на хостинге.

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

Другие способы оптимизации изображений

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

• RIOT — бесплатное приложение, которое умеет сжимать форматы PNG, JPG и GIF. Оптимизирует изображения без потери качества, есть дополнительные функции, которые позволяют масштабировать или поворачивать фотографию.
• FileOptimizer — универсальная программа, которая может работать с очень большим количеством различных файлов (документы, архивы и т.д.). Изображения оптимизируются без потери качества, результат зависит от формата. В случае с JPG это до 17–18% уменьшения веса, PNG могут сжиматься до 50%.
• TinyPNG — веб-сервис, который в режиме онлайн оптимизирует изображения. Без потери качества сжимает до 35–40%, но есть определенные ограничения. Нельзя загружать сразу больше 20 файлов, а максимальный размер фотографии — 2 мегабайта.

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