前端性能优化-图片优化

news2024/11/16 6:27:02

前言

本文总结 web 性能优化中图片优化的相关知识点。

一些背景知识

有损压缩（Lossy Compression）

有损压缩是一种图像压缩方法，通过牺牲一些图像细节以减小文件大小。JPEG 是一种常见的有损压缩图像格式。在压缩过程中，一些数据被永久性地丢失，因此每次重新保存图像时都会损失一些质量。

无损压缩（Lossless Compression）

无损压缩是一种图像压缩方法，可以减小文件大小但不会导致任何图像细节的永久性丢失。PNG 和 GIF 是常见的无损压缩图像格式。无损压缩对于需要保留原始图像质量的情况非常重要。

通道（Channel）

图像通道是指图像中的颜色信息分离成的不同部分。对于 RGB 图像，有三个通道，分别对应红色、绿色和蓝色。每个通道都包含图像中相应颜色的亮度信息。

Alpha 通道是图像中的额外通道，用于表示每个像素的透明度。RGBA 图像中的 A 表示 Alpha 通道，它控制像素的不透明度。

位图（Bitmap）

位图是由像素组成的图像，每个像素都有特定的颜色信息。JPEG、PNG 和 GIF 都是位图格式。缩放位图可能导致图像失真，特别是当放大图像时。

矢量图（Vector Graphic）

矢量图使用数学公式表示图像，而不是像素。它们可以无限缩放而不失真，因此适用于图标、标志等需要在不同尺寸下保持清晰度的图像。SVG（可缩放矢量图形）是一种常见的矢量图格式。

索引色（Indexed Color）

索引色是一种图像色彩模式，其中颜色信息存储在一个颜色索引表中。每个像素的颜色通过索引而不是直接的 RGB 值来表示。GIF 图像通常使用索引色。

直接色（Direct Color）

直接色是一种图像色彩模式，其中每个像素的颜色直接由 RGB 值表示，而不是通过索引。JPEG 和 PNG 图像通常使用直接色。

几种常见的图片格式

当选择图片格式时，需要考虑文件大小、图像质量、透明度和动画等因素。

JPEG

JPEG（JPG）是一种有损压缩的图像格式，主要适用于照片和真实场景图像。它的优点在于相对较小的文件大小和在高压缩比下保持较好的图像质量，但缺点是有损压缩可能导致图像细节的损失，而且不支持透明度。因此，JPEG 通常用于对图像质量要求较低，但需要高效传输的情况。

适用场景举例：

  • 照片展示：适用于网站上的照片展示、摄影作品等。
  • Banner 图：用于网站首页的大型横幅图片。
  • 图片背景：适合作为页面或元素的背景图。

PNG

PNG 是一种无损压缩的图像格式，特别适用于图形、图标和需要透明度的图像。它的优点在于支持透明度、无损压缩以及保持图像质量，但缺点是文件大小通常较大，不如 JPEG 适合压缩照片。PNG 常被选择用于需要保留细节并且支持透明背景的图像，如图标和图形。

适用场景举例：

  • 图标和图形：适用于包含透明度要求的图标和图形。
  • 网站 Logo：常用于需要带有透明背景的网站 Logo。
  • 屏幕截图：适合捕捉屏幕截图，并保留细节和透明背景。

GIF

GIF 是一种支持动画的图像格式，适用于简单动画和图形。它的优点包括支持透明度和动画，文件大小相对较小。然而，由于其色彩深度较低，不适用于照片等复杂图像。因此，GIF 通常被用于制作简单图形、图标以及需要动画效果的场景。

适用场景举例：

  • 简单动画：适用于制作简单的循环动画，如 loading 图标。
  • 表情动图：适合在聊天应用或社交媒体上使用的表情动图。

SVG

