Photoshop优化网站图片大小提高网站加载速度

时间:2024-04-09 20:59:44

网站图片的大小会直接影响网站加载速度的快慢,网站的加载速度对于用户体验和seo优化也有相当大的影响,很多人会将一些相机拍摄的图片直接原封不动的上传到网站,很多图片动辄几兆甚至十几兆,这样会造成网站加载非常缓慢,为了提高网站网站的加载速度,在图片上传之前一定要将图片优化到合适的大小。
Photoshop优化网站图片大小提高网站加载速度

影响图片大小的因素
影响图片大小的因素有很多,主要有图片尺寸、图片质量、图片格式、图片色彩的丰富程度等。我们可以通过控制图片尺寸、图片的压缩质量来达到优化图片大小的目的。

图片优化途径
优化图片的方法和途径也有很多,比如各种图片处理软件、wordpress在线图片优化插件。

今天我们讲解一下利用photoshop如何优化网站图片。

首先用photoshop打开要优化的图片,原始图的大小是16mb,十分庞大。
Photoshop优化网站图片大小提高网站加载速度
Photoshop优化网站图片大小提高网站加载速度

然后点击顶部菜单栏中的“图像”-“图像大小”
Photoshop优化网站图片大小提高网站加载速度
这里可以看到目前图片的尺寸大小
Photoshop优化网站图片大小提高网站加载速度

一般显示屏上用的图片可以将分辨率改为72dpi,300通常用于印刷使用。如果你的图片也是300dpi,那么可以改成72,通过降低这个分辨率dpi可以看到图片的宽高也跟着发生了变化。
Photoshop优化网站图片大小提高网站加载速度

然后点击菜单中的 文件-导出-储存为web格式
Photoshop优化网站图片大小提高网站加载速度

在这里可以设置图片尺寸,图片压缩质量,也可以在左下角预览优化后的图片大小
Photoshop优化网站图片大小提高网站加载速度
开始先来个极端的,把品质拉到0,将图像大小改成宽800像素,可以看到左侧预览的图片颜色发生了断层和失真,左下角图片大小可以看到目前图片只有20k了,可见优化效果十分明显,但是这种状态下图片可用度不高。

图片尺寸用多少合适?
不同位置的图片尺寸需求不同,例如目前网站幻灯片slider的图片一般建议是宽1920,高度自己定一个就可以。
网站产品图片建议600-1000像素左右,具体要结合自己网站的框架布局来设定,没有一个统一的标准要求。Photoshop优化网站图片大小提高网站加载速度

继续调整图片,将品质逐渐增大,增加到50的时候发现图片断层消失了,质量也在一个可接受的范围内。
Photoshop优化网站图片大小提高网站加载速度

优化设置完之后,点击下方的储存按钮对图片进行保存即可完成。
Photoshop优化网站图片大小提高网站加载速度

以上就是利用photoshop优化网站图片大小的方法,核心就是降低尺寸,然后把质量控制在自己能接受的一个最低标准。后面会继续教大家如何利用photoshop批量对多张图片进行优化。