Переводчик: Front-end Xiaozhi
Автор: Айо Исайя
источник:www.freecodecamp.org/
Чем больше вы знаете, тем больше вы не знаете
Ставьте лайк и смотрите снова, формируйте привычку
эта статьяГитхаб:GitHub.com/QQ449245884…Он был включен в вышеизложенное, и более ранние статьи с высокими похвалами были классифицированы, а также было систематизировано множество моих документов и учебных материалов. Добро пожаловать в Star and Perfect. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Надеюсь, у нас что-то получится вместе.
Чтобы обеспечить удобочитаемость, в этой статье используется вольный перевод, а не дословный перевод.
Изображения являются одним из самых основных типов контента, доступных в Интернете. Они говорят, что картинка стоит тысячи слов. Но если не быть внимательным, размер изображения иногда может достигать десятков мегабайт.
Таким образом, хотя веб-изображения должны быть четкими и четкими, их размер можно уменьшить, чтобы поддерживать время загрузки на приемлемом уровне.
На своем веб-сайте я заметил, что размер страницы моей домашней страницы превышает1.1MB, изображения около 88%, я также заметил, что предоставленные мной изображения были больше, чем нужно (с точки зрения разрешения), очевидно, есть много возможностей для улучшения.
Я начал читать превосходную книгу Эдди Османи.Essential Image Optimizationebook и начал оптимизировать изображения на моем сайте, как они предложили. , затем изучил адаптивные изображения и применил их.
Это уменьшает размер страницы до445kb,о62% !
Что такое сжатие изображения?
Сжатие изображения заключается в уменьшении размера файла при сохранении изображения в приемлемом диапазоне резкости, я использую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/JPG
Преимущества JPG
Самая большая особенность JPG заключается в том, чтосжатие с потерями. Этот эффективный алгоритм сжатия делает его очень легким форматом изображения. С другой стороны, несмотря на то, что это называется сжатием с потерями, метод сжатия JPG по-прежнему является методом сжатия высокого качества: когда мы сжимаем объем изображения менее чем до 50% от исходного размера, JPG все еще может поддерживать 60% %. качественный. Кроме того, формат JPG хранит одно изображение в 24 бита и может отображать до 16 миллионов цветов, что достаточно для удовлетворения требований к цвету в большинстве сцен, что определяет потерю качества до и после сжатия, которую нелегко обнаружить. нашими человеческими глазами Осведомленность - при условии, что вы используете правильный бизнес-сценарий.
Сценарии использования JPG
JPG подходит для представления цветных изображений.В нашей повседневной разработке изображения JPG часто появляются в виде больших фоновых изображений, карусельных изображений или изображений баннеров.
Дефекты JPG
Сжатие с потерями действительно трудно показать на карусели, показанной выше, но когда речь идет об изображениях с четкими линиями и сильным цветовым контрастом, таких как векторная графика и логотипы, размытие изображений, вызванное искусственным сжатием, будет совершенно очевидным.
Кроме того, изображения JPEG не поддерживают обработку прозрачности, прозрачные изображения должны вызывать PNG для рендеринга.
Сжать jpeg с помощью MozJPEG
Использование MozillaMozJPEGинструмент, который может бытьimagemin-mozjpegИспользуется как плагин Imagemin. Вы можете установить его, выполнив следующую команду:
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 из-за способа кодирования.
Вы можете использовать это, предоставленное Sindre Sorhusинструмент командной строкичтобы проверить, является ли изображение JPEG прогрессивным.
Адди Османи дала хороший обзор использования прогрессивного JPEG.Преимущества и недостатки. Для меня плюсы перевешивают минусы, поэтому я придерживаюсь настроек по умолчанию.
Если вы предпочитаете использовать необработанные файлы JPEG, вы можетеoptionsобъект генерал-лейтенантprogressiveустановить на фаlсе. Также убедитесь,imagemin-mozjpegИзменения версии, проверьте соответствующий документ еще раз.
PNG (PNG-8 и PNG-24)
####Плюсы и минусы PNG
PNG (Portable Network Graphics) — это формат изображения высокой точности со сжатием без потерь. 8 и 24, здесь оба являются количеством цифр в двоичных числах. Согласно соответствию, упомянутому в наших предварительных знаниях, 8-битный PNG поддерживает до 256 цветов, а 24-битный PNG может отображать около 16 миллионов цветов.
Изображения PNG имеют более сильную цветопередачу, чем JPG, более деликатно обрабатывают линии и имеют хорошую поддержку прозрачности. Это компенсирует ограничения JPG, о которых мы упоминали выше, единственным недостатком являетсяслишком большой.
Сценарии применения PNG
Как мы упоминали ранее, если вы используете PNG для обработки сложных и красочных изображений, стоимость будет относительно высокой, и мы, как правило, передаем его в JPG для хранения.
Учитывая преимущества PNG в работе с контрастом линий и цветов, мы в основном используем его для рендеринга небольших логотипов, простых и контрастных изображений или фонов и т. д.
Оптимизируйте изображения 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
WebP обрабатывает детализированные изображения, такие как JPEG, поддерживает прозрачность, например PNG, и может отображать динамические изображения, такие как GIF, — он сочетает в себе преимущества нескольких форматов файлов изображений. В официальном введении к WebP есть более авторитетное заявление по этому поводу:
По сравнению с PNG, изображения WebP без потерь на 26% меньше по размеру. При эквивалентном индексе качества SSIM изображения WebP с потерями на 25-34% меньше, чем сопоставимые изображения JPEG. WebP без потерь поддерживает прозрачность (также известную как альфа-канал) всего с 22% дополнительных байтов. В случаях, когда допустимо сжатие RGB с потерями, WebP с потерями также поддерживает прозрачность, обычно предлагая 3-кратный размер файла по сравнению с PNG.
Подавайте изображения WebP в браузеры, которые их поддерживают
WebP— это относительно новый формат, представленный Google с целью обеспечения меньшего размера файла путем кодирования изображений в формате без потерь и с потерями, что делает его хорошей альтернативой JPEG и PNG.
Изображения WebP часто сравнимы по четкости с JPEG и PNG, но имеют гораздо меньший размер файла. Например, когда я конвертирую снимок экрана выше в WebP, я получаю файл размером 88 КБ, который по качеству сравним с исходным изображением размером 913 КБ,90% скидка!
Глядя на эти три картинки, можете ли вы найти разницу?
Лично я думаю, что визуальные эффекты сравнимы, а экономия размера не является незначительной.
Теперь, когда мы осознали ценность использования формата WebP там, где это возможно, важно отметить, что он не является полной заменой JPEG и PNG, поскольку поддержка WebP браузерами не является широко распространенной.
На момент написания этой статьи браузеры Firefox, Safari и Edge не поддерживают WebP.
Однако, согласноcaniuse.comСогласно данным, более 70% пользователей во всем мире используют браузеры с поддержкой WebP. Это означает, что около 70% клиентов могут иметь более быстрые веб-страницы и лучший опыт, используя изображения 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Может найти хороший баланс между визуальными эффектами и размером файла.
Подавать изображения WebP в формате HTML
Если у вас есть изображения WebP, вы можете использовать следующую разметку, чтобы показывать их в браузерах, которые могут их использовать, при этом используя png или jpeg для браузеров, которые не совместимы с WebP.
<picture>
<source srcset="sample_image.webp" type="image/webp">
<source srcset="sample_image.jpg" type="image/jpg">
<img src="sample_image.jpg" alt="">
</picture>
Используйте эту разметку, чтобы понятьimage/webpБраузеры медиа-типа будут загружать изображение Webp и отображать его, в то время как другие браузеры будут загружать изображение JPEG.
любой не поддерживается<picture>браузеры пропустят всеsourceвкладку и загрузите нижнюю частьimgЭтикетка. Поэтому мы постепенно улучшали наши страницы, обеспечивая поддержку всех классов браузеров.
Обратите внимание, что во всех случаях тег img — это то, что фактически отображается на странице, так что это действительно обязательная часть синтаксиса. Если тег img опущен, изображение отображаться не будет.
ярлык и все определения в немsourceвсе есть, чтобы браузер мог выбрать путь к используемому изображению. Когда исходное изображение выбрано, его URL-адрес передается тегу img, и это то, что отображается.
Это означает, что вам не нужно устанавливать<picture>илиsourceстиль разметки, так как браузер не отображает эту разметку. Таким образом, вы можете продолжать использовать, как и раньшеimgЭтикетки стилизованы.
Суммировать
Как видите, процесс оптимизации изображений для использования в Интернете не сложен. Сокращая время загрузки страницы, вы можете повысить удобство работы для своих клиентов. Надеюсь, эта статья поможет вам и вместе мы добьемся прогресса!
оригинал: medium.free code camp.org/image-op Тим…
общаться с
Статья постоянно обновляется каждую неделю. Вы можете выполнить поиск «Big Move to the World» в WeChat, чтобы прочитать и обновить ее как можно скорее (на одну или две статьи раньше, чем в блоге). Эта статья находится на GitHub.GitHub.com/QQ449245884…Он был включен, и многие мои документы были разобраны. Добро пожаловать в Звезду и совершенство. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Кроме того, обратите внимание на паблик-аккаунт и ответьте в фоновом режиме.Благосостояние, вы можете увидеть преимущества, вы знаете.