轩枫阁

前言

图片通常占据网页上下载字节的绝大部分，通常，也占据了大量的视觉空间。因此，优化图片通常可以最大程度地减少网站下载的字节数以及提高性能：浏览器下载的字节数越少，占用客户端的带宽就越少，浏览器下载并在屏幕上呈现有用内容的速度就越快。

图片优化既是一门艺术，也是一门科学：图片优化是一门艺术，是因为单个图片的压缩不存在最好的特定性方案，而图片优化之所以是一门科学，是因为许多开发得很出色的方法和算法可以明显减小图片的大小。要找到图片的最优设置，需要按照许多维度进行认真分析：格式能力、编码数据内容、像素尺寸等。

删除和替换图片

• 删除不必要的图片资源
• 尽可能利用 CSS3 效果
• 使用网络字体取代在图片中进行文字编码

第一个要问您自己的问题应该是，要实现所需的效果，是否确实需要图片。好的设计应是简单的设计，而且始终可以提供最佳的性能。如果可以删除图片资源（与网页上的 HTML、CSS、 JavaScript 和其他资源相比，图片资源通常需要大量的字节），这始终是最佳的优化策略。俗话说，好的图片所传达的信息胜过千言万语，所以，您需要找到平衡点。 查看全文

前言

60%的网站流量来自图片，图片优化可以大幅影响网站流量。

一、现有web图片格式

查看全文

前言

本文介绍针对轩枫阁V3主题开发过程中，遇到的图片问题及加载优化。

图片居中裁剪

本站的每一篇文章，都会配一张570×200的特色图像，使文章不那么单调。

然而移动端移动端首页图片为60×60的正方形配图，这里有两种解决方案。 查看全文

前言

在网站开发初期，做重构的过程中，经常要展示一些网站内容相关的不固定图片，如Banner图、产品图，这时候从设计稿中切图下来放上去会比较繁琐。常用的技巧是使用占位图。

占位图片即通过指定宽高或文字动态生成指定尺寸的图片。有很多提供类似服务的网站，接下来一一推荐。

纯色类

temp.im

简介：im temp placeholder images, feel free to use it anywhere. (with https supported)。

temp.im占位图片，可以在任何地方免费使用，支持HTTPS。

特点：支持定义尺寸、颜色。使用七牛CDN服务，访问超快，推荐使用，微信UI工程师@hzlzh 作品。

使用：

• http://temp.im/200
• http://temp.im/754×754
• http://temp.im/466×466/4CD964/fff

查看全文

前言

网站运营久了之后，无法避免会出现图片404的情况，原因可能是图片文件本来就不存在或目前不存在。常见的解决方案是将404图片隐藏或者是替换为默认的图片。

img标签事件属性

img标签可使用的时间属性有：

img标签常用的事件如下：

onerror：图像加载过程中发生错误时被触发。

onabort：图片加载的时候，用户通过点击停止加载时触发，通常在这里触发一个提示：“图片正在加载”。

onload：当图片加载完成之后触发。 查看全文