Улучшаем восприятие производительности сайта изменение размера изображения по требованию


Оглавление (нажмите, чтобы открыть):

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

Недавно я провел аудит на своем веб-сайте с помощью Google Developer Tools. Мои изображения имеют одинаковый размер (500 горизонтальных по 300 вертикальных пикселей), поэтому я подумал, что было бы лучше, если бы я не учитывал атрибуты размера изображения, так как не было бы необходимости рассчитывать размер изображения, когда он уже имеет правильный размер.

В разделе «Использование сети» укажите размеры изображения. Я вижу следующее

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

4 ответа

Браузеры загружают данные параллельно и пытаются начать рендеринг страницы как можно скорее.

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

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

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

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

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

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

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

Инструменты разработки Google — это руководство, и вам не нужно принуждать все, что вы читаете на своем сайте, на самом деле некоторые вещи устарели. Большинство чувствительных веб-сайтов не используют width или height , потому что они хотят, чтобы изображения адаптировались к размеру экрана и с использованием фиксированной ширины и высоты с помощью , который ослабит пользовательский интерфейс, и Google объявил об этом один из самых важных факторов.

Временное решение CSS

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

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

Я предполагаю, что это будет выглядеть примерно так:

Статический дизайн .ic

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

Я просто ответил на аналогичный вопрос на WordPress Stack Exchange. Отправляя его здесь (администраторы /модераторы: если это не разрешено, дайте мне знать правильный способ помочь).

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

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

В большинстве случаев использование ширины и max-width:100 будет выполнять эту работу, но этот пост от Smashing Magazine имеет интересную технику: вместо использования max-width: 100% вы можете использовать The Padding -Bottom Hack :

«С помощью метода мы определяем высоту как меру относительно ширины. Заполнение и маржа имеют такие внутренние свойства, и мы можем использовать их для создания пропорций для элементов, которые не содержат в них контента. Поскольку у подкладки есть эта возможность, мы можем установить, чтобы нижнее покрытие было по отношению к ширине элемента. Если мы также установим высоту 0, мы получим то, что хотим. [. ]

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

Процесс выглядит примерно так:

  1. прочитать .html-файл
  2. из .html заголовка файла, читайте файлы .css, .js (.js должны ПОСЛЕ .css . )
  3. читайте img и скрипт со страницы

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

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

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

Супер-разрешение — это результат восстановления изображения с высоким разрешением (HR) из данного изображения с низким разрешением (LR). В этой статье приведены основные подходы для решения задачи генерации супер-разрешения изображения с учителем. Изображение может иметь «более низкое разрешение» из-за меньшего пространственного разрешения (то есть размера) или из-за ухудшения качества (такого как размытие). Мы можем связать изображения HR и LR с помощью следующего уравнения: LR = degradation(HR).

Перевод статьи An Introduction to Super Resolution using Deep Learning, автор — Bharath Raj. Ссылка на оригинал — в подвале статьи.

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

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

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

Подготовка данных

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

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

Важно отметить, что рекомендуется хранить изображение HR в несжатом (или сжатом без потерь) формате. Это должно предотвратить ухудшение качества изображения HR из-за сжатия с потерями, которое может дать низкую производительность.

Типы сверток

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

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

Методы супер-разрешения

Предварительное увеличение разрешения (Pre-Upsampling)

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

Обыкновенная Pre-Upsampling сеть

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

Пост-увеличение разрешения (Post-Upsampling)

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

Преимущество этого метода состоит в том, что извлечение признаков выполняется в пространстве меньшего размера (перед повышением разрешения), и, следовательно, вычислительная сложность уменьшается. Кроме того, используя обучаемый слой upsampling, модель можно обучать end-to-end.

Прогрессивное увеличение разрешения (Progressive Upsampling)

В группе методов с пост-увеличением разрешения, хотя вычислительная сложность и была снижена, но использовалась только одна свертка с повышением размерности. Это усложняет процесс обучения при больших коэффициентах масштабирования. Для устранения этого недостатка, в таких работах, как сеть Laplacian Pyramid SR (LapSRN) и Progressive SR (ProSR), была принята концепция прогрессивного увеличения разрешения. Модели в этом случае используют каскад CNN для постепенного восстановления изображений с высоким разрешением при меньших коэффициентах масштабирования на каждом этапе.

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

Итеративное понижение и повышение разрешения

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

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

Функции потерь

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

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

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

Пиксельная ошибка (Pixel Loss)

Пиксельная ошибка — это самый простой класс функций потерь, где каждый пиксель в сгенерированном изображении напрямую сравнивается с каждым пикселем в настоящем изображении. Используются популярные функции потерь, такие как потери L1 или L2, или расширенные варианты, такие как потери Smooth L1.

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

Ошибка содержимого (Content Loss)

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

Вышеупомянутое уравнение вычисляет потерю контента между настоящим и сгенерированным изображением, учитывая предварительно обученную сеть (Φ) и слой ( l ) этой предварительно обученной сети, на котором вычисляются потери. Эта потеря способствует тому, что сгенерированное изображение воспринимается как настоящее изображение. По этой причине эта ошибка также известна как ошибка восприятия (perceptual loss).

Ошибка текстуры

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

Корреляция между картами признаков представлена ​​матрицей Грама (G), которая является внутренним произведением между векторизованными картами объектов i и j на слое l (показано выше). Как только матрица Грамма рассчитана для обоих изображений, вычисляется ошибка текстуры:

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

Полная вариационная ошибка

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

Здесь i, j, k перебирает высоту, ширину и каналы соответственно.

Состязательная ошибка

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

Учитывая набор целевых образцов, Генератор пытается создать образцы, которые могут обмануть Дискриминатора, заставив его поверить, что они реальны. Дискриминатор пытается отличить реальные (целевые) выборки от поддельных (сгенерированных) выборок. Используя этот итеративный подход к обучению, мы в конечном итоге получим Генератор, который действительно хорош в создании образцов, подобных целевым образцам. На следующем рисунке показана структура типичного GAN.

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

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

Метрики

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

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

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

Пиковое отношение сигнал/шум (PSNR) — это обычно используемая объективная метрика для измерения качества восстановления преобразования с потерями. PSNR обратно пропорционально логарифму средней квадратичной ошибки (MSE) между настоящим и сгенерированным изображением.

В приведенной выше формуле L — максимально возможное значение пикселя (для 8-битных изображений RGB — 255). Неудивительно, что, поскольку PSNR заботится только о разнице между значениями пикселей, он не так хорошо отражает воспринимаемое качество.

Структурное сходство (SSIM) — это субъективная метрика, используемая для измерения структурного сходства между изображениями на основе трех относительно независимых сравнений, а именно: яркости, контрастности и структуры. Абстрактно, формула SSIM может быть показана как взвешенное произведение яркости, контраста и структуры, вычисленных независимо.

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

В приведенной выше формуле μ(I) представляет среднее значение конкретного изображения, σ(I) представляет стандартное отклонение конкретного изображения, σ(I, I’) представляет ковариацию между двумя изображениями и C1, C2 задают константы, чтобы избежать нестабильности. Для краткости, значение терминов и точный вывод не объяснены в этой статье, но заинтересованный читатель может ознакомиться с ними в разделе 2.3.2 в этой статье.

Из-за возможного неравномерного распределения статистических характеристик или искажений изображения локальная оценка качества изображения более надежна, чем его оценка в глобальном масштабе. Среднее значение SSIM ( MSSIM), которое разбивает изображение на несколько окон и усредняет значение SSIM, полученное в каждом окне, является одним из таких методов оценки качества на локальном уровне.

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

Другие результаты IQA

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

  • Средняя оценка мнений (MOS)
  • Оценка на основе задач
  • Критерий достоверности информации (IFC)
  • Визуальная достоверность информации (VIF)

Заключение

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

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

Поделиться этим постом

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


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

1. Зачем оптимизировать изображения

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

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

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

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

2. Техническая оптимизация изображений

2.1. Форматы

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

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

  • Для фото используйте формат JPG.
  • Для создания векторной графики и сплошной заливки подходит формат SVG. Если векторные изображения недоступны, попробуйте WebP или PNG.
  • Чтобы отобразить больше цветов и добиться лучшего коэффициента сжатия, выбирайте PNG вместо GIF.
  • Для видеороликов используйте тег .

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

2.2. Атрибут alt

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

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

Для оптимизации атрибутов alt воспользуйтесь следующими рекомендациями:

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

2.2.1. Как проверить наличие атрибута alt у изображений с помощью Netpeak Spider

