Как оптимизация изображения снизила вес страницы моего веб-сайта на 62%

kak optimizacziya izobrazheniya snizila ves straniczy moego veb sajta na 62?v=1656580330

автор Айо Исайя

L8RkRmmMkJkUGihSW0fen7hPPTh2Io53CAPL
Фото: Сорагрит Вонгса на Unsplash

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

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

На своем сайте я заметил, что вес страницы моей домашней страницы превышает 1,1 МБ, а изображения составляют до 88% этого веса. Я также понял, что обслуживаю изображения, которые были больше, чем они должны быть (с точки зрения разрешения). Очевидно, было много возможностей для усовершенствования.

vEaHEInUtuxemq-A0cPhQA9yCbBVSWsBfwyJ

Я начал с чтения замечательной электронной книги «Основная оптимизация изображений» Адди Османи и продолжил воплощать его рекомендации на своем веб-сайте. Затем я провел некоторые исследования по адаптивным изображениям и также применил это.

Это снизило вес страницы до 445 Кб. Уменьшение веса страницы примерно на 62%!

X6zYsxiNumBdIySf8c7m70U8bdImRgtq8Ikk

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

Что такое сжатие изображения?

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

Использовать imageminубедитесь, что у вас установлен Node.js, а затем откройте окно терминала, cd в папку вашего проекта и выполните следующую команду:

npm install imagemin

Затем создайте новый файл с именем imagemin.js и вставьте следующее содержимое:

const imagemin = require('imagemin');const PNGImages="assets/images/*.png";const JPEGImages="assets/images/*.jpg";const output="build/images";

Не стесняйтесь изменять значение PNGImages, JPEGImages и output чтобы соответствовать структуре вашего проекта.

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

Сожмите файлы JPEG с помощью MozJPEG.

Для сжатия изображений JPEG я использовал инструмент MozJPEG от Mozilla, который доступен как плагин Imagemin через imagemin-mozjpeg. Вы можете установить его, выполнив следующую команду:

npm install imagemin-mozjpeg

Затем добавьте следующее к своему imagemin.js файл:

const imageminMozjpeg = require('imagemin-mozjpeg');
const optimiseJPEGImages = () =>  imagemin([JPEGImages], output, {    plugins: [      imageminMozjpeg({        quality: 70,      }),    ]  });
optimiseJPEGImages()  .catch(error => console.log(error));

Вы можете запустить скрипт, запустив node imagemin.js в терминале. Это обработает все изображения JPEG и поместит оптимизированные версии в файл build/images папку.

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

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

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

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

Если вы предпочитаете вместо этого использовать базовые JPEG, вы можете установить progressive к false в объекте параметров Также не забудьте посетить страницу imagemin-mozjpeg, чтобы увидеть другие доступные настройки, с которыми можно повозиться.

Оптимизируйте изображение PNG с помощью pngquant

pngquant – мой любимый инструмент для оптимизации изображений PNG. Вы можете использовать его через imagemin-pngquant:

npm install imagemin-pngquant

Затем добавьте следующее к своему imagemin.js файл:

const imageminPngquant = require('imagemin-pngquant');
const optimisePNGImages = () =>  imagemin([PNGImages], output, {    plugins: [      imageminPngquant({ quality: '65-80' })    ],  });
optimiseJPEGImages()  .then(() => optimisePNGImages())  .catch(error => console.log(error));

Я нашел а quality уровень 65-80 обеспечивают хороший компромисс между размером файла и качеством изображения.

Посредством этих настроек я смог получить снимок экрана моего сайта размером от 913 КБ до 187 КБ без видимой потери качества. Скидка на 79%!

Вот оба файла. Посмотрите и судите сами:

Подавайте изображения WebP браузерам, поддерживающим их.

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

Визуальное качество изображений WebP часто сравнивается как с JPEG, так и PNG, но обычно имеет значительно меньший размер файла. Например, когда я преобразовал снимок экрана сверху в WebP, я получил файл размером 88 КБ, качество которого было сравнимо с оригинальным изображением в 913 КБ. Снижение на 90%!

Посмотрите на все три изображения. Вы можете сказать разницу?

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

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

В момент написания статьи Firefox, Safari и Edge были заметными браузерами без поддержки WebP.

qglmcsNlDYBO1Qz6sZDRagxiBq498i3jbqRl

Однако, по данным caniuse.com, браузеры, поддерживающие WebP, используют более 70% пользователей во всем мире. Это означает, что, обслуживая изображения WebP, вы можете сделать свои веб-страницы быстрее примерно для 70% ваших клиентов.

Давайте рассмотрим точные шаги по размещению изображений WebP в Интернете.

Преобразуйте файлы JPEG и PNG в WebP

Преобразование изображений JPEG и PNG в WebP достаточно легко с помощью плагина imagemin-webp.

Установите его, выполнив такую ​​команду в своем терминале:

npm install imagemin-webp

Затем добавьте следующее к своему imagemin.js файл:

const imageminWebp = require('imagemin-webp');
const convertPNGToWebp = () =>  imagemin([PNGImages], output, {    use: [      imageminWebp({        quality: 85,      }),    ]  });
const convertJPGToWebp = () =>  imagemin([JPGImages], output, {    use: [      imageminWebp({        quality: 75,      }),    ]  });
optimiseJPEGImages()  .then(() => optimisePNGImages())  .then(() => convertPNGToWebp())  .then(() => convertJPGToWebp())  .catch(error => console.log(error));

Я нашел эту настройку quality к 85 создает изображения WebP, которые по качеству подобны их эквиваленту PNG, но значительно меньше. Для файлов JPEG я нашел, что настройки quality к 75 дает мне приличный баланс между качеством изображения и размером файла.

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

Подавать изображения WebP в формате HTML

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

<picture>    <source image/webp">    <source image/jpg">    <img src=" alt=""></picture>

С помощью этой разметки браузеры понимают image/webp media type загрузит вариант WebP и отобразит его, в то время как другие браузеры вместо этого будут загружать вариант JPEG.

Любой браузер, не понимающий <picture> пропустит all the источник и загрузка, что не определено in the src атрибут of tтэг img внизу. Таким образом, мы постепенно усовершенствовали нашу страницу, оказывая поддержку для всех классов браузеров.

mCVE11B4KRZOBUDJL-pWYotGbwFpfmwt1t6U

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

The <picture> tag и др.l the источник, определенный внутри, только там, чтобы браузер мог выбрать, какой вариант изображения использовать. После выбора исходного изображения его URL-адрес подается to tон тег img, и это то, что отображается.

Это значит, что вам не нужно стилизовать <pictuре&гt; or исходные тэги, поскольку они не отображаются браузером. Так что вы можете продолжать укладку just tон тег img по-прежнему.

Завершите

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

Спасибо, что прочли!

Первоначально опубликовано на freshman.tech 15 июля 2018 года.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *