前端代码规范 （前端代码规范vue）

本文是前端代码规范的系列文章，涵盖了前端领域的方方面面。其他完整的文章可以在主页上找到。

大昌科技先进前端节点先进

点击上方程序员成长指南关注我们的公众号

回复1、加入高级节点通讯群

在前端项目中，图片资源是构成网站视觉效果的重要元素。合理的图片使用规范不仅可以提高页面加载速度，还可以改善用户体验。本文详细介绍了前端项目中图片的使用，包括图标和大图。

1. 图片格式选择

以下是每种图像类型的优缺点：业务开发需要根据实际场景选择合适的图像格式。支持WebP的场景推荐使用WebP，其他场景推荐使用PNG。

JPEG

适合彩色图像，例如照片。

不支持透明度。

巴布亚新几内亚

它支持透明度，适合需要透明背景的照片。

分为PNG-8（支持256色）和PNG-24（支持1600万色）。

动图

适合简单的动画。

仅支持256 色。

静止无功发生器

矢量图形。适合图标和简单图形。

可以无损放大，文件体积小。

网络P

支持透明度和动画。

压缩效率较高，但兼容性较差。

2. 图片尺寸与压缩

根据您的显示需求选择合适的图像尺寸，避免使用过大的图像造成不必要的带宽消耗。

使用TinyPNG 和ImageOptim 等工具来压缩图像并减小文件大小。

3. 图标（Icon）使用

字体图标（Icon Fonts）

使用Font Awesome 或iconfont 等字体图标库。

优点是体积小，易于扩展，可以通过CSS控制样式。

SVG图标

直接使用SVG 格式的图标。

适合复杂的图标设计，可以直接嵌入HTML中。

Sprite图

将多个图标组合成一张图像并使用CSS 背景位置显示。

减少HTTP 请求并提高加载速度。

4. 响应式图片

使用picture 元素或srcset 属性提供多种图像尺寸，以便浏览器可以根据设备选择合适的图像。

照片

sourcemedia=\'(min-width:800px)\’srcset=\’large.jpg\’

sourcemedia=\'(min-width:450px)\’srcset=\’medium.jpg\’

imgsrc=\’small.jpg\’alt=\’图像示例\’

/照片

5. 图片懒加载

对于不在首屏的图片，可以使用延迟加载技术。即图像进入显示区域后加载。这可以使用Intersection Observer API 或第三方库（例如lozad.js）来实现。

6. 图片缓存

设置HTTP缓存标头（例如Cache-Control）以强制浏览器缓存图像。对于不经常变化的图片资源，可以设置较长的缓存时间。

7. 图片的合理使用

不要使用图像来显示文本内容。这不仅不利于SEO，而且维护和国际化也不方便。考虑使用CSS3 和WebGL 等技术代替图像来实现视觉效果。

8. 图片组件化优化

通过创建通用的图片组件，可以集中图片加载、错误处理、占位符显示等逻辑，提高代码的复用性和可维护性。下面是优化图像组件的示例。

importReact,{useState}from\’react\’;

constImageComponent=({src,alt,lazyLoad=false,占位符，props})={

const[已加载，setLoaded]=useState(false);

const[错误，setError]=useState(false);

控制台图像加载=()={

setLoaded(真);

};

控制台图像错误=()={

设置错误（真）；

};

返回（

divclassName=\’图像容器\'{.props}

{!loadedplaceholderdivclassName=\’placeholder\'{placeholder}/div}

图像

源={源}

替代={替代}

onLoad={处理图片加载}

onError={处理图像错误}

样式={{display:loaded?\’block\’:\’none\’}}

{.(lazyLoad{loading:\’lazy\’})}

/

{errordivclassName=\’error\’无法显示图像/div}

/div

）；

};

导出默认图像组件；

使用示例：

图像组件

src=\’图片网址.jpg\’

alt=\’描述文字\’

延迟加载={true}

占位符={div加载中./div}

/

9. CDN优化大图

在前端项目中加载大型图像资源是一个常见的挑战。大图像通常需要更长的时间来加载，尤其是在网络条件较差的情况下。优化大图加载速度，利用CDN服务优化大图加载是提高前端性能的有效途径。

将海量图片资源分布在全球CDN节点上，大幅提升图片加载速度，提升用户体验。在进行CDN优化时，还应注意选择合适的CDN服务提供商并正确配置您的CDN缓存策略。

10. 图片的可访问性

在网页中使用图像时，alt（替代文本）属性是一个重要的HTML 属性，它为图像内容提供替代文本。此属性不仅对于可访问性很重要，而且对搜索引擎优化(SEO) 也有积极影响。

无障碍阅读

视障人士可以使用alt 属性通过屏幕阅读器阅读图像描述，帮助他们理解图像传达的信息。这是无障碍网页设计的基本要求。

图片加载失败时的替代文本即使由于某种原因（例如网络问题）导致图片无法显示，浏览器仍然会在alt 属性中显示文字，以便用户了解图片的基本信息。

SEO优化

对于搜索引擎来说，alt 属性可以帮助他们理解图像的内容并在图像搜索结果中更准确地显示它们。

搜索引擎理解图像：搜索引擎爬虫无法“看到”图像，但它们可以读取替代文本并据此确定图像的内容。关键字优化：在替代文本中正确使用关键字可以提高搜索结果中图像（和页面）的排名。

alt属性的正确用法：

imgsrc=\’dog.jpg\’alt=\’棕色的狗在玩球\’！–描述具体且相关–

imgsrc=\’decorative-border.jpg\’alt=\’\’!–装饰图片可以留空–

结语

在前端项目中正确使用图片是改善用户体验的关键。上述图片使用规范将在一定程度上提高您网站的性能和可访问性。另外，如果您有兴趣，请留言联系我们。在实际开发中，需要根据项目的需求和目标用户群灵活选择合适的图像格式和优化策略。

作者：Nanjo FE 原文：https://juejin.cn/post/7356234354119262260

如果您觉得这篇文章对您有帮助，请点赞并保存以备将来使用~

节点社区

我们已经形成了一个非常友好的Node.js 社区。我有很多Node.js 朋友。如果你有兴趣学习Node.js，我们可以做Node.js。共同交流、学习和建设相关工作。在下面添加你的考拉好友并回复“Node”。

最后，走之前别忘了点赞哦。

以上#Frontend代码规范相关内容摘自网络，仅供参考。相关信息请参见官方公告。