SVG（可缩放矢量图形）是一种基于 XML 的矢量图像格式，可无损缩放而不失真。它适用于图标和图形，可以通过文本编辑器进行编辑。SVG 的优点包括适用于响应式设计，可缩放且不失真，可以通过 CSS 和 JavaScript 进行交互。然而，SVG 不适用于包含复杂图像细节的照片，因为它是矢量图形格式。SVG 通常用于制作图标和简单图形，以及需要响应式设计的情况。

适用场景举例：

  • 响应式设计：适用于需要适应不同屏幕尺寸的图形，如网站图标。
  • 图标集：用于创建可缩放的图标集，以便在不同大小的容器中使用。
  • 数据可视化：适合在数据可视化方面使用，如图表和地图。

WebP

WebP 是由 Google 开发的图像格式，支持有损和无损压缩，通常具有更好的压缩效果。它的优点包括较小的文件大小、支持透明度和动画。然而，由于兼容性问题，某些旧版本浏览器可能不支持 WebP 格式，这是一个需要考虑的缺点。WebP 适用于需要更好压缩效果和支持透明度、动画的场景。

适用场景举例：

  • 网站图像压缩：适用于需要更小文件大小的网站图像。
  • 高质量图形：用于需要保持高质量的图形，同时获得更好的压缩效果。
  • 动画广告：适合创建轻量级的动画广告。

web 性能优化中的图片优化

选择合适的图片格式

根据图像内容选择最适合的图片格式，JPEG、PNG、WebP、SVG 各有优势。

图片压缩

使用工具(ImageOptim、TinyPNG、JPEGoptim)对图片进行压缩，减小文件大小，提高页面加载速度。

webpack 中可以使用 image-webpack-loader 对图片进行压缩。

module: {
  rules: [
    {
      test: /\.(png|jpe?g|gif|svg)$/i,
      use: [
        'file-loader',
        {
          loader: 'image-webpack-loader',
          options: {
            mozjpeg: {
              progressive: true,
              quality: 80,
            },
          },
        },
      ],
    },
  ],
},

懒加载

图片懒加载是一种优化网页性能的技术，它通过延迟加载页面上的图片，直到图片进入用户视野（可见区域）时才进行加载。这有助于减少页面加载时间，特别是在包含大量图片的长页面上。

基本原理如下：

  • 页面初次加载时，只加载可见区域内的图片，而对于在用户当前视野之外的图片，不提前加载。

  • 当用户滚动页面，当图片进入可见区域时，通过 JavaScript 触发图片的加载，从而实现逐步加载。

在这个示例中，使用 data-src 属性保存图片的真实 URL，而 src 属性则设置一个占位图像或加载中的图像。使用 JavaScript 检测滚动事件，当图片进入可见区域时，将 data-src 的值赋给 src，触发实际的图片加载。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

完整的 demo 请看 👉 在线效果预览, 查看示例代码请点击此处

实现响应式图片

根据用户设备的屏幕尺寸和分辨率动态加载适当尺寸的图片，以提高网页性能。常见的方法有以下几种：

使用元素

元素允许在不同的屏幕尺寸或分辨率下为用户提供不同的图片源。

<picture>
  <source media="(max-width: 600px)" srcset="small.jpg" />
  <source media="(max-width: 1200px)" srcset="medium.jpg" />
  <img src="large.jpg" alt="Description" />
</picture>
使用 srcset 属性

srcset 属性允许指定一组适用于不同设备和分辨率的图片。浏览器会根据用户设备的特性自动选择合适的图片。

<img
  srcset="small.jpg 600w, medium.jpg 1200w, large.jpg 1800w"
  sizes="(max-width: 600px) 90vw,
            (max-width: 1200px) 60vw,
            100vw"
  src="large.jpg"
  alt="Description"
/>
使用 CSS 媒体查询

使用 CSS 媒体查询，根据不同的屏幕尺寸和分辨率应用不同的样式，包括不同尺寸的图片。

@media (max-width: 600px) {
  .responsive-image {
    background-image: url("small.jpg");
  }
}
@media (max-width: 1200px) {
  .responsive-image {
    background-image: url("medium.jpg");
  }
}
@media (min-width: 1201px) {
  .responsive-image {
    background-image: url("large.jpg");
  }
}
使用 JavaScript

