Прогрессивный jpeg против базового jpeg

Проблема с производительностью

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

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

На бескрайних просторах интернета можно найти большое количество мобильных
сайтов, которые такие же по размеру или даже больше, чем их десктопные версии.
Гай Подъярный провел несколько замеров с разницей в год, и не сказать,
чтобы ситуация улучшалась: в 2011 86% мобильных сайтов были такого же
размера или больше, а в 2012 эта цифра уменьшилась до 72%, но средний вес
сайта увеличился. Дэйв Руперт очень тонко обозначил проблему в своей статье
“Больше пикселей — больше проблем”.

Еще одна сложность: предварительная загрузка в браузерах

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

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

Из-за предзагрузки большинству нужно либо решение на бэк-энде
(чтобы опередить предзагрузку) — или специальная разметка и JavaScript.

Определение пропускной способности

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

W3C работает над Network Information API, которая в будущем может очень
пригодиться, но на данный момент поддерживается только очень ограниченным
набором устройств (и никем из популярных). В нескольких решениях для отзывчивых
картинок эта API уже используется, но я не думаю, что ее будут широко применять
до того, как большее количество устройств начнет его поддерживать. Измерять
скорость работы сети сложно, и, как отмечает Йоав Вайс в своей статье в
Smashing Magazine, надежные «медиа-запросы для пропускной способности сети» вряд
ли можно будет точно реализовать в ближайшем будущем.

Foresight.js Адама Брэдли использует JavaScript для того, чтобы
протестировать, сколько браузер будет загружать картинку в 50 КБ, и потом
сохраняет эту информацию для того, чтобы вы могли принимать решения относительно
пропускной способности сети. Но у этого подхода есть несколько маленьких
недостатков: к весу страницы прибавляется 50 кб, и библиотека блокирует загрузку
остальных изображений, пока не скачается тестовое. Многие из решений для
отзывчивых изображений, которые включают определение пропускной способности
сети, используют Foresight.js или похожие приемы.

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

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

Правильная оптимизация должна обеспечивать следующие критерии:

1. Уникальность рисунка/фотографии.
2. Сжатие картинки (снижение ее размеров).
3. Удаление лишних данных о свойствах изображения.
4. Грамотное масштабирование рисунка/фотографии на интернет-странице.
5. Обеспечение оптимального формата изображения.
6. Грамотную цветность.

Рассмотрим каждый из приведенных здесь критериев более подробно.

1. Уникальность рисунка/фотографии

За уникальность картинок на сайтах веб-мастера борются еще не так активно, как за уникальность текстов. Но постепенно движение за соблюдение этого требования в отношении изображений набирает силу. В его авангарде идет ресурс Tineye.com. Многие веб-мастера используют этот ресурс, так с его помощью оптимизация изображений для Web по критерию «уникальность» осуществляется быстро и просто.

2. Снижение размеров картинки (сжатие)

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

Но при этом для веб-мастера важно максимально сохранить качество изображения.

3. Удаление лишних метаданных (ненужных сведений о рисунке)

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

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

4. Грамотное масштабирование рисунка/фотографии на интернет-странице

Данный критерий оптимизации изображений предполагает, что исходные размерные параметры фотографии, загруженной на хостинг, должны соответствовать размерам отображаемого на странице изображения. К примеру, картинку с оригинальными размерами 1800×1200 стоит уменьшить перед загрузкой до 600×400, чтобы отобразить на интернет-странице в уменьшенном виде.

5. Оптимальный формат изображений

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

6. Цветность

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

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

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

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

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

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

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

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

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

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

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

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

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

Загружайте на сайт изображения в формате .jpg.

Форматы изображений и их влияние на SEO

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

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

Давайте рассмотрим самые популярные форматы и проанализируем их особенности:

• JPEG — самый широко используемый тип файла, благодаря сжатию позволяет сохранять компромисс между качеством и размером.
• PNG — сохраняет лучшее качество, но весит больше. Принято использовать JPEG для фотографий и PNG — для всего остального, включая инфографики и элементы дизайна.
• BMP — формат, также позволяет передавать высокое качество изображений. Такие файлы нельзя сжать, как JPEG и PNG.
• WebP — относительно новый формат, многообещающий в плане компрессии. Благодаря существенному уменьшению размера можно достигнуть впечатляющего улучшения скорости: например, после перехода на WebP для миниатюр YouTube ускорил загрузку в 10 раз. Но пока что не все браузеры поддерживают этот тип изображений. Возможное решение этой проблемы — плагины типа EWWW Image Optimizer, которые отображают WebP, если формат поддерживается браузером, и адаптируют изображения под другие форматы при необходимости.
• SVG — формат используется для логотипов и значков (самых мелких визуальных элементов на сайте). Это универсальный формат, но с ним могут быть определенные проблемы, например, в стилях шрифтов. Рекомендуют не использовать встраиваемые SVG (когда код изображения вставляется напрямую в HTML), чтобы Google было легче их индексировать. 
• GIF — тип контента, который может добавить привлекательности веб-странице, увеличить трафик и популярность контента в соцсетях. Поисковики сканируют файлы GIF так же, как другие графические файлы. Недостаток формата очевиден — обычно GIF весят очень много.

