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

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

распознавание изображений

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

Причина этого чудесного явления проста: в мозгу каждого живет «примитив».

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

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

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

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

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

Таким образом, сводка представления содержания изображения имеет следующие преимущества:

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

Тип изображения

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

Интерпретация типа

• jpg
• png
• gif
• svg
• APNG
• WebP

jpgПолное название — JPEG.Изображения в формате JPEG хранят одно растровое изображение с 24-битным цветом.Это один из наиболее часто используемых форматов изображений в нашем процессе разработки.Преимущество этого типа изображений заключается в том, что они могут быть сжаты с высоким качеством , Например, мы можем, если качество его изображения уменьшится со 100% до 60%, его объем уменьшится как минимум более чем на 50%.Например, когда изображение 100K уменьшится до 60%, его объем будет быть в пределах 40-50к; кроме того, невооруженным глазом вообще трудно различить изменения до и после сжатия после сжатия.

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

Тип png делится на два типа: png8 и png24.

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

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

gifФормат обмена изображениями, как правило, будут использоваться небольшие значки или анимация (loading.gif), gif также может отображать 256 цветов, но поддерживает только полную прозрачность и полную непрозрачность.

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

APNGТо есть Animated PNG.Буквально изображение в этом формате является "движущимся" изображением PNG.Это изначально было разработано двумя программистами из Mozilla.В то время Mozilla отказалась от формата изображения MNG и разработала его самостоятельно.Используется APNG для хранения динамических файлов с несколькими изображениями.Он имеет преимущества jpg и png одновременно.Единственным недостатком является то, что он не принят стандартом, поэтому масштабного использования нет.

Как видно из рисунка выше, при одинаковом объеме качество изображения формата APNG более четкое и деликатное, чем у GIF. В то же время в случае с 24-битным форматом, поскольку PNG содержит на 256 цветов больше (фактически 16,8 млн цветов), цветопередача более нежная и реалистичная.

WebPЭто новый формат сжатия изображений, предложенный Google в 2010 г. WebP обеспечивает возможности сжатия сетевых изображений без потерь и с потерями, а также поддерживает прозрачные каналы в условиях с потерями; JPEG на 25%~34% при том же структурном сходстве, поэтому он также имеет преимущества jpg и png.

В настоящее время отечественные и иностранные интернет-компании также начали использовать его несколько лет назад.Иностранные компании включают Google, Facebook и eBay, а отечественные компании включают Taobao, Tencent и Meituan.

Что касается совместимости WebP, то он в основном поддерживает IE11+ и основные браузеры.

использование изображения

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

• Если это красочное изображение, обычно выбирают jpg.
• Для более общих анимаций единственным доступным вариантом являются GIF-файлы.
• Если вам нужно четко отображать изображения с насыщенными цветами, png — лучший выбор.
• Если это приложение корпоративного уровня (без учета совместимости), вы можете выбрать webp.

Как загружаются изображения

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

вейвлет-алгоритм

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

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

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

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

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

Алгоритм дискретного косинусного преобразования

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

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

популярная практика

CSS3

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

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

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

Конечно, это зависит от того, какие функции технологии CSS3 используются вместо этого, а также от того, как используются функции CSS3.

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

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

Преимущество:

• Объем уменьшен.
• Количество HTTP-запросов уменьшилось.
• ctrl + масштабирование колеса плавное и неровное.
• При написании CSS в SCSS вычисление размера на самом деле очень удобно.

Пример:500+ Free Pure CSS Icons

CSS Sprites

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

преимущество:

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

предложение:

• Слияние больших изображений не рекомендуется
• Предложить похожие изображения для объединения

iconfont

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

Пример:iconFont

Вот пример использования iconfont

Объявление шрифта font-face:

     .css 文件

     @font-face {font-family: "iconfont";
       src: url('iconfont.eot'); /* IE9*/
       src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('iconfont.woff') format('woff'), /* chrome, firefox */
       url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
       url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
     }

Мы видим, что разные браузеры вызывают разные файлы шрифтов.

Определите стиль Iconfont:

Мы можем изменить размер и цвет значка через размер шрифта font-size и собственный цвет color.

      .css 文件
     .iconfont {
       font-family:"iconfont" !important;
       font-size:16px;
       color:#f00;//红色
     }
 

Выберите код шрифта, соответствующий значку, и примените его к странице:

    .html 文件
    
    <i class="icon iconfont"></i>

преимущество:

• Загружаемые файлы имеют небольшой размер.
• Уменьшить http-запросы.
• Вы можете напрямую изменить его размер и цвет с помощью размера шрифта и цвета css, что является хорошим решением для значков, которые необходимо масштабировать в нескольких размерах.
• Поддержка некоторых эффектов css3 для текста, таких как тень, поворот, прозрачность.
• Совместимость с более ранними версиями браузеров.

перспективный подход

Отзывчивая динамическая загрузка изображений (SDK)

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

Загружайте изображения разных ресурсов в соответствии с разными разрешениями (теперь поддерживаются некоторые браузеры)

    .html 文件
    
    <picture>
      <source src="/path/to/medium-image.png" media="(min-width: 600px)">
      <source src="/path/to/large-image.png" media="(min-width: 800px)">
      <img src="/path/to/mobile-image.png" alt="image description">
    </picture >

серия статей

Сначала возьми яму, а потом закончи писать.

• Статьи DOM по оптимизации производительности интерфейса(над)
• Изображения оптимизации производительности интерфейса(над)
• Видео оптимизации производительности интерфейса
• Ресурсы по оптимизации производительности внешнего интерфейса
• Хранилище для оптимизации производительности переднего плана
• Статьи по оптимизации производительности внешнего интерфейса
• Оптимизация производительности интерфейса загрузки статей
• Статьи SSR по оптимизации производительности переднего плана