使用 JavaScript 检测屏幕尺寸和分辨率，动态加载适当尺寸的图片。

<script>
  if (window.matchMedia("(max-width: 600px)").matches) {
    document.getElementById("responsiveImage").src = "small.jpg";
  } else if (window.matchMedia("(max-width: 1200px)").matches) {
    document.getElementById("responsiveImage").src = "medium.jpg";
  } else {
    document.getElementById("responsiveImage").src = "large.jpg";
  }
</script>

通常，结合使用元素和 srcset 属性是一种简便而灵活的方法，而 CSS 媒体查询和 JavaScript 适用于更复杂的情况。

图片预加载和预渲染

图片预加载

在页面加载之前提前加载一些图片，使它们在需要显示时能够迅速加载，而不用等到用户请求加载时再加载。

实现方式：

  1. 使用<link>标签的 rel 属性进行预加载：
<link rel="preload" href="image.jpg" as="image" />
图片预渲染

雪碧图(不推荐使用)

虽然雪碧图技术在过去被广泛用于合并多个小图标以减少 HTTP 请求次数，但随着前端技术的发展，它已经逐渐显得有些过时， 主要原因如下

  • HTTP/2 支持多路复用，允许在同一连接上同时发送多个请求。在 HTTP/2 中，同时请求多个小文件与请求一个大文件的性能差异不大。因此，减少 HTTP 请求的优势在 HTTP/2 环境下减弱。

  • HTTP 请求的并行处理：现代浏览器能够更有效地处理并行下载多个小文件。浏览器在加载资源时，会在并行下载多个文件，因此小图标的多次请求不再像过去那样显著影响性能。

  • 矢量图标的兴起：随着 SVG 格式的广泛应用，矢量图标成为一种更现代、灵活且可缩放的替代方案。矢量图标不需要合并成雪碧图，而是以独立的文件形式存在，更容易维护和更新。

本文首发于个人博客前端开发笔记，由于笔者能力有限，文章难免有疏漏之处，欢迎指正

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1988595.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

火柴游戏（match）-2022蜀山区赛初中组第3题

火柴游戏（match）-2022蜀山区赛初中组第3题

题目描述 锤锤和柯西在玩火柴棒游戏&#xff0c;他们用火柴棒拼成不同的数字。规则如下&#xff1a; 这是火柴所形成10个数字的方式&#xff0c;每个数字所需的火柴数量不一样。现在给两人每人发N根火柴棒。锤锤要用所有火柴棒摆出其所能摆出最小的数&#xff0c;而柯西则需要…
阅读更多...
【简历】吉林某985大学：Java简历指导，面试通过率低

【简历】吉林某985大学：Java简历指导，面试通过率低

注&#xff1a;为保证用户信息安全&#xff0c;姓名和学校等信息已经进行同层次变更&#xff0c;内容部分细节也进行了部分隐藏 简历说明 这是一份顶级985的25届Java简历。顶级985现在的目标只有一个&#xff0c;就是大厂秋招。那么这位同学跟211和普通同学比&#xff0c;优势还…
阅读更多...
【JVM】Java内存区域图文详解

【JVM】Java内存区域图文详解

1.JVM运行时区域总览 Java 虚拟机在执行 Java 程序的过程中会把它管理的内存划分成若干个不同的数据区域。 JVM运行时区域也成为Java内存区域。 在讨论Java内存模型时&#xff0c;通常将其分为线程共享区域和线程私有区域&#xff1a; 2.线程私有区域 2.1.程序计数器 程序计…
阅读更多...
springboot船舶维保管理系统--论文源码调试讲解

springboot船舶维保管理系统--论文源码调试讲解

第二章 相关技术 本次开发船舶维保管理系统使用的是Vue进行程序开发&#xff0c;船舶维保管理系统的数据信息选择MySQL数据库进行存放。 2.1 VUE介绍 Vue (读音 /vjuː/&#xff0c;类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是&#xff0c;Vue…
阅读更多...
Unity入门1——基本操作

