淦，刚又被运营怼了，说文章里的配图显示不全跟狗啃了一样。我心想这不就是尺寸不对嘛，但以前查个图尺寸还得下插件、开PS，麻烦得要死。今天折腾一圈，发现几个野路子，快得一批，顺带把怎么给图片“瘦身”的坑也说了，毕竟图片加载慢拖累全站速度，蜘蛛爬得都嫌弃，收录能好才怪。
方法一：最懒人，右键“检查”大法（Chrome/Edge等现代浏览器都行）
- 在你看不顺眼的那张图上，直接右键，选择“检查”（或者“审查元素”）。
- 右边或者底下会弹出来一堆天书代码（别慌），图片对应的代码行（通常是
<img src="...">）会被自动高亮。 - 把鼠标悬停在高亮的代码上！奇迹发生了：浏览器会直接用一个半透明的框把图片框出来，并且在框的旁边或者角落显示这张图的原始尺寸（比如 1920×1080）和当前显示尺寸。一眼就知道是不是被CSS压缩变形了。
方法二：稍微专业点，控制台敲一行代码
如果你页面图太多，想批量看，或者就想装一下。按 F12 打开开发者工具，点到 Console（控制台） 标签页，把下面这串代码贴进去按回车：
Array.from(document.images).forEach(img => console.log(img.src, img.naturalWidth + 'x' + img.naturalHeight));
然后你就能在控制台看到当前页面所有图片的地址和它们的原始尺寸了。比一个个点高效，真的，尤其是被那种瀑布流或者懒加载整懵的时候。
方法三：对付背景图怎么办？
如果是CSS用 background-image 设置的图，在“检查”模式里，选中那个元素，在右边样式的面板里找到 background-image 属性，通常旁边会有一个小小的预览图标，点开它，新打开的“Sources”面板里一般会显示图片信息，包括尺寸。
—— 但查到尺寸只是开始，真正的坑在优化 ——
你查出来发现一张文章配图居然3MB大？完犊子，这页面能打开全靠用户佛系。我上次就是因为一堆未经压缩的高清大图，移动端加载速度直接飙红，眼睁睁看着跳出率涨到80%，感觉三个月SEO白做了，抽了三根烟才缓过来。
怎么优化？血泪教训：
- 格式选对能救命：照片、渐变用 JPG，图标、LOGO、简单图形无脑用 PNG（带透明）或 SVG（矢量无限放大），想要动图又怕大可以试试 APNG 或者视频。现在WebP格式兼容性很好了，压缩率高画质损得少，能换就换。
- 尺寸别瞎传：你文章区域最大就显示800px宽，你传个4000px的图是几个意思？用PS、Figma或者在线工具（比如TinyPNG）先裁到合适大小再上传。
- 压缩是必修课：就算尺寸对了，文件体积还能再压。墙裂安利 TinyPNG（这里是无损压缩神器） 这类在线工具，或者构建工具里集成
imagemin插件自动化处理。 - 懒加载必须上：给
<img>标签加上loading="lazy"属性（或者用JS库），让首屏外的图片滚到时再加载，首屏时间立马好看。
总之，查尺寸是术，优化才是道。别让几张破图拖垮了你精心调整的TDK和换来的那点权重。尤其是现在Core Web Vitals这种用户体验指标都算进排名了，图片优化搞不好，真的就是纯用爱发电。共勉吧，兄弟们。
