核心代码就一行：

<a href="https://example.com"> <img src="photo.jpg" alt="描述"> </a>

把<img>塞进<a>里面，网站图片就变成了可点击的点图入口。不需要JavaScript，片直不需要按钮，接链接不需要“点击此处”那行多余的蓝色小字。用户看到图，想了解更多，手指或鼠标直接怼上去就行。

我自己的博客头图就是这么干的。那张咖啡杯的照片本身没什么特别，但点进去是我写的一篇关于手冲水温的文章。三个月下来，这张图的点击率比侧边栏任何文字链接都高。原因很简单——图片比文字快。人脑处理图像只要13毫秒，读一行字至少要几百毫秒。你把入口做成图，等于把门槛砍了一半。

但有几个坑，踩过才知道

第一个坑：忘了加alt属性。图片加载失败的时候，用户看到一片空白，不知道这里原本有什么。更麻烦的是屏幕阅读器用户，他们完全不知道这个可点击区域是干嘛的。alt="某某摄影作品集"，几个字的事，别省。

第二个坑：图片太大。我见过一个页面，首屏一张4MB的PNG，点进去确实能跳转，但加载那五秒钟里用户已经关掉页面了。链接做得再好，图打不开等于零。压缩到200KB以内，WebP格式优先，这是基本操作。

第三个坑：链接目标不明确。点图片跳转到首页，用户会困惑——我不是刚从首页来的吗？图片链接的href应该指向一个具体的、和图片内容强相关的页面。图是产品图，就跳到产品详情页；图是文章配图，就跳到那篇文章。别偷懒统一跳首页，那是浪费点击。

什么时候该用，什么时候不该用

电商列表页、作品集、教程步骤图、新闻配图——这些场景下图片链接几乎是默认选项。用户扫一眼图，感兴趣就点，不感兴趣就滑走，交互成本极低。

但导航栏里的图标别这么干。一个汉堡菜单图标，用户点它是因为想展开菜单，不是想跳转到“关于我们”。图标链接需要配合清晰的视觉反馈，比如悬停变色或者加下划线，否则用户根本不知道那是个链接。

还有，如果一张图同时需要跳转和放大查看，别把两个功能塞进同一个点击。用CSS把图片包一层容器，点击图片本身触发灯箱放大，角落放一个小箭头链接跳转。用户的手指没那么精确，别让他们猜。

一个我经常用的变体

有时候图片链接需要在新标签页打开。加个target="_blank"就行，但记得同时加rel="noopener"。这不是洁癖，是安全习惯。旧版浏览器里，不加noopener的话，新页面可以通过window.opener篡改原页面地址。一个属性的事，别留后门。

<a href="https://example.com" target="_blank" rel="noopener"> <img src="thumb.webp" alt="作品标题"> </a>

回到开头那个朋友。他后来把二十张照片全改成了图片链接，每张跳转到对应的单张作品页。上周他发消息说，平均停留时间从40秒涨到了2分半。我没觉得意外。图片链接这件事，本质上不是技术问题，是愿不愿意让用户少想一步的问题。少想一步，就多点一下。就这么简单。