构建现代网页时，图片是不可或缺的元素之一。它们能够增强视觉吸引力，帮助传达信息，并提升用户体验。然而，如果图片没有得到适当的优化，它们可能会显著拖慢网站的加载速度，影响用户体验和搜索引擎优化（SEO）。在本文中，我们将探讨不同的图片格式，并提供优化这些格式的策略和示例。

常见的图片格式

JPEG（或JPG）

• 优点：支持高色彩深度，适合处理照片和复杂的图像。
• 缺点：有损压缩，可能会在高压缩率下失去细节。
• 使用场景：适用于色彩丰富且没有透明度要求的图片。

PNG

• 优点：支持透明度，无损压缩，保留细节。
• 缺点：文件大小通常大于JPEG。
• 使用场景：适用于需要透明度或者高保真度的图形，如徽标和图标。

GIF

• 优点：支持动画和透明度（仅限单色透明）。
• 缺点：仅支持256色，质量较低。
• 使用场景：适用于简单动画和小图标。

WebP

• 优点：支持透明度和有损以及无损压缩，压缩率高于JPEG和PNG。
• 缺点：兼容性不如JPEG和PNG广泛。
• 使用场景：适用于需要优化加载速度的网页，同时保持较高的图像质量。

SVG

• 优点：矢量格式，可无限放大而不失真，文件大小小。
• 缺点：不适合复杂的照片。
• 使用场景：适用于图标、徽标、图表和其他可缩放图形。

图片优化策略

选择正确的格式

根据图片内容和用途选择最合适的格式。例如，对于网页上的照片，JPEG可能是最佳选择，因为它在保持相对较小的文件大小的同时提供了良好的图像质量。对于需要透明背景的图标，PNG可能更合适。

压缩图片

使用工具或服务压缩图片，减少文件大小。例如，使用在线工具如 TinyPNG 来压缩PNG文件，或者使用 Adobe Photoshop 的“存储为Web所用格式”功能来减小JPEG文件的大小。

调整尺寸

根据需要在网页中显示的大小调整图片尺寸。不要上传超大的图片然后依赖浏览器缩放，因为这会导致不必要的加载时间。

使用响应式图片

通过 HTML5 的 <picture> 元素或 srcset 和 sizes 属性，可以为不同屏幕尺寸提供不同大小的图片。

延迟加载

对于非视口内的图片，可以使用延迟加载（lazy loading）技术。这样，只有当用户滚动到图片位置时，图片才会加载。

使用CDN

使用内容分发网络（CDN）来分发图片，可以减少加载时间，因为图片会从离用户最近的服务器加载。

实例分析

示例1：优化网页照片

假设你有一个高分辨率的照片，原始尺寸为4000x3000像素，文件大小为5MB。如果这张照片要在网页上以800x600像素的尺寸展示，那么：

1. 使用图像编辑工具将尺寸调整为800x600像素。
2. 选择JPEG格式，并设置合适的压缩比例，比如70%的质量。
3. 使用TinyJPG等在线工具进一步压缩处理。
4. TinyJPG – Compress WebP, PNG and JPEG images intelligently

优化后的图片可能只有100KB左右，大大减少了加载时间。

示例2：优化图标

如果你有一个图标，需要在网页上以多种尺寸展示，并且需要透明背景：

1. 使用SVG格式，因为它支持透明度，且大小不会随着尺寸变化而变化。
2. 如果SVG不可行，选择PNG格式，并确保图片尺寸不大于实际需要的尺寸。

结论

图片优化对于提高网页加载速度至关重要。通过选择合适的图片格式，压缩文件大小，调整尺寸，使用响应式图片技术，实现延迟加载，以及利用CDN，可以确保图片在不牺牲质量的情况下快速加载。这不仅能提升用户体验，还能对SEO产生积极影响。

ebStorage的目的是克服由cookie所带来的一些限制，当数据需要被严格控制在客户端时，不需要持续的将数据发回服务器。

WebStorage两个主要目标：

（1）提供一种在cookie之外存储会话数据的路径。

（2）提供一种存储大量可以跨会话存在的数据的机制。

web存储更加安全与快速，这些数据还不会保存到服务器，还可以存储大量数据而不影响网站性能。

web 存储类型

1. localStorage - 用于长久保存数据，没有有效期，直到手动清除。
2. sessionStorage - 临时保存当前窗口的数据，窗口关闭之后自动清除。

不管是 localStorage 还是 sessionStorage 使用方法都是一样的语法，对常见操作语法进行示范。以下就以localStorage为例：

