如何通过网页源代码保存图片

我试过很多次，何通别人发来一张网页截图，过网说“帮我存下这张图”，页源结果放大一看全是代码马赛克。真正要拿原图，保存得从网页源代码里挖。图片

打开浏览器按F12，何通或者右键选“检查”，过网开发工具会从屏幕右侧或底部弹出来。页源别被满屏的代码代码吓到，你只需要找一样东西：图片地址。保存点开“Elements”或“元素”面板，图片里面是何通密密麻麻的HTML标签。这时候别愣着，过网直接按Ctrl+F（Mac用Command+F），页源在搜索框里输入“.jpg”或“.png”。网页上的图片格式通常就这两种，偶尔遇到“.webp”或“.gif”也别意外，一并搜。

搜索结果会高亮显示，比如<img src="https://example.com/photo.jpg" alt="风景">。src后面引号里那串就是图片的完整网址。鼠标选中它，复制，粘贴到浏览器新标签页的地址栏，回车。图片会以原尺寸单独打开，这时候右键另存为，拿到的是高清原图，不是网页里压缩过的缩略图。

但这里有个坑。有些网站用的是懒加载技术，页面往下滚动时图片才加载，源代码里只有占位符。比如标签的src属性是空的，真正的地址藏在“data-src”或“data-original”里。我遇到过好几次，搜“.jpg”搜不到结果，急得直冒汗。解决办法是往下滚动网页，让所有图片都加载出来，再重新搜索，或者直接在搜索框里输入“data-src”，看看有没有收获。

还有一种更隐蔽的情况，图片被CSS背景图覆盖。比如

。这种图片不在标签里，单纯搜“.jpg”也找不到。得在源代码里搜“background-image”或“url(”。找到后同样复制url括号里的地址，手动补全域名前缀。我之前在某个设计网站上抓素材，背景图全藏在CSS文件里，摸索半天才反应过来。

保存下来的图片建议先检查尺寸。右键图片属性里能看到宽度和高度，如果显示只有几十像素，说明你抓到的是图标或占位图。真正的原图通常几百到几千像素。别急着关掉源代码窗口，多翻翻附近的代码，有时候同一张图会有多个尺寸版本，srcset属性里就列着不同分辨率的候选地址。

这个方法在手机上也管用。安卓手机用Chrome浏览器，打开网页后点菜单选“查看网页源代码”，苹果手机Safari不行，得装个第三方浏览器比如Alook。操作逻辑一样，搜索图片扩展名，复制链接，新标签页打开。就是屏幕小，翻代码费劲，建议放大页面再操作。

说到底，网页源代码就是一张购物清单，上面白纸黑字写着每张图片的真实存放位置。学会读它，你就不再受限于截图和右键另存为的压缩画质。下次再有人让你帮忙存图，直接甩给他这个方法，省得来回传文件。要是碰上防盗链的网站，图片地址复制到新标签页会显示403错误，那就换个思路，把网址里的“https://”改成“http://”试试，偶尔能绕过限制。再不行就截图吧，技术也有解决不了的时候。