чем больше весит фото тем лучше качество
Размер, вес и формат фотографий
Почти все фото камеры могут сохранять фотографии в формате JPG (даже камеры телефонов и планшетов). Во всех зеркальных и без зеркальных камерах, а так же в продвинутых компактах в дополнение к JPG есть, как минимум, RAW и RAW+, и иногда TIFF.
Чтобы разобраться с форматами, для начала нужно договориться, что подразумевается под понятиями «размер» фотографии и «вес» файла (фотографии). Предлагаю рассмотреть эти понятия на более осязаемых объектах. например, на вкусностях.
1 | Что такое пиксель:
2 | Можно ли пиксели перевести в сантиметры:
Чтобы вы не ломали голову над делением размера фото на разрешение и не переводили дюймы в сантиметры, в любой программе для просмотра и редактирования фото (например, в Photoshop) есть функция просмотра размера изображения фото в сантиметрах. Она вам понадобится, чтобы понять, какого максимального размера фотографию в хорошем качестве (с разрешением 300 dpi), вы сможете напечатать на бумаге или другом материальном носителе.
Например, это фото с тропическими цветами Франжиспани, можно напечатать размером 61 см на 32 см.
Размер фотографии в пикселях и сантиметрах в программе Photoshop
Чтобы узнать размер фото в пикселях и сантиметрах в программе Photoshop, нужно нажать комбинацию клавиш Alt+Ctrl+I или зайти в меню Image (Изображение) ►Image size (Размер изображения).
Теперь попробуем «растянуть» фото на всю страницу:
Растянутая картинка выглядит мутной и нечёткой
Как видите, детализация уже не та, так как часть пикселей (а вместе с ними и деталей) отсутствует.
Конечно, если использовать эту уменьшенную картинку как маленькую иконку или небольшое изображение в презентации Power Point, то будет смотреться вполне нормально, но вот для печати в журнале на пол страницы она явно не подойдёт.
3 | Какой размер фотографии (сколько пикселей) оптимален:
Если же вы планируете когда-нибудь печатать фото, то сохраняйте фото в максимально возможном разрешении, которое только позволит ваша камера (внимательно изучите инструкцию к вашей камере, чтобы правильно настроить размер фото).
В некоторых случая нужно уменьшать размер фотографий. Как я писала выше, для сайта я уменьшаю размер фото до 1200 пикселей по длинной стороне. Если загрузить фото в полном размере, страницы сайта будут очень долго загружаться, а это многим посетителям может не понравится (не говоря уже о поисковиках Гугл и Яндекс).
Размер фотографий измеряется в пикселях (px). От количества пикселей зависит размер фото на экранах мониторов, и какого размера можно напечатать фотографию.
4 | Размер файла или «вес фотографии»:
Теперь разберёмся с «весом фотографии». Так уж исторически сложилось, что в этом вопросе много путаницы и размер файла довольно часто называют «весом фотографии», что скорее удобно, чем правильно. Размер файлов измеряется мегабайтами (МВ) или килобайтами (КВ). И тут стоит помнить, что в отличии от килограммов, где 1 кг = 1000гр, 1 мегабайт = 1024 килобайт.
Как это выглядит на практике: представим ситуацию, что в вашем фотоаппарате есть карта памяти на которой написано 64GB (гигабайта). Если посмотреть, сколько же там именно этим байтов (на компьютере правой кнопкой мыши выбрать «свойства»), то окажется, что на этой карте памяти 63567953920 байт и это равно 59,2 GB. От того, насколько большие файлы создаёт ваша камера, зависит, как много фото поместится на этой карте памяти. Например, у меня помещается 830 файлов с фото в формате RAW (о форматах читайте ниже).
От чего завит размер файла:
Если вы спросите, какого размера фото я могу напечатать с фотографии, которая весит 2МБ. Никто вам не сможет ответить, пока не узнает количество пикселей. А лучше, конечно, ещё и взглянуть на фото, так как некоторые умельцы любят доставать фото из глубин интернета, увеличивать количество пикселей программно, а потом хотеть напечатать её на обложке журнала. Получается как на примере выше с растянутой фотографией вазочки шириной 150 px.
Размер файла (часто называют «вес фотографий) измеряется в мегабайтах (МВ) или килобайтах (КВ) и зависит от формата, размера в пикселях и детализайии фотографии.
5 | Форматы фото:
И, наконец-то, мы подошли к вопросу форматов изображения и типа сжатия файлов, от которых тоже зависит размер файла с фото.
Практически все фото камеры могут сохранять фотографии в формате JPG (даже камеры телефонов и планшетов). Это самый распространённый формат изображений и его «понимают» все компьютеры и программы для просмотра изображений. В формате JPG фото можно загружать в соц сети, выкладывать в блоге, добавлять в файлы Word, Power Point и так далее. JPG можно обрабатывать в Фотошопе, Лайтруме и других программах для редактирования изображений.
Из моей практики: если я хочу сделать фото для соц сети и быстро его загрузить, то я или фотографирую на телефон, или ставлю в своей камере формат файла jpg.
При сохранении файла в формате jpg выбирается степень сжатия (пример из программы Photoshop).
Во всех зеркальных и без зеркальных камерах, а так же в продвинутых компактах в дополнение к JPG есть как минимум RAW, и часто ещё и TIFF.
Лично я никогда не фотографирую в формат TIFF. Не могу даже придумать, зачем мне это нужно, если есть RAW. TIFF без сжатия я могу использовать для сохранения фото, которые ещё планирую доработать в программе Photoshop.
Как уменьшить изображение в фотошопе без потери качества
Друзья, привет. Многие из нас ведут блоги, или выкладывают периодически фотографии на сайтах. И я тоже постоянно сталкиваюсь с проблемой веса фотографий. И сегодня хочу поделиться своим опытом, и расскажу как уменьшить изображение в фотошопе без потери качества.
Поскольку у меня блог про тему фотографии, то фоток на моем сайта предостаточно, что только добавляет мне вопросов оптимизации фотографий.
В начале
Обычно перед тем, как выложить статью на блоге, я все изображения загружаю в фотошоп, и там их уменьшаю. Делаю я это через функцию «Сохранить для веб», или горячими клавишами Shift+Ctrl+Alt+S.
С виду много клавиш, которые нужно зажать, но на практике получается очень удобно, если поставить большой палец на Alt, мизинец на Ctrl, безымянный на Shift, ну и указательный на S. Получилось? Видите, как просто.
Недавно я выкладывал статью про самые дорогие мотоциклы в мире, и вот у меня так было в фотошопе:
Если вы обратите внимание, то весит эта фотография самого мотоцикла 2,15 Мб.
Понятно, что в таком виде на сайт выкладывать ее совершенно не нужно. Это огромный вес для интернета. Нажимаем наши волшебные клавиши Shift+Ctrl+Alt+S, и у нас открывается вот такое окошко.
Параметры сохранения
Давайте разбираться, где какие параметры, и на что нужно обратить внимание, чтобы сохранить картинку в хорошем качестве, и при этом уменьшить ее размер.
Как вы видите, фотошоп уже сжал фото с 2,15 Мб до 300 Кб. И это уже очень хорошо. Но обычно я не использую в своем блоге изображений весом больше 200 кб.
И то это редкий случай, когда нужно показать красивую фотографию в полном размере, как например, фотографии в пресетах Лайтрум, где нужно показать красоту обработки фильтра.
А в обычных статьях блога сейчас стал делать фотки где-то в районе 100кб плюс минус 20-30кб. Раньше, в первых статьях старался вообще делать где-то 50-70кб, но это сильно искажало картинку, и теперь стараюсь делать побольше.
Формат
Давайте теперь более подробно разбираться в тонкостях этих настроек, и начнем мы с формата. Как я уже сказал, где-то можно сохранить в jpeg, где-то в png.
Для себя я вывел такое правило, что если есть изображение, такое как фотография, картинка, то лучше сохранять в jpeg, и просто уменьшить размер, и уменьшить качество. В нашем случае можно сделать вот так:
Мы делаем формат jpeg, качество 80, ширину убавляем до 800, и видим, что наше фото уменьшилось в весе, и стало 146 кб. Это для вас приемлемо? На сайте она будет выглядеть вот таким образом, т.е. полностью в ширину контекстной части.
Вполне качественно, хорошо видны детали, и в целом очень приемлемый вариант для блога, если нужно показать качественно. Я думаю, в случае с мотоциклами, то фото должны быть только хорошего качества. Вы согласны?
Если для вас это много по весу, давайте попробуем сделать меньше размер, не 800px, а сделаем 700px, смотрим что у нас получается в самой программе.
Вы уже видите, что вес уменьшился, и стал уже 117 кб. Длину фото мы сделали 700px. Вот как эта фотография будет выглядеть у вас в блоге в контексте записи:
Чуть меньше, чем предыдущее фото, и тем не менее, вполне себе здорово смотрится на сайте, и красота мотоцикла видна в полной мере.
Кстати, разница по ширине в статье совсем не заметна. Я тоже для себя кое-что вынесу из этого урока! Будем еще меньше делать фото? Давайте сделаем в настройках 600px. Мне кажется это вполне еще приемлемо. Вот так будет в программе:
И мы уже видим, что при размере в 600px, вес стал 91кб. Совсем не много, мне кажется, для любого сайта. И вот как эта фотка будет выглядеть в вашей заметке:
Я больше не буду уменьшать, вы сами это можете сделать и понять какой вариант размера вам больше подходит для вашего ресурса.
Давайте перейдем к другому параметру, и посмотрим как он отражается на самой фотографии, и на сколько можно уменьшать эти настройки.
Качество
Вы, наверно, заметили, что здесь все настройки очень переплетены между собой. Выше был заголовок формат, а я говорил про размер, потому что тут сложно говорить только о чем-то одном, это сразу отражается и на другом.
Я думаю, тут важно понять принцип, и он не такой сложный, как может показаться на первый взгляд, но небольшая практика нужна. Давайте будем двигать ползунок, который отвечает за качество.
Как мы видели, размеры 800px и 700px совсем не отличаются по тому, как они выглядят на сайте. Поэтому, я предлагаю двигать качество на размере 600px.
Это вполне себе нормальная картинка для блога, и если вам нужно сделать ее еще меньше по весу, то лучше проводить эксперименты с этим размером.
Качество 80% у нас уже было, поэтому давайте уменьшим до 70%, и посмотрим что у нас получится. В программе это будет выглядеть вот так:
Смотрим сколько у нас теперь весит картинка? Только 71Кб! Это очень хороший результат для сжатия изображения. И что же мы будем видеть на сайте с такими параметрами? А вот что!
Тут уже на любителя, и кто как видит. Для меня, это не очень хорошая фотка, а для вас — смотрите сами. Давайте я еще уменьшу на 10% качество, раз уже мы двигаемся в эту сторону и посмотрим что будет происходить. Ставим параметр 60% на 600px. Окно программы будет вот такое:
Как видим, весить она стала всего 57Кб. Да, теперь не будет больших скачков в весе фотографии, и все будет уменьшаться по маленьким параметрам. Ну а в записи с такими параметрами мы увидим вот такую фотографию:
Тут важно показать направление для экспериментов и подбора нужных значений. И я его показал. А дальше можно делать все что вам захочется.
Можно же еще немного кадрировать саму картинку, чуть-чуть подрезать сверху и снизу, что я и сделал у себя в статье про самые дорогие мотоциклы в мире. Да, это тоже хороший вариант сделать уменьшение изображения, в том числе и по весу.
Jpeg или png
И остался у нас один вопрос, о котором хотел бы рассказать в данной статье. Когда использовать jpeg, а когда png. Даже в рамках этой статьи, я использовал и тот и другой формат.
А секрет вот в чем, я уже говорил о нем. Если вам нужно показать картинку, то вы делаете jpeg, если вам нужно показать цифры, или скриншот программы, то вы делаете png.
Именно так и я делал выше. Если вы внимательно поглядите на сам мотоцикл в скриншотах программы, где стоят настройки, то вы увидите очень грубые градиенты перехода цвета. К примеру на зеленых деталях мотоцикла. Посмотрите внимательно!
Конечно, когда мы следим за цифрами, допустим в окне программы, то сама картинка уходит на второй план, и все внимание на показатели, с которыми мы работаем.
Но если сделать png для самой картинки, то я могу показать что будет. Давайте сравним как будет выглядеть png и jpeg с одними и теми же настройками всего остального. Вот глядите, ставим в программе 600px и ставим формат png:
Как видим такое изображение будет весить 108 Кб. Это примерно 700px формата jpeg c 80% качества. И что теперь мы будем видеть на сайте:
Вполне себе рабочий вариант, и можно так делать. Но в данном случае, лучше будет сделать jpeg, потому что он будет весить меньше и качество будет лучше.
А вот рабочий процесс программы делаю по другому. Допустим, я выставляю разные настройки для изображения, делаю скрин этого процесса. А потом для того, чтобы выложить это на сайте, сохраняю этот скрин в png, причем размер я не трогаю:
Т.е. вы видите размер у меня тут на этой картинке 1135 px, и так видно хорошо все цифры и все параметры. Весит 137Кб такая картинка, но если сделать меньше, то будет все очень плохо видно.
В заключении
Вот на этом я думаю мы с вами закончим этот достаточно объемный и большой урок по фотошопу, и как тут можно уменьшить изображение для сайта.
Надеюсь, вам все было понятно. Для начала, я думаю, это достаточно заморочисто, но вот такой это вопрос. Пишите в комментарии, если у вас будут вопросы, отвечу на все.
Нужно немного практики, пробуйте разные варианты. Все еще зависит от самой фотки и её качества. Бывают качественные картинки приходится сжимать, а бывает и плохое качество. Тогда тоже нужно опытным путем подобрать настройки и выбрать наиболее приемлемые для вас.
Большое руководство по SEO для картинок: как оптимизировать изображения на сайте
В статье:
С точки зрения влияния на пользователей, страница с изображением лучше полотна текста. Картинки помогают лучше понять смысл, разбивают текстовые полотна на удобные для чтения блоки.
Со стороны поисковиков картинки важны для SEO. Они могут принести дополнительный трафик из Google и Яндекс Картинок.
По мнению специалиста технического SEO и реверс инжиниринга Деми Мурыча (Demi Murych), которое он озвучил в вебинаре на канале Михаила Шакина, с технической точки зрения картинки и видео у Google оказывают как минимум равное влияние, как любой другой контент. В статье мы использовали некоторые советы из этого вебинара. Еще полезные видео есть на Youtube-канале DemiMurych.
В материале разберем, как правильно оформить изображения для SEO, чтобы делать их полезными, не тормозить загрузку сайта и получать дополнительный трафик. Все рекомендации советуем не принимать на веру, а тестировать и проверять на своем опыте.
Требования к картинкам: количество, размеры, уникальность
Какие изображения подбирать для размещения на страницах сайта.
Количество: для SEO хватит одной картинки на странице?
Мы не встречали информации, что количество размещенных на странице картинок как-то влияет на позиции сайта. Если вы что-то об этом знаете, поделитесь в комментариях.
Но поисковая машина воспринимает картинку иначе — для нее это совокупность факторов, в которые входит в том числе и разные варианты этого изображения.
По мнению Деми Мурыча, исходя из такого понимания изображения, для выхода в топ желательно иметь минимум 12 картинок — точнее 12 вариантов одного изображения. Они показывают одно и то же, но имеют разные форматы и выполняют разные функции:
Проинформировать Google о существовании превью можно двумя способами:
После этого поисковик будет индексировать эти превью и использовать их в поисковой выдаче.
Качество и размеры: какие картинки размещать на сайте?
Когда говорят о качестве изображения, ориентируются на его разрешение. Это не совсем корректно, но сложно обозначить качество как-то по-другому. Обычно изображения с более высоким разрешением намного лучше выглядят и больше нравятся поисковикам.
Качество изображения должно быть выше, чем у конкурентов. Минимальная нижняя граница — 1080 px по высоте. Минимальный размер превью — 640 px в ширину. Стандартный минимальный набор для примера: картинка 1920 px в ширину и три превью для мобильных платформ — 640, 920 и 1220 px.
С другой стороны, если размещать большое количество огромных качественных изображений, можно обнаружить, что страницы падают в выдаче. Как это случилось в эксперименте Деми Мурыча: он разместил на страницах картинки размером около 20 000 px, в итоге все эти страницы начали проседать. Бот, индексирующий картинки, занял весь гигабитный канал, и другой бот для индексирования html не смог пробиться к проекту. Такая ситуация с большей вероятностью угрожает фотостокам, сайтам с портфолио дизайнеров или фотографов.
Уникальность: картинки должны быть своими или можно брать из интернета?
Заказывать фотосессии для каждого нового товара может быть накладно, как и иметь в штате дизайнера для иллюстраций к статьям. Остается использовать картинки из выдачи Яндекса и Google. Может ли это навредить сайту?
С точки зрения SEO
Компания «Reboot Online» провела эксперимент с фотографиями: они предположили, что если оригинальность изображений имеет для Google большую значимость, то при прочих равных сайты с уникальными картинками будут выше в выдаче, чем аналогичные сайты с дублями картинок.
Эксперимент длился три месяца, в результате позиции сайтов с уникальными картинками оказались выше, чем сайтов с дублями. В топе выдачи Google Картинок по выдуманному запросу появились только уникальные фото. Подробнее можно почитать в отдельном материале.
Эксперт по SEO Михаил Шакин считает, что на карточках товара можно использовать неоригинальные фото, поисковик относится к этому лояльно:
«По карточкам товаров совсем не обязательно, чтобы они были полностью уникальными. Часто карточки на многих сайтах наполняются одним и тем же содержимым с сайта производителя. В таких случаях поможет не уникализация, а грамотная внутренняя оптимизация в сочетании с хорошими поведенческими факторами и качественными ссылками».
Если есть возможность — сделайте оригинальные фотографии, закажите обложки и иллюстрации у дизайнеров. Если не получается фотографировать самостоятельно каждую позицию ассортимента, работайте над уникальностью карточки товара за счет текста описаний, обзоров и отзывов.
Бороться с воровством ваших изображений можно с помощью стандарта IPTC. Нужно прописать мета-теги внутри изображения с указанием авторства. Минимальное количество параметров, которые можно настроить на автозаполнение:
По опыту Деми Мурыча, если у вас скопируют такую картинку и не удалят теги, в глазах поисковика вы останетесь источником изображения и даже получите положительный эффект. Даже если теги удалили, вы останетесь источником, ведь у вас теги прописаны.
С точки зрения закона об авторском праве в РФ
Ответ на вопрос, можно ли использовать картинки чужого авторства, зависит от цели использования:
Обычно фотографии товаров можно взять у поставщика. В этом случае хозяин интернет-магазина и поставщик договариваются об использовании изображений на сайте и никто не имеет претензий. Но если у поставщика фотографий нет, нужно делать свою фотосессию или купить права на использование чужих картинок.
Был такой случай: разработчик сайта для мебельного магазина из Перми скачал фото аналогичных товаров у магазина мебели из Екатеринбурга. Владельцы магазина это заметили и подали в суд. Суд по интеллектуальным правам постановил выплатить компенсацию в размере 820 000 рублей за использование 82 фотографий. Компенсацию взыскали с владельца пермского магазина и администратора домена сайта, который выложил фото.
Где брать фото
Если скачиваете картинку с фотостока, чтобы разместить на сайте, проверяйте перечень разрешений в лицензии на использование. Иногда люди заливают чужие фото на стоки, а настоящий автор не подозревает, что его картинка лежит в свободном доступе. Для проверки лучше сделать поиск по картинке и посмотреть, не выложена ли фотография на другом стоке у другого автора.
Подробно авторское право на изображения мы разбирали совместно с магистром частного права Дарьей Третьяковой: «Советы юриста: откуда брать картинки, чтобы не попасть под суд, и как защитить свои авторские права на изображения».
Если нужна фотография случайного человека, можно бесплатно сгенерировать портрет в сервисе с помощью нейросети, они выглядят очень натурально. Брать личные фотографии реальных людей можно только с их согласия, даже если они выложены в социальных сетях на всеобщее обозрение.
Портрет, сгенерированный нейросетью
Тематика: как содержание картинки влияет на SEO?
Картинка должна органично вписываться в контент страницы и дополнять его — это важно и пользователям, которые смотрят на иллюстрации, чтобы лучше понять тему, и поисковикам, которые научились распознавать, что находится на изображении.
К примеру, чтобы иллюстрация из статьи попала в сниппет мобильной выдачи, нужно подобрать изображение, по которой можно легко определить основной запрос страницы. Здесь удачное фото, кроссовки занимают большую часть картинки, находятся в центре и легко считываются.
Фото, которое попало в мобильную выдачу
Расположение: важно ли, в каком месте страницы находится картинка?
Самое важное изображение лучше поместить в верхней части страницы, как написано в Справке Google. Все, что находится в начале страницы, имеет больший вес, это касается и заголовков с ключевыми словами, и ссылок.
Как оптимизировать картинки правильно
Качественные изображения весят много. Нужно найти баланс между быстрой загрузкой картинки и хорошим качеством, чтобы пользователь видел четкое красивое фото, а сайт не тормозил из-за тяжелых иллюстраций.
Оптимизация картинок для ускорения загрузки — не разовое мероприятие. Если вы закажете сжатие картинок у стороннего фрилансера, он может скачать все картинки с вашего сайта, прогнать через сервисы для оптимизации, сжимающие файл, и закачать их обратно. Это сработает, но до тех пор, пока вы не загрузите новые неоптимизированные картинки, как и делали до этого.
Предлагаем самостоятельно разобраться в оптимизации изображений для сайта.
Как выбрать оптимальный формата файла картинки
От формата изображения зависит, как сильно можно сжать картинку при сохранении ее качества.
Некоторые оптимизаторы советуют отдавать предпочтение векторным форматам, поскольку векторные картинки не зависят от разрешения и масштаба и подходят для отображения в высоком разрешении. Если изображение состоит из геометрических фигур — логотип, схема, значок, текст, стрелка — используйте векторный формат SVG. Для фото и сложных иллюстраций нужно подобрать что-то другое.
Обычно для картинок используют универсальные JPEG, PNG и GIF. По статистике 2019 года JPEG используют намного чаще.
Статистика использования форматов картинок на 2019
Кроме этих форматов есть перспективные, но менее распространенные, на них остановимся подробнее.
Формат JPEG 2000
JPEG 2000 или jp2 представляет собой улучшенный JPEG. При сжатии картинка получается более четкая. Если сравнивать одинаковые по качеству картинки, файл JPEG будет весить больше, чем JPEG 2000. В отличие от JPEG, у нового формата при высоких степенях сжатия не появляются артефакты в виде решетки из блоков 8х8 px.
Тем не менее, из-за требовательности к памяти он не получил широкого распространения. По данным caniuse.com сейчас JPEG 2000 поддерживается небольшим количеством браузеров:
Поддержка JPEG 2000 в браузерах, 2020 год
Есть более распространенные форматы с хорошими показателями по сжимаемости.
Формат картинок WebP
WebP — формат графических изображений, появился в 2010 году как альтернатива PNG и JPEG. Поддерживает прозрачный фон и анимацию. Сжимает лучше — сохраняет такое же качество картинки при меньшем размере.
По результатам исследования 2019, формат WebP перспективнее PNG и JPEG по уровню сжатия с сохранением качества. Но на тот момент новый формат использовали немногие сайты, в первую очередь это было связано с тем, что его поддерживало не так много браузеров. Приходилось настраивать картинки под несколько вариантов.
В 2020 году по данным сайта caniuse.com WebP поддерживается такими версиями браузеров:
Поддержка WebP в браузерах, 2020 год
Их стало больше, но все равно есть пользователи на старых версиях, так что веб-мастер может настроить скрипт, который будет проверять браузер на поддержку формата WebP и отдавать его при наличии таковой. О настройке есть подробная статья в нашем блоге.
Формат картинок AVIF
AVIF (AV1 Still Image File) — формат изображений, основанный на библиотеке для сжатия кадров AV1.
В этом примере при приемлемом качестве фотографии размер файла в формате WebP составляет почти половину размера JPEG, а размер AVIF — меньше половины размера WebP.
Пример сжатия картинок
По данным caniuse.com формат по умолчанию поддерживается в новом Chrome, но остальные браузеры пока с ним не работают:
Поддержка AVIF в браузерах, 2020 год
AVIF перспективный формат, но пока лучше использовать тот же WebP, его поддерживает большее количество браузеров.
Как настроить выбор формата картинки браузером
Только вам решать, стоит ли создавать несколько версий одной картинки ради экономии. Обычно советуют настраивать через тег picture, к примеру:
В этом случае браузер загрузит первое изображение, которое поддерживает. Если браузер не понимает picture, то по умолчанию для него указан img.
Но по мнению Деми Мурыча, следует забыть про тег picture, если всерьез заниматься технической оптимизацией сайта. Если начать формировать с тегом picture то же самое, что через тег img, это приведет к минимум трехкратному увеличению узлов в DOM-дереве на каждое изображение. Каждый узел DOM-дерева — это расход памяти и замедление скриптов, а у многих сайтов верхняя граница DOM-дерева уже выше оптимального значения в 1500 узлов.
Другие способы настроить выбор формата описаны в статье на примере WebP.
Как сжать изображение
Сделать картинку легче можно, если ее оптимизировать: сжать, уменьшить размер, цветовую палитру, удалить метаданные. Но жертвовать качеством изображения не стоит, нужно найти компромисс между размером файла и артефактами, возникающими при сжатии.
Уменьшить размер
Если на странице размещена маленькая картинка, которая не должна увеличиваться по клику, нет смысла загружать ее в огромном разрешении.
Уменьшить размер можно с помощью инструментов, например:
Уменьшить палитру
Можно обработать изображение, уменьшив количество используемых цветов. Картинка будет хранить меньше битов на пиксель и весить будет тоже меньше.
При такой оптимизации оттенки могут передаваться не так четко, но если картинка в небольшом размере, это будет незаметно. Насколько сильно можно уменьшить палитру, зависит от конкретной картинки. Фотографии с небом, волнами, градиентами требуют больше цветов, чтобы отобразить все переходы оттенков.
Один из способов — уменьшить «битовую глубину» изображения. Так выглядит изображение PNG с уменьшением палитры:
Слева направо: 32 бита (16 миллионов цветов), 7 бит (128 цветов) и 5 бит (32 цвета)
Конвертировать GIF-файл в видео
Если анимация длинная, она может много весить. Такой GIF-файл есть смысл конвертировать в видео.
Обычно выбирают стандартный формат MP4. Есть относительно новый WebM, в котором файлы весят меньше, но этот формат поддерживают не все браузеры:
Поддержка WebM в браузерах, 2020 год
Иногда такая смена формата оправдана: в этом примере файл GIF весил 3,7 МБ, отконвертированный в MP4 стал весить 551 КБ, а версия WebM составила всего 341 КБ.
Сравнение веса разных форматов анимации
Примеры инструментов, чтобы конвертировать GIF в видео — FFmpeg, Online-convert, Convertio, Videotogiflab.
Удалить лишние метаданные
После сохранения картинки в графических редакторах, например, Adobe Illustrator, у нее остается XML-разметка с метаданными. Они не нужны для работы, можно удалить.
У фотографий также можно удалить EXIF — информацию о геоданных, дате съемки, фотокамере.
Сжать файл онлайн
Как настроить отзывчивые адаптивные изображения
Отзывчивые или адаптивные изображения — те, которые правильно отображаются на разных устройствах с разными разрешениями экрана.
К тегу src можно указать еще два атрибута: srcset и sizes.
Атрибут srcset содержит массив изображений с описанием их размеров по ширине или плотности пикселей. Браузер встречает такое изображение и сам выбирает, картинку какого размера из предложенных показать пользователю. Это зависит от условий, в которых юзер находится: типа устройства, разрешения экрана, скорости интернета.
Четкое правило, которое работает и для Яндекса, и для Google:
Браузер всегда показывает то, что в srcset, а бот всегда индексирует то, что в src.
Поэтому в атрибут src нужно класть самую большую качественную картинку, а в атрибут srcset несколько небольших превью. Так в индекс попадет хорошая картинка максимального качества. К тому же это дает независимость от java-скриптов.
Как настроить ленивую загрузку изображений
На баллы в PageSpeed Insights влияет не качество и объем изображений, а то, какую они создают нагрузку. Ее можно сгладить с помощью реализации отложенной загрузки — Lazy load.
Отложенная или ленивая загрузка изображений означает, что картинки будут загружаться не сразу как только пользователь зашел на страницу, а по мере надобности — по клику на превью или по доскроллу до картинки, в зависимости от настройки.
При этом важно сделать так, чтобы поисковик проиндексировал не заглушку или превью, а самую большую и качественную картинку.
У тега img есть атрибут decoding. Для реализации отложенной загрузки по умолчанию стоит указывать атрибут decoding=async, он сигнализирует браузеру, что изображение может быть загружено асинхронно и не должно влиять на основной поток рендера страницы.
Пример правильного кода для Lazy load с атрибутом decoding=async:
Тег img на второй строке содержит базовую разметку для правильного lazy load:
Если вы используете отложенную загрузку и хотите получать органический трафик, нужна такая верстка.
Еще один момент: в начале загрузки, пока картинка не появилась на экране, браузер пропускает место, где она должна появиться, и рендерит контент ниже. Он не знает, какого размера область нужно оставить под картинку. Параллельно он подгружает картинку, узнает о размерах и вписывает ее в страницу. Из-за этого верстка может сдвигаться.
Сдвиг макета из-за загрузки баннера сверху
Такие скачки макета во время загрузки измеряет характеристика CLS — Cumulative Layout Shift. Сейчас она интересна Google, поскольку входит в относительно новую метрику Core Web Vitals, оценивающую пользовательский опыт.
Верстальщики должны отводить подходящую область под изображение, указывая его точные размеры или пропорции, чтобы макет не дергался при асинхронной загрузке.
Проверить скорость загрузки страницы и еще множество параметров можно в Анализе сайта. Сервис проведет аудит сайта по 70+ параметрам, найдет ошибки и даст подсказки. В нем же можно проверить и внутренние страницы сайта, а также следить за позициями в поисковиках.
Фрагмент анализа сайта
Как заполнять SEO-атрибуты изображений
Поисковые системы воспринимают картинку как тег img с атрибутом src, содержащим само изображение, и атрибутом alt, в котором заключено описание картинки. Еще у изображения может быть прописан title с дополнительным описанием.
Не стоит использовать тег figure для картинок, поскольку figure сигнализирует поисковику, что нужно воспринимать этот объект в отрыве от контента страницы.
Атрибут alt
Alt — это описание изображения. Alt дает поисковику полезную информацию о тематике и релевантности изображения. Он должен содержать текстовое описание того, о чем картинка, что на ней изображено. Alt должен быть таким, что если удалить картинку со страницы и поставить вместо нее текст атрибута, он органично впишется в контекст.
Как заполнять alt для картинки?
Каким должен быть alt изображения:
Alt картинки, дублирующий заголовок страницы, сигнализирует поисковым ботам, что картинку нужно проигнорировать, она нужна для декорации. Если это новости и нет цели попасть в Google Картинки, можно так и сделать. Если хочется получить трафик из Google Картинок, лучше сделать изображение частью контента, дать понять ботам, что оно помогает раскрыть смысл.
Неудачные варианты:
Нет текста в alt — img src=»https://pr-cy.ru/news/p/sobaka.jpg»-
Переспам — img src=»https://pr-cy.ru/news/p/sobaka.jpg» alt=»собака щенок собачка маленькая собачка ретривер лабрадор волкодав сеттер пойнтер корм для собак дешевый корм для собак еда для собак»
Удачный вариант:
Описание картинки, из которого понятно, что на ней происходит — img src=»https://pr-cy.ru/news/p/sobaka.jpg» alt=»собака породы лабрадор приносит палку хозяину»
Вариант заполнения alt
Что делать для мультиязычных сайтов, советует Джон Мюллер:
«Использовать одну и ту же картинку (с одного URL) мы разрешаем. Что касается атрибута Alt, он должен быть локализован, то есть переведен в соответствии с языком страницы, где будет использоваться изображение».
Атрибут title
Title — тоже описание картинок, но для пользователей. Оно выводится при наведении курсора на изображение. В title лучше писать короткую фразу, поясняющую, что происходит на картинке. Но вообще заполнение этого атрибута не обязательно — на SEO он не влияет, может разве что быть полезным читателям.
Заполненный title
Название файла
В Справке Google написано, что название файла тоже важно, поэтому нужно переименовывать файлы перед загрузкой. Название может выполнять ту же функцию, что и заголовки с подписями, так что вариант sobaka.jpg лучше IMG00023.JPG, поскольку передает содержание картинки.
Название должно быть написано на английском языке или в транслитерации, вместо пробелов и нижних подчеркиваний используйте дефисы.
Итак, оптимизированное изображение, которое будет полезно для SEO вашего сайта, должно быть качественным и крупным, для мобильного просмотра нужны отдельные превью. Картинки лучше загружать асинхронно, сжать файл с максимальным сохранением качества и подбирать формат под браузер. Тег alt должен содержать ключевые слова и быть релевантным текстовому фрагменту, который окружает картинку, также важно название файла.
Дополните советы в комментариях: как вы оптимизируете картинки для своих проектов?