Unity入门1——基本操作

VIew工具 选中View工具后&#xff0c;按住鼠标左键&#xff0c;即可实现拖拽 按住Alt鼠标右键&#xff0c;移动鼠标即可实现缩放&#xff08;或使用鼠标滚轮&#xff09; Move工具 选中移动工具&#xff0c;即可对界面中的物品进行移动。快捷键W 快速定位物体 在层级管理器中…
阅读更多...
回溯分割+子集篇--代码随想录算法训练营第二十二天| 131.分割回文串，93.复原IP地址，78.子集，90.子集II

回溯分割+子集篇--代码随想录算法训练营第二十二天| 131.分割回文串，93.复原IP地址，78.子集，90.子集II

131.分割回文串 题目链接&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 讲解视频&#xff1a;131.分割回文串 题目描述&#xff1a; 给你一个字符串 s&#xff0c;请你将 s 分割成一些子串&#xff0c;使每个子串都是回文串 。返回 s 所有可能的分割方案。 示例 …
阅读更多...
2.3 Python 基本运算符

2.3 Python 基本运算符

欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;欢迎订阅相关专栏&#xff1a; 工&#x1f497;重&#x1f497;hao&#x1f497;&#xff1a;野老杂谈 ⭐️ 全网最全IT互联网公司面试宝典&#xff1a;收集整理全网各大IT互联网公司技术、项目、HR面试真题.…
阅读更多...
C++ STL专题 list的讲解

C++ STL专题 list的讲解

目录 1.list的介绍和使用 1.1 list的介绍 1.2 list的使用 1.2.1 list的构造 1.2.2 list iterator的使用 1.2.3 list capacity 1.2.4 list element access 1.2.5 list modifiers 1.list的介绍和使用 1.1 list的介绍 1.list是可以在常数范围内任意位置进行插入和删除的序…
阅读更多...
git系统学习

git系统学习

git系统学习 git命令行获取git 版本号 创建初始版本库创建git库初始化用户名和密码查看用户名和邮箱修改用户名和密码 将文件添加到版本库中删除暂存文件提交代码查看提交信息查看更加详细的信息查看提交差异版本库内文件的删除和重命名删除库里的文件重命名库里的文件 打标签查…
阅读更多...
【RunnerGo】离线安装成功版本

【RunnerGo】离线安装成功版本

目录 一、下载 二、解压安装包 三、修改安装配置 3.1 编辑修改安装参数&#xff08;我没有改&#xff0c;默认安装即可&#xff09; 3.2 安装目录结构说明 四、执行安装 五、检查服务并使用 六、访问 前言&#xff1a;最近在调研一个新工具&#xff0c;发现RunnerGo&…
阅读更多...
文章解读与仿真程序复现思路——电网技术EI\CSCD\北大核心《考虑通信-物理耦合的有源配网故障后协调恢复策略 》

文章解读与仿真程序复现思路——电网技术EI\CSCD\北大核心《考虑通信-物理耦合的有源配网故障后协调恢复策略 》

本专栏栏目提供文章与程序复现思路&#xff0c;具体已有的论文与论文源程序可翻阅本博主免费的专栏栏目《论文与完整程序》 论文与完整源程序_电网论文源程序的博客-CSDN博客https://blog.csdn.net/liang674027206/category_12531414.html 电网论文源程序-CSDN博客电网论文源…
阅读更多...
SpringBoot banner 推荐

SpringBoot banner 推荐

看看我这个怎么样 效果图 在resources下面创建一个banner.txt&#xff0c;把下面代码放到进去就可以用了 ${AnsiColor.GREEN} Application Version: ${ruoyi.version} Spring Boot Version: ${spring-boot.version}69696969 696969696969 696969 …
阅读更多...
Facebook的技术创新：如何改变社交网络的面貌

Facebook的技术创新：如何改变社交网络的面貌

