Повысьте производительность и привлеките пользователей с помощью этих советов по оптимизации изображений для ваших веб-приложений.
В этой статье мы рассмотрим эффективные методы оптимизации изображений, которые значительно улучшат производительность вашего веб-приложения. Итак, давайте углубимся!
1. Форматы изображений
Выбор правильного формата изображения для каждого типа изображения может существенно повлиять на размер и качество файла изображения. Вот список различных форматов изображений, которые вы можете использовать для своего приложения.
а. WebP
WebP — это формат изображений, разработанный Google, который предлагает лучшее сжатие и меньшие размеры файлов по сравнению с JPEG и PNG. Он поддерживается большинством современных браузеров (за исключением некоторых версий Safari и Internet Explorer). Чтобы использовать WebP, вы можете указать в своем HTML как WebP, так и резервные форматы, такие как JPEG или PNG.
<!-- 👇 Set image sources with different formats in the `srcSet`
the attribute in order of preference -->
<!-- 👇 Fallback image source for browsers that don't
support srcSet in `src` attribute -->
<img
srcset="car.webp, car.jpg"
src="car.jpg"
alt="Car"
/>
б. JPEG 2000
JPEG 2000 — еще один формат изображений высокого качества с хорошим сжатием. Однако его поддержка в браузерах ограничена. Как и в случае с WebP, вы можете предоставить версию JPEG 2000 и резервные форматы.
<img srcset="car.jp2, car.jpg" src="car.jpg" alt="Car" />
в. АВИФ
AVIF — это новый формат изображений, обеспечивающий превосходное сжатие и качество изображения. Он поддерживается в современных браузерах, таких как Chrome и Firefox.
<img srcset="car.avif, car.jpg" src="car.jpg" alt="Car" />
В то время как WebP и AVIF поддерживаются современными браузерами, поддержка JPEG 2000 ограничена. Поэтому очень важно протестировать свой веб-сайт или приложение в разных браузерах, чтобы обеспечить правильное отображение изображений для всех пользователей.
2. Адаптивные изображения
Адаптивные изображения позволяют отображать разные изображения в зависимости от устройства пользователя и размера экрана. Это предотвращает загрузку больших изображений на меньшие экраны, экономя пропускную способность. Для этого используйте атрибуты srcset и sizes в элементе img:
<img src="small.jpg"
srcset="medium.jpg 800w,
large.jpg 1200w,
xlarge.jpg 1600w"
sizes="(max-width: 600px) 100vw,
(max-width: 1200px) 50vw,
33vw"
alt="Responsive Image">
sizes — информирует браузер о предполагаемом размере отображаемого изображения на основе медиа-запросов. Это не влияет на то, какое изображение браузер выбирает для загрузки. srcset — перечисляет несколько источников изображений с дескрипторами ширины (800w). Каждый дескриптор ширины представляет фактическую ширину изображения в пикселях. Когда браузер встречает оба атрибута (sizes и srcset), он выполняет следующие действия:
- Он оценивает атрибут
sizes, чтобы определить предполагаемый размер отображения изображения на основе ширины окна просмотра устройства. - Затем он использует этот рассчитанный размер вместе с доступными дескрипторами ширины в
srcset, чтобы решить, какое изображение загрузить. Браузер выбирает изображение с ближайшим дескриптором ширины (ближайшим к рассчитанному размеру) изsrcset.
3. Ленивая загрузка
Ленивая загрузка — это метод, который откладывает загрузку изображений до тех пор, пока они не станут видимыми в окне просмотра пользователя. Это сокращает время начальной загрузки страницы. Используйте атрибут loading="lazy" для элемента img (по умолчанию атрибут loading установлен как eager)
<img src="image.jpg" alt="Image" loading="lazy">
4. Предварительная загрузка и кэширование
Предварительно загрузите важные изображения, чтобы уменьшить задержку, когда они действительно необходимы. Используйте тег link с rel="preload" в заголовке вашего HTML:
<link rel="preload" href="image.jpg" as="image">
Кроме того, рассмотрите возможность использования сервис-воркеров для кэширования изображений для последующих посещений. Ниже приведен базовый пример использования сервис-воркера для кэширования изображений.
// Service worker code (sw.js)
self.addEventListener('install', event => {
event.waitUntil(
caches.open('images-cache').then(cache => {
return cache.addAll([
'image.jpg',
'other-image.jpg',
// Add more images to the cache here
]);
})
);
});
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(response => {
return response || fetch(event.request);
})
);
});
В приложении React вы можете использовать пакет react-helmet, чтобы добавить ссылку предварительной загрузки в раздел заголовка HTML для важных изображений.
import React from 'react';
import { Helmet } from 'react-helmet';
import PreloadImage from './assets/preload-image.png';
const ImageComponent = () => {
return (
<>
<Helmet>
<link rel="preload" href={PreloadImage} as="image" />
</Helmet>
<img src={PreloadImage} alt="Preload image alt" />
</>
);
};
5. Спрайты изображений
Лист спрайтов изображений — это одно изображение, содержащее несколько меньших изображений или значков. Он используется для уменьшения количества HTTP-запросов при отображении множества небольших изображений на веб-странице. Загрузив один лист спрайтов, вы можете отображать определенные изображения, регулируя положение фона CSS.
Предположим, вы создаете веб-приложение для социальных сетей и хотите отображать различные значки для таких действий, как отметка «Нравится», комментирование и обмен. Каждый значок представляет собой небольшое изображение, которое обычно используется в разных частях приложения.
Без спрайтов изображения:
При традиционном подходе вы бы включили каждую иконку как отдельный файл изображения в свой HTML или CSS, например:
<!-- Separate images for each icon --> <img src="like-icon.png" alt="Like"> <img src="comment-icon.png" alt="Comment"> <img src="share-icon.png" alt="Share"> <!-- and so on... -->
С помощью спрайтов изображений:
Используя спрайты изображений, вы можете объединить все эти значки в один лист спрайтов, уменьшив количество HTTP-запросов. Вот пример того, как это будет выглядеть:
/* CSS using image sprites */
.icon {
background-image: url("icons-sprite.png");
background-repeat: no-repeat;
}
.like-icon {
background-position: 0 0;
width: 24px;
height: 24px;
}
.comment-icon {
background-position: -24px 0;
width: 24px;
height: 24px;
}
.share-icon {
background-position: -48px 0;
width: 24px;
height: 24px;
}
/* and so on... */
<div class="icon like-icon"></div>
<div class="icon comment-icon"></div>
<div class="icon share-icon"></div>
В этом примере все значки (лайки, комментарии, публикации и т. д.) объединены в один лист спрайтов icons-sprite.png. Классы CSS (например, .like-icon, .comment-icon, .share-icon) используют свойство background-position для отображения правильной части листа спрайтов в качестве фона для каждой иконки.
Преимущества:
- Вместо загрузки нескольких файлов изображений веб-приложение теперь загружает только одно изображение (
icons-sprite.png), уменьшая количество HTTP-запросов. - Лист спрайтов загружается один раз и может кэшироваться браузером, улучшая последующие загрузки страниц.
- Классы CSS управляют отображением отдельных значков на листе спрайтов, обеспечивая бесшовные эффекты наведения и прокрутки без дополнительных задержек загрузки.
- Это приводит к более быстрому и эффективному взаимодействию с пользователями и сокращению общего времени загрузки страниц.
6. Адаптивная подача изображений
Adaptive Image Serving — это метод, используемый в веб-разработке для доставки изображений, оптимизированных для конкретного устройства пользователя и сетевых условий. Адаптивная подача изображений направлена на обеспечение наилучшего качества изображения при минимальном размере файла изображения и обеспечении оптимальной производительности.
Обычно это обрабатывается CDN или сервером изображений с возможностями динамического изменения размера, и детали реализации могут различаться в зависимости от выбранной службы. Например, если вы предпочитаете использовать AWS CloudFront, перейдите по этой ссылке для получения дополнительной информации об оптимизации изображений: Блог AWS — Оптимизация изображений с помощью Amazon CloudFront и AWS Lambda.
7. Удалить метаданные
Удаление метаданных из изображений — важный шаг в оптимизации изображений. Поскольку метаданные изображения иногда могут занимать значительную часть размера файла изображения, особенно для изображений, снятых цифровыми камерами или смартфонами, путем удаления метаданных можно значительно уменьшить общий размер файла изображения, что приведет к более быстрой загрузке изображения на веб-страницах. . В этом могут помочь такие инструменты, как ImageMagick или онлайн-средство удаления метаданных изображений.
8. Используйте SVG для значков и логотипов
SVG идеально подходят для простых значков и логотипов, потому что они основаны на векторах и могут масштабироваться без потери качества.
<!-- logo.svg --> <svg width="100" height="100" viewBox="0 0 100 100"> <circle cx="50" cy="50" r="40" fill="blue" /> </svg> <!-- index.html --> <img src="logo.svg" alt="Logo">
Использование SVG для логотипов и значков обеспечивает легкое, масштабируемое и визуально привлекательное решение, которое повышает производительность веб-страницы, обеспечивает четкое изображение и улучшает общее взаимодействие с пользователем на различных устройствах и в различных браузерах.
9. Размеры изображения
Указание размеров изображения в HTML или CSS необходимо для предотвращения смещения макета и повышения скорости рендеринга страницы. Указав размеры изображения в HTML или CSS, вы предоставляете браузеру необходимую информацию, чтобы выделить правильное пространство для изображения во время начального процесса рендеринга.
Преимущества
- Предотвращает сдвиги макета: указание размеров гарантирует, что браузер знает точный размер изображения перед его загрузкой, что предотвращает внезапные сдвиги макета.
- Быстрая отрисовка страницы. Благодаря заранее известным размерам изображения браузер может отображать макет более эффективно, что приводит к ускорению загрузки страницы.
- Улучшенный пользовательский интерфейс. Благодаря устранению изменений макета пользователи получают более последовательный и приятный опыт просмотра.
Чтобы указать размеры изображения, вы можете напрямую включить атрибуты width и height в тег <img> или применить определенный стиль, добавив атрибут класса в тег <img> в CSS.
<img src="logo.jpg" alt="logo" width="300" height="200" />
<!-- or -->
.logo {
width: 300px;
height: 200px;
}
<img src="logo.jpg" alt="logo" class="logo" />
Бонус
Помимо методов, упомянутых выше, вы можете использовать такие методы, как Размытие для изображений-заполнителей, Прогрессивная загрузка изображения для постепенного улучшения качества (где изображение изначально отображается в низком разрешении). и постепенно улучшает качество по мере полной загрузки) и Автоматическое сжатие изображений с помощью Image CDN для более быстрой загрузки.
Надеюсь, вам действительно понравилось, и вы узнали некоторые ценные приемы. Есть много других методов оптимизации изображений, которые я не рассматривал, так что не стесняйтесь их исследовать. Если вы знаете какие-либо дополнительные методы, которые я не упомянул, оставьте комментарий.
Оставайтесь любопытными; Продолжайте кодировать.
