给前端做网站的图片叫什么？老站长掏心窝子：别再用PS硬抠了

刚入行那会儿，我也犯过傻。客户问：“这图叫啥名？我要发给前端。”我脑子一抽，说：“jpg啊。”结果前端小哥回我：“这图加载太慢，客户跳出率很高。”那一刻我才明白，给前端做网站的图片叫什么，其实没那么重要，重要的是你给的是什么格式、多大尺寸、有没有压缩。

做了七年建站，我见过太多因为图片没处理好，导致网站打开像蜗牛爬的案例。今天不聊虚的，直接上干货。

先说最常见的误区。很多人觉得，图片只要清晰就行。错！大错特错。你给前端的图片，如果是4MB的RAW格式原图，哪怕它是PNG，前端也救不了你。浏览器不会因为你图好看就加速加载。

那么，给前端做网站的图片叫什么？其实我们通常指的是经过优化的Web图片。具体来说，主要有三种格式在打架：JPG、PNG、WebP。

JPG，老熟人。适合照片，不支持透明。优点是兼容性好，缺点是有损压缩，细节丢失。

PNG，也是老熟人。支持透明，适合Logo、图标。缺点是文件大，不适合照片。

WebP，Google搞出来的新宠。兼容JPG和PNG的优点，文件更小，支持透明。

数据说话。我去年帮一个电商客户做改版，把全站图片从JPG/PNG换成了WebP格式。结果呢？首屏加载时间从3.2秒降到了1.8秒。转化率提升了15%。这可不是玄学，是实打实的性能提升。

所以，给前端做网站的图片叫什么？建议你直接给WebP格式。如果客户浏览器太老，不支持WebP，那就准备一套JPG作为降级方案。这就是所谓的“响应式图片”策略。

怎么操作？别再用PS一张一张张存了。太慢，还容易出错。用工具。比如Squoosh.app，在线压缩，拖进去，选WebP，调质量，下载。一键搞定。或者用TinyPNG，虽然它主要压PNG和JPG，但胜在简单粗暴。

再说说尺寸。前端最烦的就是你给一张4000像素宽的图，让他缩到200像素用。不仅浪费带宽，还显得你不专业。记住一个原则：图片宽度不要超过容器最大宽度。比如你的网站内容区宽1200像素，那你给前端的图，宽度1200像素就够了。别给2000像素，那是浪费。

还有，命名规范。别叫“新建文件夹(2)复制.png”。这叫“hero-banner-home.jpg”。语义化命名，对SEO也有帮助。前端看到名字就知道这张图是干嘛的，不用猜。

我有个朋友，做企业官网的。他给客户交付时，会附带一个“图片规范文档”。里面写着：格式要求、最大尺寸、命名规则、压缩标准。客户看了直竖大拇指。这就叫专业。

最后，别忽视懒加载。图片太多，一次性加载完，手机流量受不了。让前端加个lazy load属性。图片进入可视区域再加载。用户体验瞬间提升。

总结一下，给前端做网站的图片叫什么？叫“优化后的WebP图片”。格式选WebP，尺寸别超标，命名要规范，加载要懒加载。做到这四点，你的网站速度飞起，客户满意，前端省心。

别再纠结名字了，去优化图片吧。时间不等人，流量更不等人。