常见操作语法：

• 保存数据：

localStorage.key = value

localStorage.setItem(key,value)

• 获取数据

localStorage.key

localStorage.getItem(key)

• 删除单个数据：

localStorage.removeItem(key)

delete localStorage.key

• 删除全部：localStorage.clear()
• 获取某个索引的键值：localStorage.key(index)

数据都是以键值对形式存在的，操作的时候与json有点类似。

web存储数据应用

应用1：取出本地存储的所有数据，以localStorage为例。

localStorage和sessionStorage是两个对象，类似json。可遍历取出数据，如：

localStorage.user = "倩倩"
localStorage.age = "18"
localStorage.job = "打杂"
console.log(localStorage)// {job: "打杂", age: "18", user: "倩倩", length: 3}
for(key in localStorage){
 console.log(`${key}--${localStorage[key]}`)
}

运行程序之后，结果如图：

我们发现遍历的时候把localStorage的属性和方法全部打印出来了，而我们需要的只是我们存储的三个数据，其余的都不要，此时我们换个方法。

localStorage.user = "倩倩"
localStorage.age = "18"
localStorage.job = "打杂"
console.log(localStorage)// {job: "打杂", age: "18", user: "倩倩", length: 3}
for(let i=0;i<localStorage.length;i++){
 let key = localStorage.key(i)
 console.log(`${key}:${localStorage[key]}`)
}

此时运行结果就是我们需要的结果了！

记住用户登录信息、存草稿、存邮件等经常会使用 localStorage，我们介绍下几种存储方式的区别，可以更好地根据需求选择存储方式。

几种存储方式区别

cookies 和 sessionStorage、localStorage区别如图：

上述看三者存储大小有很大差异，存储内容上也不同，cookie只能保存字符串类型，但sessionStorage和localStorage能够支持任何类型的对象存储。如果保存复杂json数据时，可以转成字符串保存，取出时通过JSON.parse()转成json格式。

安全性方面，web 存储不会发送到服务器端，不用担心被截获，所以相对cookie安全些。

实例：网页中写信，自动保存草稿，网页关闭重新打开之后数据依旧存在。

<textarea name="" id="email" cols="30" rows="10" oninput="save()"></textarea>
<script>
 function save(){
  var x = document.getElementById("email")
  localStorage.setItem('email',x.value)
 }
 window.onload =function(){
  var x = document.getElementById("email")
  x.value = localStorage.getItem("email")
 }
</script>

注意：如果你是直接使用浏览器打开html文件，此时发现并不会存储，需要声明下存储是针对域的，所以我们需要放到服务内，服务内访问才可以进行缓存。

需要的同学自己去下载个nginx。

字中夹着图片，图片也需要文字说明，文字和图片相辅相成，就有了绚丽多彩的网页内容。但是图文混排的方式却给我们存储数据带来不便，实际上大多数网页是把文字和图片分别存放在不同文件中的，在html源码中只保存图片的链接地址。

如上图所示，在做数据采集时，很多朋友把文字和图片分别下载保存，还要处理链接本地化转换的问题。实际上我们也可以把图片文件转码后保存在html源码文件里，这样用一个html文件就可以保存图文信息了，自动采集图文步骤如下。
打开木头浏览器项目管理窗口，创建【打开网页】步骤，添加需要采集的页面网址，如果添加多个网址，则可以按顺序打开采集内容。

然后添加最关键的步骤【抓取内容】，【添加】抓取内容，在弹出的【抓取元素设置】窗口，点击【自动获取】按钮，浏览器将处于元素定位模式，鼠标移到需要抓取的元素内容上方点击右键，在弹出的快捷菜单中选择【获取元素并返回】，成功获取可唯一标识该元素的方法，如下图所示，此以页面使用元素的ID属性定位等抓取的元素区域，设置获取元素的【TagTextToHtml】扩展属性，意思是把元素内容转化为Html代码。如有必要，可以使用同样的方法继续添加抓取页面文章标题，此处不再赘述。

抓取元素转换成html后，就是保存数据了，创建【保存数据】步骤，勾选【保存变量文件】，选择Htm文件格式，设置文件保存路径。

最后，点击【开始测试】按钮运行项目，当项目执行完毕后，打开设定的保存文件目录，就可以看到自动保存和htm文件，且只有这个文件，双击自动调用浏览器打开，完整呈现图文内容。图片已经转成了Base64编码，嵌入保存在htm文件中。