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

Автор: ахмад шейд
Переводчик: Front-end Xiaozhi Источник: разработчики

Ставьте лайк и смотрите снова, формируйте привычку

эта статьяGitHub GitHub.com/QQ449245884…Он был включен в вышеизложенное, и более ранние статьи с высокими похвалами были классифицированы, а также было систематизировано множество моих документов и учебных материалов. Добро пожаловать в Star and Perfect. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Надеюсь, у нас что-то получится вместе.

Одно из решений, которое должен принять фронтенд-разработчик при создании веб-сайта, — это способ включения изображений. это может быть<img>Этикетки или CSSbackgroundатрибуты, вы также можете использовать SVG<image>. Выбор правильного пути важен и оказывает большое влияние на производительность и доступность.

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

HTML `<img>`элемент

В простейшем случаеimgэлемент должен содержатьsrcАтрибуты:

<img src="cool.jpg" alt="">

Установить свойства ширины и высоты

При загрузке страницы у них есть некоторые изменения макета при загрузке изображений страницы. Чтобы избежать этого, мы можем установитьwidthа такжеheightАтрибуты:

<img src="cool.jpg" width="200" height="100" alt="">

Хотя кому-то это может показаться слишком упрощенным, это полезно. Мы используем легенду, чтобы прояснить это понятие:

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

Скрытое изображение с помощью CSS

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

img {
    display: none;
}

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

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

Проблема доступности

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

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

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

Предположим, у нас есть следующее изображение:

<img class="food-thumb" width="300" height="200" src="cheescake.jpg">

<img class="food-thumb" width="300" height="200" src="cheescake.jpg" alt="">

когдаsrcНедействительно, если изображение не загружено. первый неaltсвойство, а второе пустоеaltсвойства, вот их визуальный эффект:

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

Однако, когдаaltСвойство имеет значение, оно выглядит так:

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

адаптивные изображения

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

1.srcsetАтрибуты

<img src="small.jpg" srcset="medium.jpg 500w, large.jpg 800w" alt="">

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

2.pictureЭтикетка

<picture>
  <source srcset="large.jpg" media="(min-width: 800px)" />
  <source srcset="medium.jpg" media="(min-width: 500px)" />
  <img src="small.jpg" />
</picture>

Другой вариант — использовать<picture>элемент. Я предпочитаю этот способ, потому что он более предсказуем.

Пример исходного кода:код спрей.IO/какая квота/спрей...

изменить размер изображения

для<img>, хороший набор функций, которые мы также можем использоватьobject-fitа такжеobject-position. они могут контролировать<img>размер и расположение, как фоновые изображения CSS.

object-fitЗначения:fill, contain, cover, none, scale-down. Например:

img {
    object-fit: cover;
    object-position: 50% 50%;
}

CSS фоновое изображение

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

Как использовать фоновые изображения CSS

Во-первых, нам нужен элемент

// html
<div class="element">Some content</div>

// css
.element {
    background: url('cool.jpg');
}

несколько фонов

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

.element {
    background: url('cool-1.jpg'), url('cool-2.jpg');
}

скрыть изображение

Мы можем скрыть и показывать изображение в определенной области просмотра, если изображение не установлено с CSS, изображение не будет загружено. и использовать<img>По сравнению с этим, это дополнительный бонус.

В приведенном выше примере у нас есть фоновое изображение, только больше, чем ширина просмотра700pxотображается.

проблемы доступности

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

#### Пользователи, не являющиеся разработчиками, не могут скачивать

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

псевдоэлемент

Псевдоэлементы можно использовать с фоновыми изображениями CSS, например, для отображения наложения поверх изображения. для<img>Это невозможно, пока мы не добавим в оверлей отдельные элементы.

SVG `<Image>`

SVGЕсли рассматривать изображение, его основная функция заключается в масштабировании без ущерба для качества. Кроме того, используйтеSVG, мы можем встроитьJPG,PNGилиSVGизображение. См. следующий HTML-код:

<svg width="200" height="200">
  <image href="cheesecake.jpg" height="100%" width="100%" preserveAspectRatio="xMidYMid slice" />
</svg>

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

когда<image>Когда ширина больше, он будет заполнять ширину своего родителя (SVG) без растяжения.

Это очень похоже на CSS вobject-fit: coverилиbackground-size: cover.

проблемы доступности

Что касается доступности SVG, это напоминает мне<title>элемент. Например, мы можем добавить это так:

<svg width="200" height="200">
   <title>A photo of blueberry Cheescake</title>
   <image href="cheesecake.jpg" height="100%" width="100%" preserveAspectRatio="xMidYMid slice" />
</svg>

мы также можем использовать<desc>элемент

<svg width="200" height="200">
   <title>A photo of blueberry Cheescake</title>
   <desc>A meaningful description about the image</desc>
   <image href="cheesecake.jpg" height="100%" width="100%" preserveAspectRatio="xMidYMid slice" />
