Оптимизация изображений является важной составляющей, если вы хотите создать успешный сайт, поскольку основная часть данных сайта обычно состоит именно из картинок. По статистике изображения составляют в среднем более 20% от общего веса веб-страницы. Результатом оптимизации картинок на сайте будет более быстрая загрузка страниц, уменьшение нагрузки на сервер, а также потенциальное повышение SEO рейтинга при ранжировании сайтов в поисковых результатах. Ведь не зря Google выделил под картинки особую секцию в разделе «Возможности» инструмента оптимизации сайтов Lighthouse.
В сегодняшней статье мы рассмотрим самые основные способы оптимизации картинок, которые вы сможете проделать достаточно быстро, просто и самостоятельно.
Оптимизация изображений – это комплекс действий вебмастера, которые направлены на уменьшение размера файлов изображений в максимально возможной степени без ущерба для качества, а также которые будут способствовать эффективному SEO-продвижению. Грамотный процесс оптимизации картинок должен иметь потенциальный положительный эффект на результаты ранжирования вашего сайта в Google и других поисковых системах.
Большие файлы картинок замедляют работу вашего сайта, а поисковые системы ненавидят медленные сайты. Вот почему стоит уделить особое внимание процессу оптимизации изображений.
Сегодняшний обзор посвящен больше технической оптимизации картинок, а об SEO оптимизации картинок читайте в нашем предыдущем обзоре.
Ниже представлен список из 7 основных шагов, которые вы можете предпринять, чтобы максимально оптимизировать свои картинки на сайте. Каждый шаг будет расписан более детально ниже в сегодняшней инструкции.
Существует три наиболее распространенных типа файлов, которые используются для публикации изображений в Интернете: JPEG, PNG и GIF. Давайте рассмотрим их более детально.
.jpg) относятся к устаревшему типу файлов, хотя до сих пор сохраняют статус наиболее популярного типа файла для картинок в Интернете. Данный формат позволяет эффективно сжимать изображения, без сильной потери качества в сочетании с небольшими размерами файлов..png) также довольно популярны, но имеют одно существенное ограничение – качественная картинка в формате PNG будет иметь значительно больший размер файла, нежели идентичный JPG. Правда, файлы PNG лучше переносят повторные сжатия и сохранения, чем JPEG. Файлы PNG имеют 2 типа: PNG-8 (поддерживает 256 цветов) и PNG-24 (поддерживает 16 миллионов цветов). Изображение в формате PNG-24 будет более чем в три раза больше по размеру файла, чем PNG-8, поскольку поддерживает значительно больше цветов. Картинки PNG поддерживают прозрачность, поэтому лучше всего их использовать для небольших иконок и миниатюр..gif) имеют более низкое качество, чем изображения в формате JPEG, и, в основном, используются для небольших и простых изображений (таких как иконки, миниатюры и маленькие декоративные картинки). GIF-файлы так же, как и PNG, поддерживают прозрачность. Известность данному формату принесла поддержка анимации, и даже на сегодняшний день «гифки» остаются достаточно популярными. Правда, для сложных изображений и фотографий GIF-файлы не подходят.
Существует несколько других, более современных форматов картинок, например JPEG XR, JPEG 2000 и WebP, которые настоятельно рекомендует использовать Google. Правда, они поддерживаются не всеми браузерами. Новые форматы изображений обладают превосходными характеристиками сжатия и качества, что обеспечивает более быструю их загрузку, и меньшее потребление данных.
Вполне естественно, что вы хотите показывать своим посетителям картинки наилучшего качества и в максимально большом разрешении. Это может понравиться вашим пользователям, но есть риск впустую потратить интернет-трафик посетителей и снизить производительность страницы.
Например, вы сфотографировали красивые пейзажи на свой новый телефон (или фотоаппарат) и спешите поделиться этими картинками со своими читателями. В основном, вебмастера-любители сразу загружают картинки на сервер и не заморачиваются даже элементарной обработкой фоток. В итоге на сайтах появляются фотки вида DSC_*****.JPG, каждая из которых имеет вес минимум 3Мб, и разрешением от 2048×1080 (2К) или 4096×2160 (4К) пикселей. Кстати, вы знаете, что обозначает это DSC_*****.JPG? Префикс DSC обозначает digital still camera (цифровой фотоаппарат), а цифры после нижнего подчеркивания – это порядковый номер фото для данного девайса.
Да, эти картинки будут очень большими, красивыми и детализированными, но в эпоху мобильных телефонов и смартфонов большинству пользователей сложно будет насладиться всеми этими преимуществами. К тому же, при стандартном интернет-подключении, такие фотки будут очень долго загружаться.
Уделите немного времени хотя бы базовой обработке фотографий. Например, если сохранить фотку с цифрового фотоаппарата (или телефона) в программе Photoshop (Save for Web) со средним значением сжатия (Medium) и сохранением исходного разрешения, вес фотографии уже будет значительно меньшим – приблизительно в 3-7 раза от оригинала. При этом качество картинки не сильно пострадает. Также подумайте о необходимости уменьшения разрешения картинки, — оптимальным размером картинки для веб-сайта является значение 1280×720 пикселей (720p, HD). Кроме этого, предоставьте пользователям возможность просматривать увеличенное (оригинальное) изображение во всплывающем окне или на отдельной веб-странице.
Amazon провел исследование, в результате которого обнаружилось, что если страницы сайта будут загружаться всего на одну секунду дольше, они потеряют 1,6 миллиарда долларов за 1 год. Кроме этого известно, что практически 50% потребителей не будут ждать более 3 секунд, пока загрузится сайт.
Как это относится к размеру файла изображения? Чем больше размер файла, тем больше времени требуется браузеру для загрузки всей веб-страницы. Если вы не уменьшите размер файлов картинок на своем сайте, скорость загрузки страницы уменьшится, и потенциально меньше людей заинтересуется вашим сайтом.
Как уменьшить размер файла изображения?
Один из эффективных и простых способов уменьшить размер файла изображения – использовать команду Сохранить для Интернета (Save for Web) в программе Adobe Photoshop. Как уже упоминалось выше, данный подход позволит вам уменьшить «вес» картинки приблизительно в 3-7 раз. Используя данную команду, постарайтесь найти оптимальный баланс между минимально возможным размером файла и качеством изображения.
В примере на скриншоте, оригинальная картинка имела «вес» в 611Кб, при сохранении для Веб ее размер уменьшился до 171Кб, и с минимальными потерями исходного качества. Экономия составила более 72%.
Если у вас нет программы Adobe Photoshop, в Интернете существует множество онлайн-инструментов, которые вы можете использовать для бесплатного редактирования изображений.
Какой максимальный «вес» должны иметь файлы изображений? Старайтесь не размещать на странице картинку, размер файла которой превышает 120-150Кб. Это правило очень сложно соблюдать, особенно если картинка большая и имеет высокое разрешение. В таких случаях отдавайте предпочтение сохранению качества, а не максимальному сжатию картинки.
На многих сайтах до сих пор используют набор изображений, которые выполняют декоративную функцию: фоновые изображения, кнопки и границы. Хотя декоративные изображения могут привнести эстетическую привлекательность веб-странице, их нагромождение может привести к увеличению веса страницы, а также уменьшению скорости ее загрузки.
Особенности использования декоративных изображений:
По возможности используйте CSS стили вместо любых декоративных изображений.
Для лучшего SEO в отношении изображений, важно использовать в их названии релевантные ключевые слова. Описательное, понятное название файла изображения, с использованием релевантных ключевых слов – это половина успеха в процессе оптимизации изображений для SEO. Учтите, что поисковые системы сканируют не только текст на вашем сайте, они также сканируют названия файлов изображений, и даже EXIF данные (метаданные) картинок.
Для примера, возьмем эту картинку с кошкой.
Вы можете использовать общее имя, которое было присвоено автоматически вашей камерой (например, DSC_1245.JPG). Или же просто image_01.jpg. Однако было бы гораздо лучше назвать данный файл в виде ginger-cat-with-a-big-white-mustache.jpg. Если использовать латиницу, тогда файл может называться ryzhiy-kot-s-bolshimi-belymi-usami.jpg. Вы также можете использовать в названии файла изображения кириллицу, но учтите, что не все серверы могут нормально работать с такой кодировкой. Также возможны случаи, когда вместо нормального названия файла вы получите одни «кракозябры». И еще, старайтесь избегать пробелов в названии файлов.
Постарайтесь в процессе именования файла описательными и несколькими словами передавать всю суть, которая изображена на данной картинке.
Атрибут alt – это альтернативное, текстовое отображение картинки, когда браузер не может ее показать (например, из-за 404-й ошибки). Также данный атрибут используется для лучшей веб-доступности (Web-Accessibility) – для обеспечения доступности Интернета людям с ограниченными возможностями.
Оптимизированные атрибуты alt картинок способны увеличивать SEO-ценность вашего сайта. Используя релевантные ключевые слова в изображениях, вы сможете позитивно повлиять на рейтинг вашего сайта в поисковых системах. Атрибуты alt, наряду с атрибутом title для картинок, — это один лучших способов попасть вашим картинкам в изображения Google, а также на первые страницы результатов поиска.
2 основных правила использования атрибутов alt:
alt, лучше используйте как можно более описательный текст, передающий всю суть картинки.
Почитайте больше о способах оптимизаций картинок для SEO в нашем практическом обзоре.
После выполнения всех шагов, которые описаны выше, пришла пора сообщить поисковым системам обо всех картинках, которые есть на вашем сайте. Лучшим способом для этого до сих пор является использование карты сайта специально для картинок (файл sitemap.xml). Поисковые боты отлично сканируют изображения, которые указаны в исходном коде веб-страницы, а также в CSS стилях. Немного сложнее дела обстоят с картинками, которые вызываются скриптами JavaScript. Чтобы поисковые системы узнали обо всех картинках вашего сайта, вы должны указать их местоположение в сайтмапе для изображений. К тому же в сайтмап картинок можно добавлять caption (подпись) и title (заголовок) к изображениям.
Для генерации карты сайта картинок вы можете использовать любой из онлайн-генераторов сайтмапов, которых в сети Интернет достаточно.
После размещения sitemap для картинок на сервере, укажите путь к этому файлу в файле robots.txt в специальной строке (директиве Sitemap). Например, на нашем сайте используется следующая директива:
Sitemap: https://sebweo.com/sitemap-image.xml
После этого вы можете отправить карту сайта для картинок в Google с помощью инструмента Search Console.
Использование файлов Sitemap не гарантирует, что все ваши изображения будут проиндексированы Google, но данный шаг обязательно стоит выполнить в рамках процесса оптимизации изображений.
Весь смысл оптимизации ваших изображений сводится к тому, чтобы уменьшить их размер, увеличить скорость загрузки страницы, а также оказать позитивное влияние на рейтинг своего сайта в результатах поисковых систем.
В сегодняшнем обзоре вы познакомились с 7-ю основными и простыми шагами, которые вы можете предпринять, чтобы максимально оптимизировать картинки на своем сайте. Мы коснулись только поверхности данной обширной темы, поскольку оптимизация изображений является довольно сложной задачей. Если у вас возникают вопросы (или замечания) по поводу сегодняшнего урока, не стесняйтесь писать их в разделе комментариев ниже.
Спасибо, что читаете нас!
Учеба за границей уже давно ассоциируется с качественным образованием, новыми возможностями и множеством перспектив. Но…
Выбор мастера для ремонта и перетяжки мебели — задача, которая требует вдумчивого подхода. Ведь от…
Выбор идеального хостинга под свой сайт может быть довольно запутанным делом, особенно когда существует так…
Чтобы избегать ошибок, нужно набираться опыта; чтобы набираться опыта, надо делать ошибки Лоуренс Питер
Краткое определение Черного SEO Черное СЕО (или Черная оптимизация) — это любая практика, целью которой…
Получение водительских прав категории C открывает двери к профессиональной деятельности, связанной с управлением грузовыми автомобилями.…