很多刚建站的朋友，最头疼的不是代码写不出来，而是图片死活调不对。要么拉伸变形像被踩了一脚的饼，要么加载慢得让人想砸键盘。今天不整那些虚头巴脑的理论，直接说怎么在HTML里把照片放得漂亮又好用。
先说个最常见的坑。很多人喜欢直接写
，然后靠width和height去硬拽尺寸。看着好像对齐了，其实一旦用户换个手机屏幕，或者图片源变了，布局直接崩盘。这招在十年前还行，现在真不行。
你得学会用CSS控制。别怕，很简单。给图片套个div，或者给img加class。核心就一句话：保持比例。比如你想让图片宽度占满容器，高度自动适应。代码大概是这样的：
img {
max-width: 100%;
height: auto;
display: block;
}
这样写，图片永远不会超出父容器，也不会因为缩放而模糊。这是基础中的基础。你要是连这都搞不定，后面说的都是白搭。
再说说加载速度。现在的人没耐心等。你放个5MB的原图上去，用户手机流量蹭蹭掉，页面半天刷不出来，谁还看？必须压缩。别去用那些在线工具随便传传，万一泄露隐私咋办？推荐用TinyPNG或者本地用ImageOptim。压缩完体积能小一半，画质肉眼几乎看不出来区别。
还有啊，很多新手不知道alt标签的重要性。搜索引擎爬虫看不懂图片，它就靠alt里的文字知道你这图是啥。你写个“图片1”，百度根本不理你。你得写“红色运动鞋侧面特写”。这不仅是SEO，更是为了盲人读屏软件能工作。这点细节，很多人懒得做，但真的很重要。
再聊聊响应式。现在谁还只用电脑看网站？手机占比都过半了。你得用picture标签或者srcset。简单说，就是告诉浏览器：“小屏幕加载小图，大屏幕加载大图”。
这样写，用户在不同设备上，拿到的都是最适合的图。省流量，速度快，体验好。
还有个容易被忽视的点：懒加载。就是用户滑到哪，图才加载到哪。不用一次性全加载完。加个loading="lazy"属性就行。
这招对长页面特别管用。比如电商详情页，或者新闻列表页。不用写复杂的JS，浏览器原生支持。
最后说说格式。JPEG适合照片，PNG适合透明背景或线条图，WebP是现在的趋势，体积小画质好，但兼容性稍微差点，不过现在主流浏览器都支持了。建议优先用WebP，再 fallback 到JPEG。
别总觉得技术高深莫测。其实就是把图片当成内容的一部分，而不是装饰。你想想，如果图片加载不出来，你的网站是不是就剩下一堆文字？没人爱看。
我有个客户，之前网站打开要8秒，后来优化了图片，加了懒加载，换了对应格式，现在2秒以内。转化率直接翻倍。这就是细节的力量。
你要是还在为图片烦恼，或者不知道怎么配置CDN加速图片，别硬扛。找专业人士看看，有时候改几行代码，效果天差地别。别为了省那点咨询费，丢了用户的心。
本文关键词：如何网站里做照片
