【第013期】如何查看页面图片尺寸

网页上的元素实际渲染的时候，其实都是方形的。由于很多图片有白色或者透明的背景，对于设计师来说，打开最终的网页并不能看出页面上的图片是否有按自己的设计实现。

所以很多时候，设计师只能过来找到前端工程师：“帮我看下这个图片是多大的？”，显然这并不符合设计师高冷的性格气质。

那么，下面就让小鸡君来教你如何自己查看图片尺寸。

如何查看页面图片尺寸

先明确一下这里所说的尺寸，是指图片以像素单位计的宽高。这里之所以没用“大小”，是因为大小也可能指图片文件本身所占的字节数。

其实细心的同学可能已经发现了，在第 010 期（回复 010 或 10）浏览器开发工具的第一张截图上，就是选中了一张图片，在图片的下方已经展示了改图片的尺寸：

下面再说一下具体方法，首先确保你使用的谷歌 Chrome 浏览器或 Mac Safari 浏览器：

1，可以在图片上使用右键“审查元素”查看；

2，可以把鼠标指针放在图片上，然后按 Ctrl+Shift+C 选中查看；

3，可以按 F12 ，再点开发工具左下角的小放大镜，就跟 1 的效果相同了。

是不是又很简单呢？不过只讲这一点未免太水了吧？！

是的，那么下面再教大家一个简单的识别图像背景是纯色还是透明的办法。

网页上的图片，有的是有背景色，有的是背景色跟外部颜色一样（比如白色）看不出来，也有的是透明的，直接透到了后面的背景色上。

当然，这个技巧也是 for 设计师哒，可以知道切图仔有木有偷懒直接截图，而没有分离透明图层。

那么，这个技巧就是，仍然是，拖动！

以百度首页为例，将百度的 LOGO 向右下方拖到带有颜色的按钮上方：

注意红圈内的部分，会有类似白色蒙层的感觉。这说明这张图片是带有白色背景的，会使用 PS 的同学可以把图片直接复制粘贴到 PS 里确认，不会的请看切图大法系列教程：

而如果是透明的图片是什么样的表现呢？请看这个例子：

我将这个电饭煲的图片向左上方拖动到黑色背景的上方，你会发现它的周围并没有类似蒙层的存在。

这说明这个图片就是透明背景的，当它的外部或者底层的元素改变背景色时，它的背景色也会跟着改变。

我们可以加个背景色看一下：

熟悉样式的设计师也可以直接加个背景色来判断是否是透明图片。不熟悉样式的请回复 003 或 3，学习所谓样式。