С помощью краулера Netpeak Spider вы можете найти все изображения без атрибута alt на своём сайте. Для этого:

  • Откройте Netpeak Spider, на вкладке «Параметры» в разделе «Контент» отметьте параметр «Изображения». Запустите сканирование сайта.
  • Дождитесь окончания сканирования. В случае обнаружения ошибки «Изображения без атрибута alt» кликните по её названию на боковой панели, чтобы ознакомиться с перечнем URL, на которых она присутствует.
  • В отчёте «Изображения» будут собраны все URL страниц, на изображениях которых отсутствует атрибут alt.

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

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

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

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

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

    2.3.1. Сервисы для оптимизации изображений

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

    COMPRESSOR.io

    Онлайн-инструмент, с помощью которого вы легко сможете уменьшить вес изображения без потери качества. Поддерживает четыре формата: JPEG, PNG, GIF, SVG. После обработки изображения вы сможете сохранить файл на свой компьютер, в Dropbox или на Google Диск.

    Compresser JPEG

    Бесплатный сервис, который поддерживает JPEG, PDF и PNG-форматы и позволяет за раз оптимизировать до 20 изображений.

    Tiny PNG

    С помощью этого сервиса вы можете сжать разом до 20 изображений, вес каждого из которых не должен превышать 5 MB. Tiny PNG может уменьшить вес вашего изображения до -90%.

    2.4. Title изображения

    Атрибут title — текст этого атрибута появляется при наведении мыши на изображение и не влияет на ранжирование. Главное предназначение атрибута — дать подсказку читателям о содержимом просматриваемого изображения.

    Рекомендации по составлению title изображения:

    • Title файла не должен быть спамным или содержать малопонятные символы.
    • Атрибут title должен полностью отражать содержимое изображения.
    • Не стоит прописывать слишком длинное описание изображения — постарайтесь сделать атрибут title лаконичным и понятным для пользователей.

    2.5. Адрес изображения

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

    2.6. Микроразметка

    Иногда размеченные изображения могут попадать в выдачу.

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

    2.7. Уникальность и авторские права

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

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

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

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

    2.8. sitemap-image.xml

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

    Для картинок вы можете создать новый файл Sitemap или обновить уже существующий на вашем сайте. С помощью встроенного инструмент генератор Sitemap в Netpeak Spider можно в несколько кликов генерировать файлы Sitemap на основе рекомендаций Google и Яндекса.

    3. Оптимизация картинок для юзабилити

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

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

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

    3.1. Связь с окружающим контентом

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

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

    3.2. Lazy loading

    Lazy loading (ленивая загрузка) — это метод, который откладывает загрузку контента во время прогрузки страницы. Таким образом загружаются лишь файлы, которые видно на экране страницы, а все остальные файлы остаются «за кадром», пока пользователь не доскроллит страницу до них.

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

    Рекомендации Google по реализации lazy loading

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

    3.3. Изображения на адаптивных сайтах

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

    Адаптивными страницами обычно удобнее пользоваться, так как их можно просматривать на различных устройствах. Более подробные рекомендации о работе с изображениями на адаптивном сайте читайте в рамках курса «Основы веб-дизайна».

    Изображения размещаются на адаптивной странице с помощью тегов или

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

    4. Бесплатные фотостоки

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

    KABOOMPICS

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

    Особенность фотостока: вы можете искать фото в соответствии с нужной цветовой гаммой.

    Gratisography

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

    Особенность фотостока: есть поиск по категориям.

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

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

    Основные советы по оптимизации изображений:

    • JPEG, GIF и PNG — основные форматы изображений, воспринимаемые поисковиками.
    • Атрибуты img alt и title для картинок обязательны к заполнению. Сделайте их максимально лаконичными и точно описывающими ваше изображение.
    • У вас должно быть разрешение на использование уникальных изображений.
    • Воспользуйтесь специальными сервисами для сжатия размера картинок без потери качества. Это оптимизирует скорость загрузки вашего сайта.
    • Позаботьтесь о связи изображений с окружающим текстовым контентом.

    Расскажите в комментариях, как вы оптимизировали изображения для проектов, которые непосредственно связаны с большим количеством изображений? 🙂

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

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

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

    Удаление и замена изображений


    • Удалите ненужные изображения.
    • При возможности применяйте эффекты CSS3.
    • Используйте веб-шрифты вместо кодировки текста в изображениях.

    Прежде всего задайте себе вопрос: действительно ли это изображение необходимо? Хороший дизайн должен быть простым и не ухудшать производительность. Лучше всего просто удалить ненужное изображение, поскольку оно весит гораздо больше байтов по сравнению с HTML, CSS, JavaScript и другими ресурсами на странице. При этом одно изображение в нужном месте может заменить длинный текст, поэтому вам нужно самостоятельно найти баланс и принять правильное решение.

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

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

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

    Векторные и растровые изображения

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

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

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

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

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

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

    Оптимизация для экранов с высоким разрешением

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

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

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

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

    Разрешение экрана Всего пикселей Размер файла без сжатия (4 Б на пикс.)
    1x 100 x 100 = 10 000 40 000 Б
    2x 100 x 100 x 4 = 40 000 160 000 Б
    3x 100 x 100 x 9 = 90 000 360 000 Б

    Когда мы вдвое увеличиваем разрешение экрана, общее количество пикселей возрастает сразу в четыре раза: в два раза по вертикали и в два по горизонтали.

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

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

    • SVG — это формат изображений на основе XML
    • SVG-файлы нужно минифицировать для уменьшения размера.
    • Сжимайте SVG-файлы с помощью GZIP.

    Все современные браузеры поддерживают формат SVG (Scalable Vector Graphics). Это формат изображений на основе XML для двухмерной графики. Разметку SVG можно встроить прямо в страницу или на внешний ресурс. В свою очередь, файл SVG можно создать с помощью любого ПО для векторного рисования или вручную в текстовом редакторе.

    Пример выше отрисовывает простую круглую форму с черной границей и красным фоном. Она была экспортирована из Adobe Illustrator. Легко догадаться, что она содержит множество метаданных, например информацию о слоях, комментарии и пространства имен XML, которые чаще всего не нужны для отобрадения ресурса в браузере. В результате, следует минифицировать файлы SVG с помощью инструмента svgo.

    Например, svgo уменьшает размер приведенного выше файла SVG на 58% с 470 до 199 Б. Кроме того, поскольку SVG — это формат на основе XML, мы может применить сжатие GZIP для уменьшения его размера при передаче. Убедитесь, что на вашем сервере настроено сжатие SVG-ресурсов.

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

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

    Растровое изображение — это просто двухмерная сетка отдельных пикселей . Например, изображение 100×100 пикселей — это последовательно из 10 000 пикселей. В каждом из пикселей содержатся значения RGBA: красного (R), зеленого (G) и синего (B) канала, а также альфа-канала, или канала прозрачности (A).

    Браузер устанавливает 256 значений (оттенков) для каждого канала, которые в пере счете занимают 8 битов на канал (2 ^ 8 = 256) и 4 байта на пиксель (4 канала x 8 бит = 32 бита = 4 байта). Таким образом, зная размеры сетки, мы легко можем вычислить размер файла:

    • Изображение 100 x 100 пикс. состоит из 10 000 пикселей
    • 10 000 пикс. x 4 Б = 40 000 Б
    • 40 000 Б / 1024 = 39 КБ

    Может показаться, что 39 КБ — это совсем немного для изображения размером 100×100 пикселей. Однако при увеличении размера файл будет весить гораздо больше, и на его скачивание придется потратить много времени и ресурсов. Сейчас это изображение не сжато. Что можно сделать, чтобы уменьшить его размер?

    Один из простых способов оптимизации изображения — снизить глубину цвета с 8 битов на канал, выбрав палитру меньшего размера. Установив глубину в 8 битов на канал, мы получаем 256 значений для канала и 16 777 216 (2563) цветов. Может, стоит уменьшить палитру до 256 цветов? Тогда нам будет нужно всего 8 бит для всех каналов RGB и только 2 байта на пиксель, а не 4, как раньше. Нам удалось сжать изображения в два раза!

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

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

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

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

    Сжатие данных с потерями и без потерь

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

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

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

    1. Сжатие изображения [с потерями](https://ru.wikipedia.org/wiki/Сжатие_данных_с_потерями) , при котором удаляются некоторые данные пикселей.
    2. Сжатие изображения [без потерь](https://en.wikipedia.org/wiki/Lossless_compression) , при котором данные пикселей сжимаются.

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

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

    При использовании сжатия с потерями, например JPEG, вы сможете выбрать настройки качества (вроде ползунка Сохранить для Web в Adobe Photoshop). Обычно это значение от 1 до 100, которое определяет применение алгоритмов сжатия с потерями и без. Не бойтесь снижать качество: часто изображение по-прежнему хорошо выглядит, а размер файла становится значительно меньше.

    Выбор формата изображения

    • Выберите подходящий стандартный формат: GIF, PNG или JPEG.
    • Попробуйте установить разные настройки для каждого формата (качество, размер палитры и т. д.) и выберите наиболее подходящие.
    • Для современных клиентов добавьте ресурсы в форматах WebP и JPEG XR масштабированные изображения:
    • Масштабирование изображений — один из самых простых и эффективных методов оптимизации.
    • Если вы используете изображения большого размера, пользователь может скачивать лишние данные.
    • Reduce the number of unnecessary pixels by scaling your images to their display size Снизьте количество ненужных пикселей, уменьшив изображение до отображаемого размера.

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

    Формат Прозрачность Анимация Браузер
    GIF Да Да Все
    PNG Да Нет Все
    JPEG Нет Нет Все
    JPEG XR Да Да IE
    WebP Да Да Chrome, Opera, Android

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

    1. Изображение должно быть анимированным? Тогда выбирайте формат GIF.
      • Цветовая палитра GIF состоит всего из 256 цветов. Это недостаточно для большинства изображений. Кроме того, формат PNG-8 лучше сжимает изображения с маленькой палитрой. Таким образом, выбирайте GIF, только если вам требуется анимация.
    2. Нужно сохранить все мелкие детали в самом высоком разрешении? Используйте PNG.
      • В формате PNG не применяется сжатие с потерей данных, не считая выбора размера палитры. Благодаря этому изображение сохраняется в самом высоком качестве, но весит гораздо больше, чем файлы других форматов. Используйте этот формат только там, где это необходимо.
      • Если изображение состоит из геометрических фигур, конвертируйте его в векторный (SVG-) формат!
      • Избегайте текста в изображениях. Его нельзя выбрать, найти или увеличить. Если текст необходим для создания дизайна, используйте веб-шрифты.
    3. Вы оптимизируете фотографию, скриншот или изображение похожего типа? Используйте JPEG.
      • В JPEG используется комбинация сжатия с потерями и без потерь для уменьшения размера файла. Чтобы выбрать лучшее сочетание качества и размера изображения, попробуйте установить несколько уровней качества JPEG.

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

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

    • Некоторые сети доставки контента предоставляют услуги по оптимизации изображений, в том числе предоставление файлов в JPEG XR и WebP.
    • Некоторые инструменты с открытым кодом, например PageSpeed для Apache и Nginx, автоматически производят оптимизацию, преобразование и доставку соответствующих ресурсов.
    • Вы можете добавить дополнительную логику приложения, чтобы определить клиент и его поддерживаемые форматы, а затем отправить оптимальный вариант ресурса.

    Обратите внимание, что если вы используете Webview для отрисовки контента в нативное приложении, тогда вы можете полностью управлять клиентом и использовать только WebP. В приложениях Facebook, Google+ и т. д. используются именно WebP-ресурсы, так как они действительно повышают производительность. Чтобы узнать больше об этом формате, посмотрите презентацию WebP: Deploying Faster, Smaller, and More Beautiful Images от Google I/O 2013.

    Инструменты и выбор параметров

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

    Инструмент Описание
    gifsicle создает и оптимизирует GIF-изображения
    jpegtran оптимизирует JPEG-изображения
    optipng сжимает PNG без потерь
    pngquant сжимает PNG с потерями

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

    Масштабирование передаваемых изображений


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

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

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

    Исходный размер Отображаемый размер Ненужные пиксели
    110 x 110 100 x 100 110 x 110 — 100 x 100 = 2100
    410 x 410 400 x 400 410 x 410 — 400 x 400 = 8100
    810 x 810 800 x 800 810 x 810 — 800 x 800 = 16100

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

    Список методов оптимизации

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

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

    • Выбирайте изображения в векторных форматах. Их качество не зависит от разрешения и масштаба, поэтому они подходят для больших экранов и разных типов устройств.
    • ** Минифицируйте и сжимайте SVG-ресурсы.** Многие графические приложения добавляют XML-разметку, которая часто содержит ненужные метаданные. Ее можно удалить. Убедитесь, что на серверах настроено GZIP-сжатие для SVG-ресурсов.
    • Выбирайте наиболее подходящие растровые форматы. Определите необходимые требования к изображениям и выберите нужный формат для каждого ресурса.
    • Пробуйте разные настройки качеств для растровых форматов. Не бойтесь снижать качество: часто изображение по-прежнему хорошо выглядит, а размер файла становится значительно меньше.
    • Удаляйте ненужные метаданные. Многие растровые изображения содержат лишнюю информацию о ресурсе: геоданные, сведения о камере и т. д. Для их удаления используйте соответствующие инструменты.
    • Масштабируйте изображения. Уменьшайте файлы на сервере, чтобы исходный и отображаемый размеры были практически одинаковы. Обратите особое внимание на большие изображения. Если их масштабирует браузер, производительность вашего сайта значительно снижается.
    • Автоматизируйте. Используйте надежные инструменты и ПО, которые будут автоматически оптимизировать изображения на вашем сайте.

    Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

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

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

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

    История вопроса

    В начале своей истории, когда компьютеры были очень сильно привязаны к бумаге, необходим был универсальный параметр, который связывал бы размер изображения на бумаге и на экране. Компания Apple предложила параметр 72 точки на дюйм (dpi): при физических параметрах экранов Apple Macintosh того времени изображение на экране и на бумаге имело одинаковый физический размер. Microsoft для Windows была предложена система «субъективного восприятия»: элемент на экране и на бумаге должен казаться одинаковым с учетом того, что экран находится от глаз на треть дальше, чем мы держим лист бумаги. Так появился параметр 96 dpi (96 — виртуальный пересчет 72 на большее расстояние до экрана), во многом определивший дальнейшее развитие интерфейсов ПК на базе Windows.

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

    Вторая большая проблема — комфортный размер изображения на экране. На ЭЛТ-мониторах можно было выставлять любое комфортное разрешение, не жертвуя качеством картинки. Однако ЖК-мониторы, пришедшие им на смену, хорошо работают только в одном разрешении. А производители ЖК-мониторов в угоду маркетингу стали изобретать самые разные сочетания физического размера и разрешения: у ноутбуков разрешение 1366×768 используется при диагонали экрана от 11,6 до 15,6 дюймов, у десктопов мониторы с разрешением 1920×1080 могут быть от 21,5 до 27 дюймов.

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

    Алгоритмы масштабирования в Windows

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

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

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

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

    • Старый алгоритм (окончательно оформился в Windows XP): система допускает любой масштаб с шагом в 1%. Система сообщает приложению текущий dpi десктопа и сама занимается масштабированием системных ресурсов (в том числе задействованных в приложении). Приложение само занимается масштабированием своих ресурсов.
    • Новый алгоритм (внедрен в Vista, используется в последующих системах): если приложение оптимизировано для масштабирования и сообщает об этом системе (это называется dpi-aware), то система сообщает ему корректный текущий dpi интерфейса, масштабирование приложение осуществляет самостоятельно. Если приложение само не уведомляет систему о поддержке масштабирования, то включаются системные алгоритмы — либо старый, либо новый (зависит от настроек системы и выбора пользователя). Грубо говоря, новый механизм берет уже полностью сформированное изображение окна приложения при масштабе по умолчанию (96 dpi) и растягивает его до размера, соответствующего текущему масштабированию, как обычную картинку. Подробнее о том, когда какой механизм задействуется, как они работают и какие у каждого плюсы и минусы, можно почитать во второй части исследования.

    Что касается нового интерфейса Windows 8 (Metro), то там все работает совершенно по-другому. Система сама определяет параметры экрана (его физический размер и разрешение) и сама выбирает нужный масштаб, у пользователя нет прямого контроля над этим процессом. Для приложений существует три базовых масштаба: 100%, 140% и 180%, и при выполнении всех требований должна обеспечиваться корректная работа при любом масштабе. То, что установка приложений под новый интерфейс возможна только из магазина Windows Store, дает Microsoft очень сильный рычаг контроля над разработчиками: приложение, не соответствующее требованиям (в т. ч. по масштабированию), просто не будет в него допущено. Подробнее об этом можно почитать во второй части обзора.

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

    Можно ли пользоваться экраном с высоким PPI?

    Устройства с высоким показателем PPI (pixel per inch, пикселей на дюйм) выходят на рынок уже сейчас. Поэтому перед тем, как переходить к выводам, давайте суммируем впечатления от использования ноутбука с экраном с высокой плотностью пикселей. Помимо Acer Aspire S7 я использовал Lenovo Helix — это трансформер, планшет с доком, превращающийся ультрабук. Оба имеют 11,6-дюймовые экраны с разрешением Full HD. PPI для этого размера экрана составляет 189,91 (примерно), у новых Apple Macbook Pro Retina 15 — 220, у Retina 13 — 227. В общем, по цифрам эти экраны немного отстают от ноутбуков Apple. Если поднести экран к глазам, то пиксели действительно различить можно — однако при реальной работе и на такой диагонали экрана вы их, скорее всего, не увидите.

    С новым интерфейсом Windows 8 проблем нет: элементы интерфейса и шрифты по размерам примерно такие же, как на экране планшета с той же диагональю, но разрешением 1366×768. Однако дисплей с высоким разрешением выдает красивую картинку с гладкими линиями и окружностями шрифтов без заметных «лесенок» — и в этом случае если поставить два устройства рядом, то разница очень заметна. Таким образом, проблем с работой в новом интерфейсе быть не должно.

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

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

    Из приложений, так сложилось, я пользовался в основном MS Office и HTML-редактором Dreamweaver CS 5.5. Ситуация с этими приложениями полярная: одно масштабируется просто отлично, второе — отвратительно (впрочем, продукция Adobe вообще славится, скажем так, неоптимальными решениями). Об обнаруженных проблемах мы уже подробно говорили в практическом исследовании (в третьей части). Из других приложений запомнился (и немало забавлял меня) плеер (на той системе был установлен только КMPlayer): масштабироваться его интерфейс отказался, так что настройки и информацию можно было разглядеть только с лупой. Впрочем, с основной своей обязанностью он справлялся.

    Сложнее оказалось с интернетом, ибо приходится активно пользоваться масштабированием. Детальное описание работы разных браузеров можно прочитать в четвертой части. Что же касается личных впечатлений, то жест увеличения масштаба становится лучшим другом, быстро осознаешь разницу между масштабированием интерфейса и страницы (и насколько важно и то, и другое), начинаешь различать нюансы в схемах масштабирования различных браузеров… Просмотр страниц с настройками «по умолчанию» на этом экране просто невозможен, поэтому масштабирование придется задействовать обязательно. В результате я очень много стал пользоваться браузером Internet Explorer, который допускает масштабирование и пальцами, и через настройки (причем с разными алгоритмами), это очень удобно. Также отмечу, что ситуация на рынке меняется очень быстро, и любые рассказы о ПО быстро устаревают. Например, при эксплуатации Acer Aspire S7 браузеры вели себя не так, как при тестировании. Просто знайте, что масштабирование вам понадобится обязательно, и то, насколько удобно и качественно оно реализовано, во многом предопределяет выбор браузера.

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

    • В ситуациях, когда приложение адаптировано, вы получаете примерно те же преимущества, что и от использования экрана Retina: более ясную и четкую картинку, более четкие шрифты, меньшую усталость глаз.
    • Для нового интерфейса Windows 8 и большинства приложений под него разрешение Full HD на экране с диагональю 11,6 дюйма не увеличивает доступное экранное пространство для размещения информации — оно остается таким же, как в случае разрешения 1366×768. Увеличивается качество отображения элементов на экране. Количество информации, скорее, зависит от физического размера экрана, а не от его разрешения.
    • На традиционном десктопе по умолчанию вы получаете очень-очень мелкий (практически нечитаемый) интерфейс системы и приложений при масштабе 100%, что крайне неудобно. Зато у вас появляется возможность настроить масштаб интерфейса системы и приложений под себя, ориентируясь на свои потребности и свои особенности зрения.
    • Большинству пользователей, как мне кажется, будет достаточно компромиссного варианта 120 dpi.
    • Правильность масштабирования приложений в подавляющем большинстве случаев зависит от разработчиков.
    • Следует учитывать, что если для работы на традиционном десктопе вы пользуетесь какими-то специфическими приложениями, не относящимися к мейнстриму, то есть очень большой шанс, что программисты проигнорировали требования к поддержке масштабирования, и при попытке выставить комфортный для глаз размер элементов и шрифтов ситуация не улучшится, а ухудшится. Поэтому стоит заранее проверить способность таких приложений к масштабированию.

    Выводы

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

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

    В первую очередь — свое значение потеряет пиксель.

    И никаких больше пикселей

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

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

    Однако легко сказать «избавиться»: мозги большинства современных разработчиков тоже «отформатированы» старой школой, и они тоже воспринимают пиксель как меру всему (разработчики для настольных систем — уж точно). Поэтому велик соблазн сначала нарисовать интерфейс под «масштаб 100%» с определенными параметрами в пикселях, а уже после этого думать, как он будет масштабироваться. Но это неправильный подход — как технически (легко ошибиться и что-то не будет нормально масштабироваться), так и концептуально. Грубо говоря, кнопки в интерфейсе и для 13-дюймового экрана ноутбука, и для 27-дюймового моноблока должны быть одинакового физического размера. При этом другие элементы лучше растягивать, т. е. на большом экране они будут выглядеть больше. Если об этом не думать изначально, то интерфейс при смене масштаба обязательно где-то будет портиться. Возможность отображения в произвольном масштабе должна быть базовым принципом формирования интерфейса, а не нашлепкой на финальном этапе.

    Наша старая добрая логика уже готова подсказать нам решение: надо всего лишь создать единую точку отсчета для всех элементов интерфейса, признаваемую и используемую всеми участниками рынка. И тогда элементы интерфейса (в первую очередь, шрифты) всегда будут комфортного размера. Логично, правда? И просто. Проблема в том, что этот параметр у нас уже был, и назывался он dpi…

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

    У проблемы «жесткого указания масштаба» есть еще одна старая причина. Если вдуматься, то использование dpi, построение интерфейсов в пикселях, 100-процентный масштаб — это костыли, намеренные упрощения, которые в свое время позволяли нам экономить вычислительные ресурсы компьютера: ему не надо было заниматься сложными расчетами для формирования картинки, нужно было просто «рисовать, как приказано» — а это гораздо проще. При слабых компьютерах нам приходилось с этим считаться (посмотрите, например, на параметры Windows типа «отключить анимацию для экономии ресурсов компьютера»), но ведь сейчас у нас достаточно ресурсов. Однако многие параметры и принципы до сих пор живы, во многом благодаря инерции.

    Поэтому вполне логично, что сейчас идет движение в сторону виртуализации интерфейсов. Цель этого процесса — вообще разорвать связь между программной и аппаратной частью. В мире ПО нет такого понятия, как «пиксель», и интерфейс должен рассчитываться не в пикселях, а в абстрактных линиях и пропорциональных величинах. Это позволит компьютеру легко и просто «собрать» интерфейс приложения для любого монитора. Если мы посмотрим, как развивается платформа Windows в последнее время (создание WDM и т. д.) — то это и есть это направление.

    А разрешение станет означать совсем другое

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

    Традиционно параметр «разрешение экрана» говорил нам, сколько информации поместится на экран. Размеры элементов задавались через dpi, dpi приравнивался к ppi (ну, или, для графики, напрямую в пикселях), соответственно, чем больше разрешение экрана, тем больше элементов на него поместится. Раньше экраны были маленькие и с небольшим разрешением, поэтому любой рост размера или разрешения приносил существенное увеличение удобства работы.

    Сегодня разрешение современных настольных мониторов достаточно велико, чтобы можно было не волноваться о каждом пикселе. Да и в ноутбуках ситуация постепенно улучшается. При этом на том же ноутбуке с разрешением экрана 1920×1080 точек придется увеличивать масштаб, и в результате количество информации на экране будет примерно таким же, как при разрешении 1366×768. Вспомните, новый интерфейс Windows показывает шесть вертикальных рядов плиток на 27-дюймовом мониторе и всего лишь три — на ноутбуке, хотя физическое разрешение матрицы у них одинаково.

    Таким образом, с отказом от dpi и в ситуации, при которой одно и то же физическое разрешение может быть у экрана с диагональю от 11,6 до 27 дюймов, мы приходим к выводу, что в современных и будущих системах количество информации на экране должно определяться физическим размером экрана, а не его разрешением. Что же до разрешения, то оно станет характеристикой четкости изображения на экране: сам элемент будет того же размера, но в его отрисовке будет принимать участие больше пикселей, что позволит нарисовать его на экране с более высоким качеством. Это уже реализовано в мобильных ОС и Mac OS, сейчас на очереди Microsoft Windows.

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

    Впрочем, думаю, некоторое время маркетинговое значение этого термина сохранится именно в силу инерции. Этот этап мы наблюдаем сейчас во флагманских смартфонах на Android — производители почему-то взяли на вооружение параметр PPI и постоянно выпускают торжествующие пресс-релизы, что в их новой модели он вырос с 441 до 446. Потрясающе! Через некоторое время, когда пользователи поймут, что это ни на что не влияет, его потихоньку закопают в недрах теххарактеристик устройства, а маркетологи придумают нам другие красивые циферки, например «цветовой охват 98%». Что? Уже используют? Ну вот видите…

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

    Заключение

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

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

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

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

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

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

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

    Этот умный сайт позволяет улучшать качество плохих фото в несколько раз

    Ребята, мы вкладываем душу в AdMe.ru. Cпасибо за то,
    что открываете эту красоту. Спасибо за вдохновение и мурашки.
    Присоединяйтесь к нам в Facebook и ВКонтакте

    Кто бы не хотел иметь возможность без труда улучшать любое изображение, как спецагент ФБР из голливудских блокбастеров?

    AdMe.ru сообщает, что теперь это стало возможным благодаря «нейронному» коду из 340 строк, написанному австрийским программистом Алексом Джей Чампандэрдом.

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

    На сегодняшний день ресурс еще не позволяет распознавать лица преступников со скриншотов скрытых камер, но зато отлично работает с изображениями размером 256×256, 320×200 или 128×128 пикселей.

    Пакетная оптимизация изображений. Уменьшение размеров.

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

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

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

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

    • Использование по возможности только уникальных изображений;
    • Обязательное заполнение атрибутов title и alt;
    • Указание размеров изображений;
    • Уменьшение размеров и веса картинок.

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

    Безусловно, размеры изображений можно изменять, используя множество программ. Это и гигант Photoshop, Paint и Paint.Net, а так же менее известные программы, такие как Xat.com Image Optimizer, XnView MP, PIXresizer, Fotosizer, Icecream Image Resizer, ImageGroup и другие. Каждая из этих программ достойна внимания и хороша по-своему. Но, наша задача, как указано в названии статьи — массовое изменение размеров картинок. Именно такую операцию в некоторых программах, например, Paint или Paint.Net при всем желании не выполнить.

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

    Скачать программу можно с сайта разработчика //www.xnview.com/en/xnviewmp/
    На странице сайта в верхнем меню щелкните мышью на пункте Desktop и выберите подпункт XnView MP:

    Прочтите описание и особенности XnView MP, посмотрите скриншоты, прокрутите страницу вниз и скачайте программу (установщик или zip-архив), учитывая соответствие вашей операционной системе и её разрядности (32 или 64 bit):

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

    Как работать с программой XnView MP?

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

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

    2. Откройте программу и загрузите все изображения, используя проводник (на моем примере это — диск DФото):

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

    3. Выделяем все изображения при помощи левой кнопки мыши или сочетания клавиш Ctrl + A.

    4. Правой кнопкой мыши открываем контекстное меню и выбираем пункт Пакетная обработка:

    5. В открывшемся окне на вкладке Выходные данные указываем папку для оптимизированных картинок. Если Вы выберите Исходную папку, то все изображения будут изменены на оптимизированные. «Это не есть айс». Мы лучше выберем созданную заранее папку Оптимизированное. В этом случае, при любой неудаче, можно будет повторить операцию, так как оригиналы картинок останутся в прежнем виде и на прежнем месте.

    6. В поле Имя файла выбираем нужную позицию.

    • Например, если выбрать Image##, то такое имя будет у файлов, а решетки — это нумерация.
    • При выборе позиции __ оптимизированные файлы будут иметь примерно такой вид: 01_100_75.jpg. После имени файла будут указаны его размеры — ширина и высота.
    • Позиция _ добавит к названию файла число, месяц и год проведения операции.
    • А если оставить поле совершенно пустым, оптимизированные изображения будут выведены с теми же названиями.

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

    Остальные настройки можно оставить как есть. В итоге на вкладке Выходные данные останется примерно такая картина:

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

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

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


    На этом позвольте закончить тему. До свидания. Ваш Л.М.

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

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

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

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

    Преимущества оптимизации изображений

    Зачем оптимизировать изображения на сайте? Существует множество преимуществ оптимизации изображений для повышения производительности. По данным HTTP Archive , по состоянию на декабрь 2020 года изображения составляют в среднем 54% от общего веса веб-страницы . Поэтому, когда дело доходит до оптимизации сайта на WordPress , изображения — это первое, с чего следует начинать. Это важнее, чем оптимизация скриптов и шрифтов. К тому же, процесс оптимизации изображений является одним из самых простым для реализации, но многие владельцы веб-сайтов игнорируют его.

    Основные преимущества оптимизации изображений на сайте:

    • Это улучшит скорость загрузки страницы. Если ваша страница загружается слишком долго, посетители могут устать от ожидания и закрыть сайт. Для получения дополнительной информации об оптимизации времени загрузки страницы смотрите подробное руководство по оптимизации скорости сайта.
    • В сочетании с плагинами SEO для WordPress это улучшает SEO сайта на WordPress. Ваш сайт будет выше в результатах поиска. Большие файлы замедляют работу сайта, особенно на мобильных устройствах, а поисковые системы пессимизируют медленные сайты. Google также может сканировать и индексировать ваши изображения быстрее для поиска изображений в Google. Вы знаете, какой процент трафика вашего сайта приходится на поиск картинок Google? Вы можете использовать Google Analytics для проверки трафика поиска картинок Google.
    • Более быстрое создание резервных копий и восстановление из них.
    • Меньшие размеры файлов изображений используют меньше трафика. Особенно актуально для мобильных браузеров.
    • Требует меньше места на сервере (это зависит от того, сколько миниатюр вы оптимизируете)

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

    Основная цель оптимизации изображений — найти баланс между размером файла и приемлемым качеством . Существует несколько способов выполнить все эти оптимизации. Один из самых популярных способов — просто сжимать изображения перед загрузкой в ​​WordPress. Это можно сделать с помощью таких инструментов, как Adobe Photoshop или Affinity Photo. Некоторые из этих задач также могут быть выполнены с помощью плагинов, о которых мы поговорим ниже.

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

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

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

    • PNG — изображения более высокого качества, но также имеет больший размер файла. Был создан как формат изображения без потерь, хотя он также может быть с потерями.
    • JPEG — использует оптимизацию с потерями и без потерь . Вы можете отрегулировать уровень качества для хорошего баланса качества и размера файла.
    • GIF — использует только 256 цветов. Лучший выбор для анимированных изображений. Используется только сжатие без потерь.
    • WebP — новый формат изображений для интернета. Хорошо оптимизирует изображения, но поддерживается не всеми браузерами. Как использовать WebP в WordPress.

    Качество vs Размер файла

    Вот пример сильного сжатия изображения. Первая картинка использует очень низкую степень сжатия, что приводит к высочайшему качеству (но большому размеру файла). Во втором случае используется очень высокая степень сжатия, что приводит к очень низкому качеству изображения (но меньшему размеру файла). Исходное изображение без изменений весит 2,06 МБ.

    Низкое сжатие (высокое качество) JPG — 590 КБ Высокое сжатие (низкое качество) JPG — 68 КБ

    Как вы можете видеть, первое изображение весит 590 КБ. Это довольно много для одной фотографии. Как правило, лучше всего, если общий размер веб-страницы не превышает 1 или 2 МБ. 590 КБ будет уже четвертью объема всей страницы. Второе изображение явно выглядит ужасно, но оно и весит всего 68 КБ. Важно найти правильное соотношение между степенью сжатия (качеством) и размером файла.

    Поэтому возьмем изображение со средней степенью сжатия, и, как вы можете видеть ниже, качество теперь выглядит хорошо, а размер файла составляет 151 КБ, что является приемлемым для фотографии с высоким разрешением. Это почти в 4 раза меньше, чем оригинальная фотография с низким уровнем сжатия. Обычно более простые изображения, такие как PNG, должны иметь размер менее 100 КБ или меньше для лучшей производительности.

    Среднее сжатие (отличное качество) JPG — 151 КБ

    Сжатие с потерями или без потерь

    Также важно понимать, что можно использовать два типа сжатия: с потерями и без потерь.

    Сжатие с потерями — это процесс, который удаляет некоторые данные. Это ухудшит изображение, поэтому вам нужно быть внимательным с тем, насколько сильно уменьшать изображение. Размер файла может быть уменьшен на значительную величину. Вы можете использовать такие инструменты, как Adobe Photoshop, Affinity Photo или другие редакторы изображений, чтобы настроить параметры качества изображения. Пример, который мы использовали выше, использует сжатие с потерями.

    Сжатие без потерь — это процесс, который сжимает данные. Он не снижает качество, но потребует распаковки изображений перед тем, как их можно будет отобразить. Вы можете выполнить сжатие без потерь на рабочем столе, используя такие инструменты, как Photoshop, FileOptimizer или ImageOptim.

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

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

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

    Сжатие фотографии в Affinity Photo

    Вот некоторые дополнительные инструменты и программы для работы с изображениями:

    • Adobe Photoshop
    • Gimp
    • Paint.NET
    • GIFsicle
    • JPEGtran
    • JPEG Mini
    • OptiPNG
    • pngquant
    • FileOptimizer
    • ImageOptim
    • Trimage
    • ImageResize.org

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

    Раньше было очень важно загружать изображения в масштабе и не позволять CSS изменять их размер. Однако это уже не так важно, поскольку WordPress с версии 4.4 теперь поддерживает адаптивные изображения (не уменьшенные с помощью CSS). По сути, WordPress автоматически создает несколько размеров каждого изображения, загружаемого в медиа-библиотеку. Включив доступные размеры изображения в атрибут srcset , браузеры теперь могут загружать наиболее подходящий размер и игнорировать другие. Пример того, как на самом деле выглядит код вставки изображения в WordPress.

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

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

    Плагины WordPress для оптимизации изображений

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

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

    Imagify Image Optimizer

    Imagify создан той же командой, которая разработала плагин WP Rocket, с которой большинство из вас, вероятно, знакомы. Этот плагин совместим с WooCommerce, NextGen Gallery и WP Retina. Он имеет функцию массовой оптимизации, и есть выбор между тремя различными уровнями сжатия: нормальный, агрессивный и ультра. Плагин имеет функцию восстановления, поэтому, если вы недовольны качеством, вы можете одним кликом откатиться до оригинального файла и повторно сжать до уровня, который лучше соответствует вашим потребностям. Есть бесплатная и премиум версия. Бесплатная ограничена квотой в 25 МБ изображений в месяц.

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

    ShortPixel Image Optimizer

    ShortPixel Image Optimizer — это бесплатный плагин, который позволяет сжимать до 100 изображений в месяц и работает с файлами различных типов, включая файлы PNG, JPG, GIF, WebP и даже PDF. Он выполняет сжатие изображений как с потерями, так и без потерь. Может преобразовать CMYK в RGB. Он загружает ваши изображения и миниатюры в облако для обработки, а затем возвращает их на ваш сайт, чтобы заменить оригиналы. Он создает резервную копию исходных файлов, поэтому вы можете вручную восстановить их, если хотите. Он может конвертировать файлы галереи одним потоком. Не имеет ограничений на размер файла.

    Optimus Image Optimizer

    Optimus WordPress Image Optimizer использует сжатие без потерь для оптимизации изображений. Он поддерживает WooCoomerce и мультисайты и имеет хорошую функцию массовой оптимизации для тех, у кого уже есть большие медиа-библиотеки. Он также совместим с плагином WP Retina WordPress. Есть бесплатная и премиум версия. В премиум-версии вы платите один раз в год и можете сжимать неограниченное количество изображений. Если объединить его с плагином Cache Enabler, вы также сможете использовать формат WebP, которые представляют собой новый облегченный формат изображений от Google.

    WP Smush

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

    • Совместим с некоторыми из самых популярных плагинов медиа-библиотеки, такими как WP All Import и WPML.
    • Вся оптимизация изображения выполняется с использованием методов сжатия без потерь, что обеспечивает высокое качество изображения.
    • Не имеет значения, в каком каталоге хранятся изображения. Smush находит их и сжимает.
    • Smush имеет возможность автоматически устанавливать ширину и высоту для всех изображений, поэтому все изображения будут изменены в одинаковых пропорциях.

    TinyPNG

    TinyPNG использует сервисы TinyJPG и TinyPNG (бесплатная учетная запись позволяет сжимать около 100 изображений в месяц) для оптимизации изображений JPG и PNG. Плагин автоматически сжимает новые изображения и массово оптимизирует существующие. Может преобразовывать CMYK в RBG для экономии места. Сжимает изображения JPEG до 60% и изображения PNG до 80% без видимой потери качества. Нет ограничений на размер файла.

    ImageRecycle

    ImageRecyle — плагин автоматической оптимизации изображений и документов PDF. Этот плагин ориентирован не только на сжатие изображений, но и на PDF-файлы. Очень удобная функция — возможность установить минимальный размер файла для сжатия. Например, если у вас есть изображения размером 80 КБ, вы можете автоматически исключить их из сжатия. Это гарантирует, что картинки и файлы никогда не будут сжаты слишком сильно. Плагин также включает возможность массовой оптимизации и автоматическое изменение размера изображения. Примечание: есть бесплатная 15-дневная пробная версия, но сам плагин платный, и изображения загружаются и сжимаются с использованием серверов разработчиков плагина. Вы платите не за месяц, а за общее количество сжатых изображений, тарифные планы начинаются с 10 долларов за 10 000 картинок.

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

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

    Несжатые JPG

    Сначала мы загрузили на наш тестовый сайт 6 несжатых файлов JPG размером более 1 МБ. Затем мы провели 5 тестов через Pingdom и взяли среднее значение. Как видно из теста скорости, общее время загрузки составило 1,55 секунды, а общий размер страницы — 14,7 МБ.

    Сжатые JPG

    Затем мы сжимали JPG с помощью плагина Imagify WordPress, используя «агрессивную настройку». Затем мы провели 5 тестов через Pingdom и взяли среднее значение. Как видно из приведенного ниже теста скорости , общее время загрузки было сокращено до 476 мс, а общий размер страницы уменьшен до 2,9 МБ. Общее время загрузки уменьшилось на 54,88%, а размер страницы уменьшился на 80,27% .

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

    Оптимизируя ваши изображения с помощью инструмента для редактирования фотографий или плагина WordPress, вы также можете исправить предупреждение «Оптимизировать изображения», которое вы получаете в Google PageSpeed ​​Insights.

    Если у вас есть другие предупреждения об оптимизации из инструментов тестирования скорости, обязательно ознакомьтесь с нашим руководством по Google PageSpeed ​​Insights и пошаговым руководством Pingdom.

    Использование SVG

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

    • SVG автоматически масштабируются как в браузерах, так и в инструментах редактирования фотографий.
    • Google индексирует SVG так же, как и PNG и JPG, поэтому вам не нужно беспокоиться о SEO.
    • SVG традиционно (не всегда) меньше по размеру файла, чем PNG или JPG. Это может привести к ускорению загрузки.

    Сравним три разных типа изображений:

    JPG (оптимизированный размер: 81,4 КБ)

    PNG (оптимизированный размер: 85,1 КБ)

    SVG (оптимизированный размер: 6,1 КБ)

    Как вы можете видеть выше, SVG имеет меньший размера файла на 92,51% по сравнению с JPG. А по сравнению с PNG — 92,83%. Ознакомьтесь с нашим руководством по использованию SVG на сайте WordPress.

    Лучшие практики оптимизации изображений на сайте

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

    • Если вы используете плагин WordPress, используйте тот, который сжимает и оптимизирует изображения на своих серверах. Это, в свою очередь, снижает нагрузку на ваш собственный сайт.
    • По возможности используйте векторные изображения вместе с PNG и JPG
    • Используйте CDN для быстрой доставки ваших изображений посетителям по всему миру
    • Удаляйте ненужные данные изображения
    • Обрезайте белые поля изображения, добавить их можно через CSS
    • Максимально используйте эффекты CSS3
    • Сохраняйте изображения в нужных размерах
    • Используйте веб-шрифты вместо размещения текста внутри изображений — они выглядят лучше при масштабировании и занимают меньше места
    • Используйте растровые изображения только для сцен с большим количеством форм и деталей
    • Уменьшайте битовую глубину до меньшей цветовой палитры
    • Используйте сжатие с потерями, где это возможно
    • Экспериментируйте, чтобы найти лучшие настройки для каждого формата
    • Используйте GIF, если вам нужна анимация (но сжимайте анимированные GIF-файлы )
    • Используйте PNG, если вам нужна высокая детализация и высокое разрешение
    • Используйте JPG для общих фотографий и скриншотов
    • Удалите все ненужные метаданные изображения
    • Максимально автоматизируйте процесс обработки изображений
    • В некоторых случаях вам может потребоваться отложенная загрузка изображений для более быстрой визуализации первой страницы.
    • Сохраняйте изображения как «оптимизированные для Интернета» в таких инструментах, как Photoshop

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

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

    Оглавление

    Зачем нужна оптимизация изображений для сайта?

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

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

    На скорость загрузки страницы влияет много параметров сайта и один из них – это размер самой страницы

    Размер страницы — сума размеров всех загружаемых файтов (текста, изображений, служебных скриптов) и он измеряеться в килобайтах (kb) или мегабайтах (1Mb=1024kb).

    Размер загружаемой страницы, а заодно и скорость загрузки сайта можно проверить на сайте Pingdom Website Speed Test

    В чем проблема оптимизации изображений ?

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

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

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

    Надо учитывать, что даже JPG-фото с шириной 800 пикселей может занимать более 2 Mb, если его должным образом не оптимизировать. А если при вводе нужно применить прозрачность в изображении, то надо знать и о альфа-прозрачности, и 24-битных png-файлах.

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

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

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

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

    Размер изображения

    Размеры растровых изображений выражают в виде количества точек (пикселей) по горизонтали и вертикали.

    Например, цыфровая камера делает фото размером 3200×2100 пикселов. В данном случае это означает, что ширина изображения составляет 3200, а высота — 2000 точек. Такое изображение состоит из 6 720 000 точек (пикселов), то есть больше 6 мегапиксела.


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

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

    Разрешением экрана монитора обычно называют размеры получаемого на экране изображения в пикселах: 800×600, 1024×768, 1280×1024. Здесь подразумется разрешение относительно физических размеров экрана, а не эталонной единицы измерения длины, такой как 1 дюйм (2,54 см). Для получения разрешающей способности в единицах ppi (количество пикселей на дюйм) данное количество пикселов необходимо поделить на физические размеры экрана, выраженные в дюймах.

    Например, я пишу эти строки на ноутбуке, размер монитора ноутбука: 342 мм х 194 мм, текущее разрешение экрана ноутбука: 1366px х 768px. Соотвестввенно, разрешение моего монитора по горизонтали равно примерно 1366/342*25,4 = 101 пикселов на дюйм (ppi), по вертикали равно примерно 768px/194мм*25,4 = 101 пикселов на дюйм (ppi).

    Обычно минимальное ppi для «старых» мониторов 72 ppi (VGA). Сегодня мониторы имеют большую разрешающую способность: от 90 до 120 пикселей на дюйм

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

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

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

    При большом количестве точек, размещённом на маленькой площади, глаз не замечает мозаичности рисунка. Справедливо и обратное: малое разрешение позволит глазу заметить растр изображения («ступеньки»).

    Случай 1:

    Случай 2:

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

    Для того, чтобы вывести фотографию 3000х2000 пикселей в 1:1 на экран большинства мониторов с 96ppi – понадобиться монитор с размерами: 3000 / 96 * 2,54 = 79 см по горизонтали и 2000 / 96 * 2,54 = 53 см по вертикали.

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

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

    Глубина цвета

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

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

    Для представления цвета обычно кодируют яркости красной, зелёной и синей составляющих — такое кодирование называют RGB-моделью.

    8-битный «реальный» цвет — это сильно ограниченная цветовая схема в которой по 3 бита для красной (R) и зелёной (G) составляющих (по 8 возможных значений), и два оставшихся бита на пиксель для кодирования синей (B) составляющей (4 возможных значения), позволяют представить 256 (8 × 8 × 4) различных цвета. Нормальный человеческий глаз менее чувствителен к синей составляющей, чем к красной и зелёной, поэтому синяя составляющая представляется одним битом меньше.

    HighColor — или HiColor разработан для представления оттенков «реальной жизни», то есть наиболее удобно воспринимаемый человеческим глазом. Такой цвет кодируется уже 15 или 16 битами.

    Truecolor — 24-битное изображение еще более «приближен» к цветам «реального мира», предоставляя 16,7 миллионов различных цветов. Такие изображения наиболее «приятны» для восприятия человеческим глазом различных фотографий. 24-битный Truecolor-цвет использует по 8 бит для представления красной, синей и зелёной составляющих. Кодируется по 256 различных вариантов представления цвета для каждого канала, или всего 16 777 216 цветов (256×256×256).

    «32-битный цвет» — пример неправильного употребления термина при описании глубины цвета. Заблуждением является то, что 32-битный цвет позволяет представить 2³² = 4 294 967 296 различных оттенков. На самом деле 32-битный цвет является 24-битным (Truecolor) с дополнительным 8-битным каналом, который либо заполнен нулями (никак не влияет на цвет), либо представляет собой альфа-канал, который задаёт прозрачность изображения для каждого пикселя. То есть существует 16 777 216 оттенков цветов и 256 градаций прозрачности. Причиной, по которой используют «пустой» канал, является стремление оптимизировать работу с видеопамятью, которая у многих современных компьютеров имеет 32-битную адресацию и 32-битную шину данных.

    Разница «на глаз» между 24- и 32-разрядным цветом на глаз отсутствует, так как в 32-разрядном представлении 8 разрядов просто не используются, «облегчая» адресацию пикселов, но увеличивая занимаемую изображением память. А вот 16-разрядный цвет (HighColor) уже «грубее».

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

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

    Основные форматы графических файлов

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

    BMP один из первых графических форматов. Его распознает любая программа, работающая с графикой. Поддержка формата интегрирована в операционные системы Windows и OS/2. Из-за больших размеров графического файла формат практически не используется в Интернете.

    GIF способен хранить сжатые данные без потери качества в формате до 256 цветов. Включает алгоритм сжатия без потерь информации.Изображение в формате GIF хранится построчно. Рекомендуется для хранения; изображений, создаваемых программным путем (диаграмм, графиков и так далее) и рисунков (типа аппликации) с oгpaниченным количеством цветов (до 256).

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

    JPEG — наверно, самый популярний графический формат, применяемый для фото и рисунков в сети Интернет. Свою популярность JPEG заслужил благодаря гибкой возможности сжатия данных. При необходимости изображение можно сохранить с максимальным качеством. Либо сжать его с потерей качества изображения, но до минимального размера файла для передачи по сети. Файлы в формате JPEG имеют расширения .jpg, .jfif, .jpe или .jpeg.

    WebP — относительно новый формат сжатия изображений с потерями и без потерь качества, предложенный компанией Google Inc. в 2010 году. Был создан, как альтернатива PNG и JPG, и отличается от них гораздо меньшим размером при том же качестве изображения.

    BMP файл имеет, как правило, большие размеры, по сравнению с файлами PCX и GIF, которые в свою очередь больше JPEG файла.

    Что такое DPI и чем DPI отличается от PPI

    Важно! Не путайте такие понятия как количество пикселов на дюйм ppi и количество точек на дюйм dpi. Dpi – термин полиграфии, и к ppi отношения не имеет. Dpi — это разрешение печатающего устройства.

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

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

    Dpi характеризует количество точек в одном дюйме (1дюйм=2,54 см) наносимых на бумагу для отрисовки одного растра (линии) изображения. То есть в данном случае уже не важно какое было разрешение самого изображения в ppi — на dpi это уже никак не влияет. Чем меньше созданная точка dpi, тем их больше поместится на 1 дюйм, тем более качественнее выглядит печать.

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

    Параметр dpi обретает смысл только в момент вывода на печать. У фотографии есть только ее абсолютное разрешение — число точек по вертикали и горизонтали.

    Скажем, так, если фотография сделана камерой с матрицей в 6 мегапикселей, то её абсолютное разрешение будет 3000 х 2000 пикселей. Это все!

    Возможно, у вас возникнет вопрос; а что же значит указанное в свойствах графического файла значение 72, 150 или 300 dpi?

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

    Это значение можно безболезненно поменять на любое целое положительное число — в самом изображении не изменится ничего.

    14 метрик производительности веб-сайтов, которые необходимо анализировать

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

    • 209 shares
    • 125
    • 40
    • 8
    • 16

    Аннотация

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

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

    Предварительные замечания

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

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

    О многомерном (многовариантном) тестировании можно получить дополнительную информацию на страницах:

    Какие же метрики производительности необходимо анализировать? Мы составили для вас тематический список самых важных метрик производительности.

    I. Метрики производительности по скорости

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

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

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

    На рисунке 1 показана примерная страница отчета (закладка Summary) тестирования по необработанным страничным данным (в красной рамке Raw page data), взятая с сайта webpagetest.org. Первая строка таблицы отчета соответствует первому просмотру (First View), вторая строка — повторному просмотру (Repeat View).

    1-й столбец таблицы показывает продолжительность загрузки в секундах (Load Time, s), 2-й столбец — время до получения первого байта в секундах (First Byte, s), 3-й — начало старта рендера в секундах (Start Render, s), 4-й — некоторый индекс скорости (Speed Index), 4-й — количество DOM-элементов (DOM Elements).

    Следующие 3 столбца соответствуют полной загрузке документа (Document Complete): продолжительности загрузки в секундах (Time, s); количеству запросов (Requests); количеству загруженных байтов (Bytes In).

    Последние 5 столбцов соответствуют полной загрузке страницы (Fully Loaded): продолжительности загрузки в секундах (Time, s); количеству запросов (Requests); количеству загруженных байтов (Bytes In); объему сертификатов (Certificates); стоимость (Cost).

    Рис. 1. Примерная страница отчета (закладка Summary) тестирования по необработанным страничным данным (в красной рамке Raw page data), взятая с сайта webpagetest.org

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

    1. Время заголовка

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

    На рисунке 2 показан примерный результат тестирования с временем заголовка (Time to Title), равным 480 мс, см. второй столбец. В первом столбце указан сам заголовок страницы (Page Title).

    Рис. 2. Примерный результат тестирования с временем заголовка (Time to Title)

    1. Время старта рендера

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

    На рисунке 3 показан примерный результат тестирования с временем старта рендера (Time to Start Render), равным 1019 мс, см. третий столбец.

    Рис. 3. Примерный результат тестирования с временем старта рендера (Time to Start Render)

    1. Время интерактивности

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

    1. Время поискаDNS

    Время поиска DNS — это время, затраченное DNS-провайдером на перевод доменного имени в IP-адрес. Такие службы, как Pingdom или Webpagetest, могут быстро вычислить время поиска DNS сайта для каждого домена.

    На рисунке 4 показаны примерные параметры запроса (Request Details) с временами поиска DNS (DNS Lookup) в мс (ms), которые находятся в 4-м столбце. В 1-м столбце приведены имена ресурсов, которые пришлось вызвать для загрузки первого ресурса в списке wordpress.keycdn. Во 2-м столбце — тип контента (Content Type), в 3-м — время старта запроса (Request Start) в секундах (s).

    Рис. 4. Примерные параметры запроса (Request Details) с временем поиска DNS (DNS Lookup)

    Для дополнительной информации см. английскую статью «Сокращение DNS-запросов» или русскую статью «Уменьшение числа DNS-запросов».

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

    1. Время соединения

    Время между вызовом сайта и установкой связи между браузером и сервером назовем временем соединения.

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

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

    Активы — это файлы и объекты, необходимые для работы приложения. Могут находиться в папке (директории) assets.

    1. Время первого байта

    Время, которое требуется для получения браузером самого первого байта информации после установления связи с сервером, назовем временем первого байта, или TTFB (Time To First Byte). Порядок, в котором пользователь видит данные на экране, очень важен, и некоторые небольшие изменения в коде приложения могут улучшить эту метрику производительности сайта.

    Подробнее о времени первого байта см. статью на Хабрахабре «Советы по сетевой оптимизации веб-сайта», а также статью «Анализ и оптимизация времени TTFB» на сайте «Оптимизация и масштабирование Web приложений».

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

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

    На рисунке 5 приведены результаты работы сервиса KeyCDN-тестирование производительности (Performance Result), состоящие из 14 географических точек. 1-я колонка содержит 14 географических точек (Locations), 5-я колонка — время поиска DNS (DNS), 6-я — время соединения (Connect), 8-я — время первого байта (TTFB).

    Рис. 5. Пример результатов KeyCDN-тестирования производительности (Performance Result)

    1. Время последнего байта

    В момент получения браузером всех байтов сайта фиксируется время последнего байта (TTLB, Time To Last Byte). Качество кода и запросов к базе данных играет большую роль в этой метрике. Другие факторы, которые могут ухудшать TTLB, это неправильно сконфигурированный сервер или его перегрузка.

    II. Сложность контента и метрики производительности сайта

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

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

    На рисунке 6 показан рост размера веб-страницы по годам с 2010 по 2020, который вырос с 702 Кб до 2332 Кб.

    Рис. 6. Рост размера веб-страницы по годам

    Беря по отдельности веса JavaScript, CSS, изображений и всех активов, можно выяснить, какие из этих категории слишком «тяжелы». После этого выполняется общий анализ и определяется конкретный актив, который нужно изменить или удалить.

    1. Полный счет активов

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

    О том, как мы улучшили производительность сайта WordPress, сократив время загрузки с 532 мс до 167 мс уменьшением общего количества HTTP-запросов, можно прочитать на KeyCDN в английской статье WordPress Performance – Breaking It Down by HTTP Requests.

    1. Сторонние домены

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

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

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

    1. Коэффициент ошибок

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

    Приведем три примера.

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

    При использовании KeyCDN в меню Сообщения (Reporting) можно видеть количество клиентских ошибок в ваших зонах за определенный промежуток времени.

    На рисунке 7 приведено окно с количеством ошибок в меню Сообщения (Reporting) на KeyCDN. В четвертом столбце показано количество клиентских ошибок (Client Error).

    Рис. 7. Количество ошибок, подсчитываемых на KeyCDN

    1. Показатель отказов

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

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

    1. непонятные ключевые слова;
    2. медленная загрузка;
    3. неприятный дизайн.

    Если после внесения изменений показатель отказов начал падать, это значит, что что-то было сделано правильно. Имеется много рекомендаций по уменьшению показателя отказов, например, на английском языке «21 способ уменьшить показатель отказов вашего сайта» (21 Ways to Reduce Bounce Rate on Your Website), на русском языке «Повышение конверсии: 10 способов уменьшить показатель отказов вашего сайта».

    1. Топовые страницы

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

    Следует иметь в виду, что количество посетителей — не единственная оценка качества страницы. Число желающих поделиться страницей в социальных медиа также очень важно.

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

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

    Интересная диаграмма на рисунке 8 показывает корреляцию между временем загрузки сайта и конверсией.

    На рисунке 8 показана разность между реальной конверсией для 5, 3, 2 и 1-секундной загрузки (5, 3, 2, 1 seconds conversion rate % difference from the control) и некоторой калибровочной конверсией. Синяя линия — 5 секунд, красная — 3 секунды, оранжевая — 2 и зеленая — 1 секунда. На вертикальной оси отложена эта разность. По горизонтальной оси отложено количество страниц сайта на сессию (pages p/session).

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

    Рис. 8. Корреляция между временем загрузки сайта и конверсией

    Итак, если конверсия низкая, то это означает, что вы:

    1) либо неправильно улучшали метрики скорости сайта;

    2) либо неэффективно привлекали посетителей.

    IV. Восприятие производительности против метрик производительности

    Числа не говорят нам всё, поэтому важно понять образ мышления Интернет-пользователей. Восприятие — это всё! Есть различие между реальным временем загрузки страницы и «ощущением» пользователя этого времени.

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

    1. Ленивая загрузка технически ускоряет сайт, но добавление при этом индикаторов прогресса заставляет пользователей острее ощущать проходящее время. Таким образом, пользователям кажется, что сайт загружается медленнее. Поэтому при использовании ленивой загрузки нельзя использовать эти индикаторы.
    2. Блеск неформата (также переводят как «вспышка нестилизованного текста» от английского FOUT, Flash Of Unstyled Text) является другой проблемой пользовательского восприятия. FOUT происходит тогда, когда шрифты загружаются в конце загрузки документа, т. е. символы письма появляются сначала как расплывчатые пятна, которые только потом превращаются в буквы и числа. Хотя FOUT и не затрагивает реальную скорость сайта, но это визуально раздражает пользователей, которые начинают неприятно ощущать загрузку страницы.

    Более полную информацию о FOUT см. на Хабрахабре в статье «Проблема „вспышки нестилизованного текста“».

    Чтобы узнать больше о восприятии производительности и его влиянии на поведение пользователя, изучите полное руководство на английском языке “Perceived Performance – Don’t Forget the User”

    Также психологию восприятия производительности можно начать изучать с интересной статьи «Производительность сайта. Почему она имеет значение. Управление восприятием».

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

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

    Мастер Йода рекомендует:  Что делать, если Microsoft заблокирует Windows на территории России
Добавить комментарий