</svg>

Не-разработчики не могут скачать

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

Пример

Hero Section

строительствоhero sectionИногда нам нужны изображения под заголовками и другим контентом. Смотрите изображение ниже:

Некоторые требования:

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

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

Важно ли сохранить это изображение для пользователя или его можно пропустить?
Нужно ли нам использовать его для всех размеров окна просмотра?
Он статичен или динамичен?

Решение 1

Используя несколько фонов CSS, мы можем использовать один фон в качестве наложения, а другой — в качестве фактического изображения. См. CSS ниже:

.hero {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), var('landscape.jpg');
    background-repeat: no-repeat;
    background-size: 100%, cover;
}

Хотя это решение работает, фоновое изображение можно динамически изменять с помощью JavaScript. Смотри ниже:

<section class="hero" style="background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('landscape.jpg');">
  <!-- Hero content -->
</section>

Здесь добавляется встроенный стиль. Пока это работает, выглядит некрасиво и непрактично.

Может быть, мы можем использовать переменные CSS? Давайте исследовать.

<section class="hero" style="--bg-url: url('landscape.jpg')">
  <!-- Hero content -->
</section>

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

резюме:

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

Пример исходного кода:код спрей.IO/какая квота/спрей...

Решение 2

В программе возможно использованиеimgЭтикетка:

<section class="hero">
  <h2 class="hero__title">Using Images in CSS</h2>
  <p class="hero__desc">An article about which and when to use</p>
  <img src="landscape.jpg" alt="">
</section>

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

.hero {
    position: relative;
}

.hero img {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
}

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

Кроме того, я люблю использовать HTML<img>Особенностью является возможность добавить запасной вариант, если изображение не загружено. Fallback, по крайней мере, сохраняет читабельность содержимого.

.hero img {
    /* Other styles */
    background: #2962ff;
  }

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

Пример исходного кода:код спрей.IO/какая квота/спрей...

логотип сайта

Веб-сайтLogoважен, потому что он отличает веб-сайт от других веб-сайтов. Для встраивания логотипа у нас есть несколько вариантов:

*<img> -> png,jpg, orsvg

Встроенный SVG
фоновая картинка

Далее посмотрим, какой способ больше подходит.

Логотип с большим количеством деталей

Используйте его как вставку, когда логотип имеет много деталей или форм.SVGПользы наверное никакой. я рекомендую использовать<img>, тип изображения может бытьpng,jpgилиsvg.

Простой логотип, который нуждается в анимации

У нас есть простой логотип с формами и текстом. Фигуры и текст должны менять цвет при наведении. Как это сделать? Лучшее решение для меня — использовать встроенный SVG.

HTML

<a href="#">
    <svg class="logo" width="115" height="47" xmlns="http://www.w3.org/2000/svg">
      <g transform="translate(-5 -5)" fill="none" fill-rule="evenodd">
        <rect fill="#D8D8D8" transform="rotate(45 28.5 28.5)" x="9" y="9" width="39" height="39" rx="11" />
        <text font-family="Rubik-Medium, Rubik" font-size="25" font-weight="400" fill="#6F6F6F">
          <tspan x="63.923" y="36.923">Rect</tspan>
        </text>
      </g>
    </svg>
</a>

CSS

.logo rect,
.logo text {
  transition: 0.3s ease-out;
}

.logo:hover rect,
.logo:hover text {
  fill: #4a7def;
}

Пример исходного кода:код спрей.IO/какая квота/спрей...

Логотип ответа

это напоминает мне оSmashing Magazineлоготип. Мне нравится, что он идет от маленькой иконки до полного логотипа. См. модель ниже:

Идеальное решение — использовать<picture>элемент, куда можно добавить две версии логотипа. Следующим образом:

<a class="logo" href="/">
    <picture>
      <source media="(min-width: 1350px)" srcset="sm-logo--full.svg"><img src="sm-logo.svg" alt="Smashing Magazine"></picture>
  </a>

В CSS нам нужно изменить ширину области просмотра, чтобы она была равна или больше1350px.

.logo {
  display: inline-block;
  width: 45px;
}

@media (min-width: 1350px) {
  .logo {
    width: 180px;
  }
}

Это простое и понятное решение.

Пример исходного кода:код спрей.IO/какая квота/спрей...

Логотип с градиентом

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

Используя SVG, мы можем легкоlogoДобавьте градиент. я добавил<linearGradient>И заполните его как текст.

<svg class="logo" width="115" height="47" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <linearGradient id="gradient" x1="0%" y1="100%" x2="0%" y2="0%">
        <stop offset="0%" stop-color="#4a7def"></stop>
        <stop offset="50%" stop-color="#ab4787"></stop>
      </linearGradient>
    </defs>
      <g transform="translate(-5 -5)" fill="none" fill-rule="evenodd">
        <rect fill="#AB4787" transform="rotate(45 28.5 28.5)" x="9" y="9" width="39" height="39" rx="11" />
        <text font-family="Rubik-Medium, Rubik" font-size="30" font-weight="400" fill="url(#gradient)">
          <tspan x="63.923" y="36.923">Rect</tspan>
        </text>
      </g>