Важность сжатия изображений

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

Множество инструментов помогают сжимать файлы с разными настройками (как профессиональный софт типа Photoshop, так и простые онлайн-сервисы типа Imagify). Можно также установить плагин, который будет автоматически сжимать все графические файлы — но убедитесь, что сжатие будет происходить не на стороне сервера сайта.

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

Что такое хорошее время загрузки страницы?

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

Если опираться на Google, лучшая практика — 3 секунды. К сожалению, большинство сайтов далеки от этого идеала.

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

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

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

Вес изображения

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

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

У каждого из способов есть свои сторонники и противники.

Загружайте изображения весом до 100 кб.

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

Выбираем решение

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

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

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

• Нужно ли вам решать проблему с изменением изображения в зависимости от контекста
  (т.е. разные пропорции изображения, разные варианты масштабирования и обрезки
  для разных размеров экрана)?
• Не работаете ли вы с огромным сайтом или CMS, с которыми у вас не получится
  взять и добавить специальную разметку к каждому имеющемуся изображению?
• Все ли картинки уже есть на момент загрузки страницы, или некоторые загружаются
  динамически через JavaScript?
• Хотите ли вы тестировать пропускную способность сети пользователя, чтобы
  определить, достаточно ли быстрое у них соединение для того, чтобы принимать
  изображения в высоком разрешении?
• Требует ли решение платформы, которая вам недоступна (например, jQuery или PHP)?
• Можете ли вы использовать решение на третьей стороне — или вам необходимо,
  чтобы все находилось на вашем хостинге?

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

Как обыграть отсутствие данных

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

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

В чем разница между PWA, веб-приложением и собственным приложением? Как лучше?

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

Подключение к интернету

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

Место для хранения

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

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

Уведомления push

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

Скорость загрузки

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

Могущество

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

Мультиплатформенный

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

Изображения для ретиныСкопировать ссылку

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

Давайте мы на секунду остановимся и подумаем: изображения для ретины чаще всего (хоть и необязательно) нужны для того, чтобы отображение дизайна на телефонах было более четким. У телефонов гораздо меньше памяти, чем у других устройств. Таким образом, изображения для ретины занимают кучу памяти на устройствах, у которых, как известно, лишней памяти немного… Подумайте ещё раз, действительно ли вам нужны изображения для ретина, или вы можете пойти на разумный компромисс?

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

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

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

• Независимость от разрешения
• Можно минифицировать
• Можно сжимать в gzip

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

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

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

Ещё один интересный аспект быстродействия — это его восприятие: дело не только в том, что говорят цифры, но и в том, есть ли ощущение, что сайт быстрый.

Вам наверняка знакома прерывистая загрузка больших JPG-изображений: 100 пикселей картинки загрузилось, пауза, ещё 50, пауза, потом ещё 200, потом — бах! — вся картинка загрузилась.

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

Для того, чтобы создать JPG с прогрессивной загрузкой, нужно всего лишь включить соответствующий флажок в диалоге «Save for Web» в Photoshop — и дело сделано!

Не используйте изображения вообщеСкопировать ссылку

Лучше, чем спрайты, SVG и игнорирование ретины — полный отказ от изображений. Если вы можете сверстать дизайн картинкой со стопроцентной точностью, а повторить его чистым CSS с точностью 75% — лучше выберите CSS-решение (конечно, если для этого не потребуются лишние сто строчек кода!). Если у вас нет картинок — нет и HTTP-запросов, а также это упрощает поддержку сайта. Если вы можете не использовать изображения — не используйте.

Что такое progressive JPEG?

Progressive JPEG – это JPEG-изображение в прогрессивном формате. Прогрессивный формат изображения позволяет браузеру загружать не количественно, а качественно. Другими словами – загружать изображение постепенно, постоянно отображая это изображение с различным качеством от 0 до 100 процентов.

Просто сравните

Рис1. Загрузка изображения в обычном (последовательном) формате

Рис 2. Загрузка изображения в прогрессивном формате

