[Инвентарь] Как оптимизировать картинки в проекте

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

1. Введение

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

2. Использование концепции

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

2-1. Сжатие изображений

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

2-2.base64 вместо маленьких иконок

Для некоторых значков меньшего размера используйте вместо этого кодировку base64, чтобы уменьшить количество HTTP-запросов. Но есть недостаток, что после преобразования в base64 кодировка будет больше, чем исходное изображение, и чем больше изображение, тем больше разница. Для иконок размером около 1К перекодированное base64 составляет около 1,1К-2К. Если это изображение размером 8 КБ, размер перекодированного base64 может превышать 10 КБ. Что касается разработки вашего собственного проекта, то будут перекодированы только значки размером менее 4K.

2-3.icon-шрифт вместо иконок

Так как icon-font выглядит как картинка, на самом деле это шрифт.

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

Недостатки: нужно импортировать много файлов (.svg,.ttf,.woff,.eot). Размер файла также относительно большой. Использовать иконку-шрифт рекомендуется только в том случае, если иконка проекта достигает определенного количества, если иконок несколько, использовать картинки. Если вам нужно импортировать больше значков, рекомендуется использовать шрифт значков.

Упомянутый выше значок-шрифт не поддерживает многоцветные значки, потому что это шрифт. Я узнал, что теперь icon-font может поддерживать многоцветные значки (ссылка на символ). Это просто несовместимо.

2-4. Спрайт

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

Плюсы: уменьшает количество http-запросов.

Минусы: позиционирование и изменение размера фона на мобильных устройствах немного громоздки.

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

1. Не объединяйте все картинки на странице, например, интеграция логотипа разрушит смысловую структуру html. Не сочетайте баннеры со сложными изображениями

2. Старайтесь интегрировать только значки с похожими цветами на одно изображение.Если цветовая разница между изображениями слишком велика, объединенное изображение может быть очень большим.

2-5. Адаптивные изображения

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

В следующем примере, например, на странице есть этот значок

В некоторых случаях это будет следующий цвет.

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
			    /*容器必须有背景*/
    			    background: #09f;
    			    display: inline-block;
			}
			img{
			    width: 100px;
			    vertical-align: top;
			}
			img:hover{
			    /*设置混合模式*/
			    mix-blend-mode: lighten;
			}
		</style>
	</head>
	<body>
		<div><img src="images/icon-good.jpg" class="u-icon"/></div>
		<div><img src="images/icon-good.png" class="u-icon"/></div>
	</body>
</html>

текущий результат

После показа режима смешивания, кстати, фонового режима смешивания 。 Использование в основном такое же, за исключением того, что mix-blend-mode действует на режим наложения html-элемента, а background-blend-mode действует на режим наложения фона элемента.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				display: inline-block;
				width: 100px;
				height: 100px;
				/*设置背景*/
				background: url(images/icon-good.jpg) no-repeat center,#09f;
				background-size:100%;
				/*设置背景混合模式*/
				background-blend-mode: lighten;
			}
			
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

Меры предосторожности

1. Изображение должно быть однотонным значком на белом фоне.

2. Современные браузеры, браузеры, поддерживающие это свойство

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

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

Две строки кода CSS для реализации технологии произвольного назначения цвета изображениям.

Невероятный режим смешивания цветов

Невероятный режим наложения

2-7 Простые иконки рисуются с помощью CSS

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

Насколько я понимаю, больше всего на проекте нарисованы всевозможные стрелки

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.icon-arrow-bottom { 
				width: 0; 
				height: 0; 
				border: 100px solid #000; 
				border-color: #000 transparent transparent transparent; 
			}
			.icon-arrow-top { 
				width: 0; 
				height: 0; 
				border: 100px solid #000; 
				border-color: transparent transparent #000 transparent; 
			}
		</style>
	</head>
	<body>
		<div class="icon-arrow-bottom"></div>
		<div class="icon-arrow-top"</div>
	</body>
</html>

Плюсы: векторное масштабирование, переменные цвета, не нужно отправлять запрос

Недостатки: Подходит только для простой графики, рекомендуется использовать 1-5 строк кода CSS, и не рекомендуется более 1-5 строк кода CSS. Думать об этом больно, писать хлопотно, на это уходит много времени, эффект может быть не лучше, чем у других программ. Рекомендуется неподвижное изображение base64 или иконочный шрифт.

Вот простой пример, вам нужно знать, какую графику можно нарисовать с помощью css3. См. ссылки.

Графические эффекты на чистом CSS

Прекрасные формы CSS (графика CSS)

[CSS] Рисование иконок с помощью CSS (Icon Daquan)

3. Неявная предварительная загрузка

1. Начните здесь. Следующая демонстрация, некоторые из них будут использоватьсяecDoЭта библиотека (общая библиотека функций, написанная мной, добро пожаловать в звезду). Он был представлен в предыдущей статье и не будет повторяться здесь. Если вы не знаете, щелкните соответствующий API, запустите его и отладьте.

2. Для удобства отображения, в демо ниже, кроме ленивой загрузки, скорость сети подстроена под медленный 3G в сети.

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

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

