企业官网最常见的速度问题，往往不是程序有多复杂，而是把相机原图、设计源图或超大横幅直接上传。图片既要清晰，又不能拖慢首屏；既要适配电脑和手机，也要让搜索引擎理解内容。解决这个问题不能只依靠“压缩一下”，而要把格式、尺寸、加载时机、替代文字和页面语境一起规划。
首页轮播、案例列表、产品详情和团队头像的展示区域不同，不应上传一张超大图让浏览器强行缩放。设计阶段先规定各模块的比例，例如案例封面统一为3:2或16:10，再为电脑端与手机端准备合适尺寸，可以同时减少下载体积和列表错位。
HTML中的图片应设置明确的width和height属性，或通过CSS的aspect-ratio预留空间。浏览器在图片下载前就能计算布局，可以降低内容突然下移造成的视觉跳动。需要裁切缩略图时可使用object-fit: cover，但产品细节图、证书和带重要信息的图片不应随意裁掉内容。
Google图片搜索支持JPEG、PNG、WebP、SVG和AVIF等常见格式。使用新格式时，可以通过picture元素提供多个source，并保留带src属性的img作为回退，确保旧浏览器和搜索抓取都能获得有效图片。
同一张封面在手机上可能只显示360像素宽，在大屏电脑上则需要1200像素。如果所有设备都下载最大文件，会浪费移动网络；如果只提供小图，大屏又会模糊。srcset可以列出不同宽度的候选图片，sizes说明图片在布局中大约占多大空间，由浏览器结合屏幕尺寸和像素密度选择合适资源。
<img
src="case-1200.jpg"
srcset="case-480.jpg 480w, case-800.jpg 800w, case-1200.jpg 1200w"
sizes="(max-width: 768px) 100vw, 50vw"
width="1200" height="800"
alt="南昌制造企业响应式官网案例">候选图片应保持相同主题和宽高比。如果手机端需要不同构图，可使用picture配合媒体条件进行艺术方向裁切，但替换后的画面仍要表达同一核心信息。
浏览器原生loading="lazy"适合首屏以下的案例图、文章配图和长列表缩略图，可推迟不在视口附近的下载。首屏主视觉、文章头图或很可能成为最大内容绘制元素的图片，不应盲目懒加载，否则会延迟用户最先看到的关键内容。
懒加载图片也要设置尺寸，页面初始布局不能把所有图片当成零高度。轮播图还应避免一次加载大量不可见大图，可优先加载第一张，后续图片按需要预取。
alt用于在图片无法显示或读屏软件访问时说明图片内容，也帮助搜索引擎理解图像。写法应结合页面语境，准确描述图片传达的信息。例如案例图可写“南昌机械制造企业响应式官网首页”，而不是“网站建设、南昌网站建设、SEO优化”等关键词堆砌。
纯装饰线条、背景纹理可以使用空alt，避免干扰读屏；作为链接的图片，应说明点击后的目标或用途。不要把重要标题和联系方式只做在图片里，核心文字仍应以HTML形式出现在页面中。
文件名可以使用简短、可读、与内容相关的英文或拼音，避免IMG_0001.jpg这类无意义名称。图片应放在相关标题和正文附近，并使用稳定URL；同一图片在多个页面重复使用时，尽量保持同一资源地址，便于缓存与抓取。
Google官方还建议使用标准img元素，因为搜索引擎能从img的src中发现图片，而不会把CSS背景图按同样方式作为正文图片索引。对重要产品和案例图片，可以在图片站点地图、页面结构化数据和og:image中提供明确地址。
驰硕网络在响应式企业网站建设中，会同时考虑PC与手机图片比例、加载性能、内容可读性和搜索抓取，避免网站上线后再逐张返工。