На мой взгляд, progressive JPEG – это чертовски здорово! Знаете, progressive JPEG появился уже очень давно (порядка 10 лет назад), однако сайтов, использующих эту технологию довольно мало, особенно в нашей стране.

И я не знаю почему. На Хабре есть статья на эту тему. Она там лежит аж с 2013 года. Да, на тот момент не так хорошо браузеры поддерживали эту технологию. Но время не стоит на месте. И поэтому уже давно пора переходить на progressive JPEG.

Отложите загрузку скрытых изображений

Частая проблема в Google Speed Test связана именно с отложенной загрузкой скрытых изображений. Особенно явно данная проблема проявляет себя при тестировании скорости загрузки на мобильных устройствах. Рассмотрим несколько основных способов решения данной проблемы.

Оптимизация графики при подготовке контента

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

Еще немного о плейсхолдерах

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

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

Плейсхолдер доминирующего цвета

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

Источник изображения — https://manu.ninja/dominant-colors-for-lazy-loading-images

Извлечь доминирующий цвет можно, как с помощью JavaScript, так и с помощью PHP, используя расширение . Наиболее подробнее об этом можете почитать здесь. Я не буду тут останавливаться подробно, так как это тема для отдельного разговора. Может быть как нибудь в отдельной статье…

Плейсхолдер низкого качества (LQIP)

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

Плейсхолдер низкого качества (LQIP)

Вот HTML-код изображения.

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

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

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

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

• Создавайте логичную URL-структуру для картинок. Как и в URL-структуре всего сайта, URL-адреса для изображений должны соответствовать иерархии сайта и отображать суть изображенного. Имейте в виду, что если вы захотите поменять URL-адреса для уже проиндексированных материалов, поисковикам понадобится время, чтобы заново их проиндексировать.
• Добавляйте структурированные данные. Мы расскажем о них детальнее далее. Если вкратце, то структурированные данные помогают обозначить конкретный тип контента — как продукт или рецепт. 

Так выглядит значок продукта в Google Images:

Учитывайте функцию Безопасного поиска. Поиск картинок в Google предлагает опцию безопасного поиска — скрытия из результатов контента сексуального или жестокого характера. Если изображения на вашем сайте могут интерпретироваться как такой контент, поисковик может скрыть страницы для пользователей, выбравших опцию безопасного поиска. Воспользуйтесь инструментом Vision AI, чтобы понять, как Google распознает элементы изображений. Если на вашем сайте есть изображения, предназначенные для взрослых, отделите их в своей URL-структуре и добавьте на страницы метаданные .

Используйте информативные тексты alt, title, подписи и названия файлов

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

Справка Яндекса тоже подчеркивает важность заполнения alt, title и имен файлов, а также текстов ссылок, ведущих на картинки.

Создавайте карту сайта для изображений. Вы можете включить информацию об изображениях в карту сайта или же создать для них отдельный xml-файл. Это поможет поисковым системам ориентироваться среди вашего контента. Существуют разные сервисы и плагины для генерирования карт сайта. Больше о файлах Sitemap для изображений читайте в Центре Google Поиска.

Мониторьте скорость мобильной страницы

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

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

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

Вы можете начать с использования инструмента Google Test My Site для аудита скорости страницы. Для начала просто введите URL.

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

Windows для одного языка

«Майкрософт» лицензирует ее использование только компаниям производителям. В результате, заказав себе новый ноутбук «АСУС» на AliExpress вы можете получить его с предустановленной OS Home Single Language. Такая система позволяет добавить только язык раскладки клавиатуры. Исправить ситуацию можно с помощью автономного пакета локализации.

dism /online /add-package /packagepath:c:\lp_uk-UA_x64.cab

На скриншоте показан результат выполнения. Перезагрузка выполняется сразу после ввода буквы «Y» – Enter нажимать не потребуется.

1. Следующей командой проверяем установленные в системе локализации:

dism /online /get-packages

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

1. Вводим команду для удаления первичного основного языка:

dism /online /remove-package /packagename:Microsoft-Windows-Client-LanguagePack-Package~31bf3856ad364e35~amd64~ru-RU~10.0.16299.15

После фразы «packagename:» в строку надо поставить ранее скопированный идентификатор пакета. В результате выполнения команды русский язык должен пропасть, а система после перезарузки начнет использовать украинскую локаль.

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

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

Удобная напоминалка вместо диалогового окна

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

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

«Королевский» апдейт Google

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

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

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

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

Ошибки со шрифтами на Фрипик

Иллюстрации могут быть заблокированы из-за следующих вещей:

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

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