Facebook作为全球最大的社交网络平台之一&#xff0c;一直在不断推动技术创新&#xff0c;以提升用户体验和社交互动质量。这些技术创新不仅改变了人们的社交方式&#xff0c;也深刻影响了整个社交网络的面貌。 人工智能驱动的内容推荐 Facebook利用人工智能&#xff08;AI&am…
阅读更多...
深圳市光明区副区长彭颖一行莅临立仪科技参观考察

深圳市光明区副区长彭颖一行莅临立仪科技参观考察

2024年8月5日上午&#xff0c;‌深圳市光明区彭颖副区长一行领导莅临深圳立仪科技有限公司调研指导工作&#xff0c;深圳市智能传感行业协会执行会长姜勇以及协会秘书长张喻陪同调研。我公司总经理刘杰波、以及各部门负责人陪同参加。 彭颖副区长一行领导在刘总的接待和讲解下&…
阅读更多...
vue实现页面中点击预览报告，实现将vue组件变成pdf文件进行弹窗展示

vue实现页面中点击预览报告，实现将vue组件变成pdf文件进行弹窗展示

一.实现效果 页面中点击预览报告&#xff0c;实现将vue组件变成pdf文件进行弹窗展示 定义的方法文件 import html2canvas from "html2canvas"; import jsPDF, { RGBAData } from "jspdf";/** a4纸的尺寸[595.28,841.89], 单位毫米 */ const [PAGE_WIDT…
阅读更多...
微深节能 环形运动机械定位控制系统 格雷母线

微深节能 环形运动机械定位控制系统 格雷母线

格雷母线定位系统作为一种高精度、无磨损的非接触式位置检测系统&#xff0c;特别适用于环形运动机械的定位控制。 一、格雷母线定位系统的概述 格雷母线定位系统主要由一台地面电气柜、一台车载电气柜、格雷母线以及天线箱等组成。其核心部件是格雷母线&#xff0c;一种特殊的…
阅读更多...
深度学习人脸表情识别结课作业留存

深度学习人脸表情识别结课作业留存

0.前言 大三下学期学习了深度学习神经网络的课程&#xff0c;老师留下了人脸表情识别的结课作业&#xff0c;在网上找到了一个想相对不错的开源项目作为基础完成了本次的结课作业。 1.项目链接 Challenges in Representation Learning: Facial Expression Recognition Chall…
阅读更多...
运动耳机怎么选？来看看奥运冠军喜欢的运动耳机！

运动耳机怎么选？来看看奥运冠军喜欢的运动耳机！

在奥运的竞技舞台上&#xff0c;每一次心跳的跃动都是对自我极限的勇敢挑战&#xff0c;运动员的每一个动作背后&#xff0c;都承载着不懈的努力与对梦想的执着追求。如今&#xff0c;运动科技正以前所未有的速度改变着我们的运动方式&#xff0c;一款优秀的运动耳机成为了连接…
阅读更多...
Prompt Fuzzer：用于增强 GenAI 应用程序的开源工具

Prompt Fuzzer：用于增强 GenAI 应用程序的开源工具

Prompt Fuzzer 是一个开源工具&#xff0c;可以评估GenAI应用程序的系统提示针对基于动态 LLM 的威胁的安全性。 Prompt Fuzzer 功能&#xff1a; 1. 模拟十几种类型的 GenAI 攻击。 2. 该工具会根据系统提示自动进行情境化&#xff0c;针对与 GenAI 应用程序相关的特定主题或行…
阅读更多...
【Python机器学习】回归——用线性回归找到最佳拟合直线

【Python机器学习】回归——用线性回归找到最佳拟合直线

线性回归的优缺点&#xff1a; 优点&#xff1a;结果易于理解&#xff0c;计算上不复杂 缺点&#xff1a;对非线性的数据拟合不好 使用数据类型&#xff1a;数值型和标称型数据。 回归的目的是预测数值型的目标值。最直接的办法是依据输入写出一个目标值的计算公式。例如预测汽…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023