<body>
    <p><img src="lawyerOtherImg.jpg"/></p>
    <p>这是预加载的图片</p>
    <div>
        <img data-src="https://materialdb.zhaoyl.com/201809/106796.jpg" class="load-img" width="100" height="100"/><img
            data-src="https://materialdb.zhaoyl.com/201809/105567.jpg" class="load-img" width="100" height="100"/><img
            data-src="https://materialdb.zhaoyl.com/201809/103097.jpg" class="load-img" width="100" height="100"/><img
            data-src="https://materialdb.zhaoyl.com/201809/10205.jpg" class="load-img" width="100" height="100"/><img
            data-src="https://materialdb.zhaoyl.com/201809/001.jpg" class="load-img" width="100" height="100"/>
    </div>
</body>

//测试请先清空缓存
window.onload = function () {
    ecDo.loadImg('load-img', function () {
        console.log('加载完毕')
    });
}

Меры предосторожности:

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

2. Таким образом, время ожидания пользователя относительно короткое. Но картинка слишком большая, так что будьте осторожны. Потому что этот метод не может гарантировать, что пользователь сможет загрузить картинку следующего экрана (например, при просмотре первого экрана нужно загрузить второй экран) при просмотре, чтобы пользователь не воспринимал его. Если следующий экран переключателя не загружен, это также может повлиять на работу.

demo:GitHub.com/Утренняя встреча YJ/О…

4. Явная предварительная загрузка

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

<style>
    div{
        display: none;
    }
</style>
<body>
    <p id="p">显示预加载进行中</p>
    <div id="div">
        <img data-src="https://materialdb.zhaoyl.com/201809/106796.jpg" class="load-img" width="100" height="100"/><img
            data-src="https://materialdb.zhaoyl.com/201809/105567.jpg" class="load-img" width="100" height="100"/><img
            data-src="https://materialdb.zhaoyl.com/201809/103097.jpg" class="load-img" width="100" height="100"/><img
            data-src="https://materialdb.zhaoyl.com/201809/10205.jpg" class="load-img" width="100" height="100"/><img
            data-src="https://materialdb.zhaoyl.com/201809/001.jpg" class="load-img" width="100" height="100"/>
    </div>
</body>

let oP1=document.getElementById('p');
let oDiv=document.getElementById('div');
//测试请先清空缓存
window.onload = function () {
    ecDo.loadImg('load-img', function () {
        oDiv.style.display='block';
        oP1.style.display='none';
    });
}

Меры предосторожности:

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

демонстрационный адрес:GitHub.com/Утренняя встреча YJ/О…

5. Ленивая загрузка

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

<body>
    <p><img data-src="lawyerOtherImg.jpg" class="load-img" width='528' height='304'/></p>
    <p><img data-src="lawyerOtherImg.jpg" class="load-img" width='528' height='304'/></p>
    <p><img data-src="lawyerOtherImg.jpg" class="load-img" width='528' height='304'/></p>
    <p><img data-src="https://materialdb.zhaoyl.com/201809/105567.jpg" class="load-img" width='528' height='304'/></p>
    <p><img data-src="https://materialdb.zhaoyl.com/201809/106796.jpg" class="load-img" width='528' height='304'/></p>
    <p><img data-src="https://materialdb.zhaoyl.com/201809/103097.jpg" class="load-img" width='528' height='304'/></p>
    <p><img data-src="https://materialdb.zhaoyl.com/201809/10205.jpg" class="load-img" width='528' height='304'/></p>
    <p><img data-src="https://materialdb.zhaoyl.com/201809/001.jpg" class="load-img" width='528' height='304'/></p>
</body>

window.onload = function () {
    //根据load-img 这个 class 遍历，元素距离页面底部 100像素的时候就开始加载，加载错误就显示error.jpg
    ecDo.delayFn(ecDo.lazyLoadImg('load-img', 100, 'error.jpg'),100,200);
    window.onscroll = function () {
        ecDo.delayFn(ecDo.lazyLoadImg('load-img', 100, 'error.jpg'),100,200);
    }
}

demo:GitHub.com/Утренняя встреча YJ/О…

6. Картинка не загружается и отображается картинка по умолчанию

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

Следующее также является простой реализацией.

Например, есть такая картинка на сайте

<p><img src="error.jpg" data-src="https://materialdb.zhaoyl.com/201809/105567.jpg" width="264"/></p>
<p><img src="error.jpg" data-src="https://materialdb.zhaoyl.com/201809/106796.jpg" width='264'/></p>
<p><img src="error.jpg" data-src="https://materialdb.zhaoyl.com/201809/1067961.jpg" width='264'/></p>

В сети скорость сети настроена на медленную 3G для облегчения отладки.

//测试前请先清空缓存
window.onload = function () {
    let oImg=document.getElementsByTagName('img');
    for(let i=0;i<oImg.length;i++){
        ecDo.aftLoadImg({
            dom:oImg[i],
            url:oImg[i].dataset.src,
            errorUrl:oImg[i].src
        })
    }
}

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

демо:GitHub.com/Утренняя встреча YJ/О…

7. Резюме

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

------------------------- Великолепная разделительная линия --------------------

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