</svg>

Пример исходного кода:код спрей.IO/какая квота/спрей...

изображение профиля

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

Во-первых, давайте посмотрим на модель ниже. Обратите внимание, что у нас идеальный аватар, и100％Чисто.

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

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

у нас есть несколько вариантов

<img>элемент
<img>а также<div>элемент
<div>фон с css
SVG <image>

Какой из них лучше? Давайте исследовать.

Использовать HTML`<img>`

Вашей первой мыслью может быть добавление рамки, не так ли? Давайте рассмотрим это.

.avatar {
    border: 2px solid #f2f2f2;
}

Наша цель — заставить внутреннюю границу сливаться с изображением, что не очень практично.

использовать`<img>`а также`<div>`элемент

Теперь проблема в том, чтобы добавить внутреннюю границу, мы не можем использоватьbox-shadowПотому что его нельзя использовать на изображении. Решение<div>Оберните аватар и добавьте элемент, посвященный внутренней границе.

HTML

<div class="avatar-wrapper">
     <img class="avatar" src="shadeed2.jpg" alt="A photo of Ahmad Shadeed">
     <div class="avatar-border"></div>
</div>

CSS

.avatar-wrapper {
  position: relative;
  width: 150px;
  height: 150px;
}

.avatar-border {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.1);
}

в<div>Используя черную рамку с непрозрачностью 10%, мы можем гарантировать, что граница сливается с темным изображением и видна только в том случае, если изображение светлее. См. модель ниже:

Адрес дела:код спрей.IO/какая квота/спрей...

использовать`<div>`фон с css

если бы я использовал<div>для отображения аватара, это может указывать на то, что изображение носит декоративный характер. Я помню один вариант использования, это были случайные аватарки, разбросанные по странице.

HTML

<div class="avatar" style="--img-url: url(shadeed2.jpg)"></div>

CSS

.avatar {
  background: var(--img-url) center/cover;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(#000, 0.1);
}

Адрес дела:код спрей.IO/какая квота/спрей...

Используйте SVG`<image>`

Для меня это самое интересное решение. Я заметил это, проверяя новый дизайн Facebook.

<svg role="none" style="height: 36px; width: 36px;">
  <mask id="avatar">
    <circle cx="18" cy="18" fill="white" r="18"></circle>
  </mask>
  <g mask="url(#avatar)">
    <image x="0" y="0" height="100%" preserveAspectRatio="xMidYMid slice" width="100%" xlink:href="avatar.jpg" style="height: 36px; width: 36px;"></image>
    <circle cx="18" cy="18" r="18"></circle>
  </g>
</svg>

Давайте сначала разберем его, он содержит следующее:

маска для обрезки изображения в круг
Группа, к которой применена маска
imageсам с собойpreserveAspectRatio =“ xMidYMid”
круг для внутренней границы

circle {
  stroke-width: 2;
  stroke: rgba(0, 0, 0, 0.1);
  fill: none;
}

Адрес дела:код спрей.IO/какая квота/спрей...

оригинал:Developers.Google.com/Web/Женщины большие…

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

общаться с

Статья постоянно обновляется каждую неделю. Вы можете выполнить поиск «Big Move to the World» в WeChat, чтобы прочитать и обновить ее как можно скорее (на одну или две статьи раньше, чем в блоге). Эта статья находится на GitHub.GitHub.com/QQ449245884…Он был включен, и многие мои документы были разобраны. Добро пожаловать в Звезду и совершенство. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Кроме того, обратите внимание на паблик-аккаунт и ответьте в фоновом режиме.Благосостояние, вы можете увидеть преимущества, вы знаете.

HTML <img>элемент

Установить свойства ширины и высоты

Скрытое изображение с помощью CSS

Проблема доступности

адаптивные изображения

изменить размер изображения

CSS фоновое изображение

Как использовать фоновые изображения CSS

несколько фонов

скрыть изображение

проблемы доступности

псевдоэлемент

SVG <Image>

проблемы доступности

Не-разработчики не могут скачать

Пример

Hero Section

Решение 1

Решение 2

логотип сайта

Логотип с большим количеством деталей

Простой логотип, который нуждается в анимации

Логотип ответа

Логотип с градиентом

изображение профиля

Использовать HTML<img>

использовать<img>а также<div>элемент

использовать<div>фон с css

Используйте SVG<image>

общаться с

HTML `<img>`элемент

SVG `<Image>`

Использовать HTML`<img>`

использовать`<img>`а также`<div>`элемент

использовать`<div>`фон с css

Используйте SVG`<image>`