前端代码规范 - 图片相关

本文是前端代码规范系列文章,将涵盖前端领域各方面规范整理,其他完整文章可前往主页查阅~

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

1. 图片格式选择

如下是各图片类型的优缺点,业务开发中要根据实际的场景选择合适的图片格式。能支持WebP的场景推荐WebP,其他推荐使用PNG。

  • JPEG
    • 适用于颜色丰富的图片,如摄影作品。
    • 不支持透明。
  • PNG
    • 支持透明,适用于需要透明背景的图片。
    • 分为PNG-8(支持256色)和PNG-24(支持1600万色)。
  • GIF
    • 适用于简单动画。
    • 只支持256色。
  • SVG
    • 矢量图形,适用于图标和简单图形。
    • 可以无损放大,文件体积小。
  • WebP
    • 支持透明和动画。
    • 压缩效率高,但兼容性相对较差。

2. 图片尺寸与压缩

  • 根据显示需求选择合适的图片尺寸,避免使用过大的图片造成不必要的带宽消耗。
  • 使用工具如TinyPNG、ImageOptim对图片进行压缩,减少文件大小。

3. 图标(Icon)使用

字体图标(Icon Fonts)
  • 使用Font Awesome、iconfont等字体图标库。
  • 优点是体积小,易于缩放,可通过CSS控制样式。
SVG图标
  • 直接使用SVG格式的图标。
  • 适用于复杂的图标设计,可以直接内嵌到HTML中。
Sprite图
  • 将多个图标合并到一张图片中,通过CSS背景定位显示。
  • 减少HTTP请求,提高加载速度。

4. 响应式图片

使用<picture>元素或srcset属性提供多个尺寸的图片,让浏览器根据设备选择合适的图片。

<picture><source media="(min-width: 800px)" srcset="large.jpg"><source media="(min-width: 450px)" srcset="medium.jpg"><img src="small.jpg" alt="示例图片">
</picture>

5. 图片懒加载

对于非首屏图片,可以采用懒加载技术,即在图片进入可视区域后再加载。
可以使用Intersection Observer API或第三方库如lozad.js实现。

6. 图片缓存

通过设置HTTP缓存头(如Cache-Control)使浏览器缓存图片。
对于不经常变动的图片资源,可以设置较长的缓存时间。

7. 图片的合理使用

避免使用图片展示文本内容,这不仅不利于SEO,也不方便维护和国际化。
考虑使用CSS3或WebGL等技术替代图片实现视觉效果。

8. 图片组件化优化

创建一个通用的图片组件,我们可以集中处理图片的加载、错误处理、占位显示等逻辑,提高代码的复用性和可维护性。以下是一个图片组件化的优化示例:

import React, { useState } from 'react';const ImageComponent = ({ src, alt, lazyLoad = false, placeholder, ...props }) => {const [loaded, setLoaded] = useState(false);const [error, setError] = useState(false);const handleImageLoad = () => {setLoaded(true);};const handleImageError = () => {setError(true);};return (<div className="image-container" {...props}>{!loaded && placeholder && <div className="placeholder">{placeholder}</div>}<imgsrc={src}alt={alt}onLoad={handleImageLoad}onError={handleImageError}style={{ display: loaded ? 'block' : 'none' }}{...(lazyLoad && { loading: 'lazy' })}/>{error && <div className="error">Image cannot be displayed</div>}</div>);
};export default ImageComponent;

使用示例:

<ImageComponentsrc="image-url.jpg"alt="描述文本"lazyLoad={true}placeholder={<div>Loading...</div>}
/>

9. CDN优化大图

前端项目中的大图片资源加载是一个常见的挑战。大图片往往意味着加载时间较长,尤其是在网络条件较差的情况下。为了优化大图片的加载速度,使用CDN服务来优化大图片的加载是提升前端性能的有效手段。

将大图片资源分发到全球的CDN节点,可以显著提高图片的加载速度,改善用户体验。在接入CDN优化时,也需要注意选择合适的CDN服务提供商,并合理配置CDN的缓存策略。

10. 图片的可访问性

在网页中使用图片时,alt(替代文本)属性是一个重要的HTML属性,它为图片内容提供了文字替代。这个属性不仅对于无障碍阅读至关重要,也对搜索引擎优化(SEO)有积极影响。

无障碍阅读

对于视觉障碍者来说,alt属性可以通过屏幕阅读器读出图片的描述,使他们能够理解图片所传达的信息。在无障碍网页设计中,这是一个基本要求。

图片加载失败时的替代文本,当图片由于某些原因(比如网络问题)无法显示时,浏览器会显示alt属性的文本,这样用户仍然可以了解图片的基本信息。

SEO优化

对于搜索引擎来说,alt属性帮助它们理解图片内容,从而在图像搜索结果中更准确地展示。

搜索引擎理解图片:搜索引擎爬虫不能“看到”图片,但它们可以读取alt文本,并据此判断图片内容。
关键词优化:在alt文本中合理使用关键词,可以提高图片(以及页面)在搜索结果中的排名。

正确的alt属性使用:

<img src="dog.jpg" alt="一只棕色的狗在玩球"> <!-- 描述具体且相关 -->
<img src="decorative-border.jpg" alt=""> <!-- 装饰性图片可以留空 -->

结语

前端项目中合理地使用图片是提升用户体验的关键。上述图片使用规范对于网站的性能和可访问性有一定的提升,除此之前也还有其他的优化手段,有兴趣的可以留言交流。在实际开发中,还是要根据项目需求和目标用户群体,灵活选择适合的图片格式和优化策略。


看完本文如果觉得有用,记得点个赞支持,收藏起来说不定哪天就用上啦~

专注前端开发,分享前端相关技术干货,公众号:南城大前端(ID: nanchengfe)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/810074.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于arcgis /envi PCA(主成分分析)实现过程

基于arcgis /envi PCA(主成分分析)实现过程 1 提取研究范围 2对研究范围进行重采样 &#xff08;根据数据情况进行选做&#xff0c;如数据较大建议进行该步骤操作&#xff09; 3 对研究范围内数据进行归一化处理 4 将空值替换为0 5 对同期不同要素数据进行波段合成 对波段…

易备数据备份软件案例:昆山某电子元器件制造企业灾备方案

昆山某电子有限公司专注于生产和销售高品质的电子元器件&#xff0c;包括各种电容器、电感线圈、电阻器、二极管、晶体管等。产品广泛应用于各种电子设备和行业&#xff0c;包括&#xff1a;消费电子、通信设备、工业控制、汽车电子、航空航天、医疗器械等。 随着公司生产经营…

Yii2 路由美化访问需要加s

不得不说yii真是反人类&#xff0c;怪不得现在都不维护了&#xff0c;今天解析下路由美化下的路由访问问题。 设置main.php配置文件 urlManager > [enablePrettyUrl > true, // 启用 URL美化showScriptName > false, // 隐藏入口文件index.phpenableStrictParsing…

MySql数据库从0-1学习-第三天多表设计学习

项目开发中,在进行数据库表结构设计时,会根据业务需求及业务模块之间的关系,分析并设计表结构,由于业务之间相互关联,所以各个表结构之间也存在着各种联系,基本上分为三种: 一对多(多对一)多对多一对一 一对多 需求:根据需求,完成部门和员工表的设计 一对多,很多人会使用外键,…

如何分析 Java 开源项目源码?

准备深入分析一个 Java 开源项目的源码时&#xff0c;可以通过下面这些步骤和技巧&#xff0c;更系统地理解和分析项目源代码&#xff1a; 1. 确定分析目标和范围&#xff1a; 在开始分析之前&#xff0c;明确你的目标&#xff0c;确定你要深入了解的功能或模块。这有助于你有…

零基础转行网络安全,高薪梦想可以实现吗?

零基础转行网络安全&#xff0c;学会网络安全相关知识&#xff0c;可以从事以下岗位&#xff1a; 1、安全运维&#xff1a; 负责服务器及终端设备的维护 负责业务的安全风险评估和漏洞挖掘 负责安全事件的检查和实施 2、渗透测试 负责渗透测试、风险评估工作的实施 提供…

《web应用技术》第三次课后练习

实验目的&#xff1a; 1、springboot入门程序撰写并启动 2、使用postman练习参数的获取。 参考&#xff1a;Day04-10. Web入门-SpringBootWeb-快速入门_哔哩哔哩_bilibili

【星期计算】蓝桥杯

–> 因为这里是结果填空题&#xff0c;我们直接暴力用java自带的BigInteger类。 /*** 试题 A: 星期计算** 本题总分&#xff1a;5 分* 【问题描述】* 已知今天是星期六&#xff0c;请问20的22次方天后是星期几&#xff1f;* 注意用数字 1 到 7 表示星期一到星期日。* * 【答…

2024年在阿里云申请SSL证书多少钱?免费版不要钱,付费版352元/年

SSL证书是实现网站https访问必须购买的云安全类产品&#xff0c;以阿里云为代表的各大云服务商也都提供申请SSL证书服务&#xff0c;2024年阿里云既提供免费版的SSL证书&#xff0c;也有付费版的&#xff0c;最低只要352元/年。 一、阿里云申请免费版SSL证书申请流程&#xff…

中国平安金融壹账通交付管理中心总经理崔羽先生受邀为第十三届中国PMO大会演讲嘉宾

全国PMO专业人士年度盛会 中国平安金融壹账通交付管理中心总经理崔羽先生受邀为PMO评论主办的2024第十三届中国PMO大会演讲嘉宾&#xff0c;演讲议题为“项目管理成与败&#xff0c;人才是第一要素”。大会将于5月25-26日在北京举办&#xff0c;敬请关注&#xff01; 议题简要…

任推邦七款热门拉新项目,普通人逆袭路径,月入6个W!

任推邦 不扣量的项目拉新平台 1UC网盘 —网推 价格上涨行业置顶 &#xff0c;大厂项目 市场空白&#xff0c;预算充足&#xff0c;不限量 适合自媒体/抖快等渠道 上传下载不限速 2迅雷网盘—网推 官方核心服务商&#xff0c;大厂项目 群组内测&#xff08;新增转播收…

【生产实习-毕设】pyspark学生成绩分析与预测(上)

注意&#xff1a;数据由实习单位老师提供&#xff08;需要自行搜索下载&#xff09;&#xff0c;页面美化为下载模板。 项目介绍&#xff1a;前端页面输入影响成绩的属性&#xff0c;预测出成绩&#xff0c;并作可视化展示——属性对成绩的影响。使用python pyspark 进行数据预…

【Linux 学习】进程优先级和命令行参数!

1. 什么是优先级? 指定进程获取某种资源&#xff08;CPU&#xff09;的先后顺序&#xff1b; Linux 中优先级数字越小&#xff0c;优先级越高&#xff1b; 1.1 优先级和权限的区别&#xff1f; 权限 &#xff1a; 能不能做 优先级&#xff1a; 已经能了&#xff0c;但是获…

选择自动化工具是一个关键的决策过程

好的自动化软件测试工具&#xff0c;不仅可以有效的缩短全生命周期的交付周期&#xff0c;还可以提高测试的有效性&#xff0c;还可以保证更好的高质量的交付。工具的选型是一项重要的决策过程&#xff0c;工具的采用涉及到企业的效率、成本和长期发展。 1、需求分析 确组织希…

C语言结构体,成员地址高低位问题

写一个这样的 C 程序&#xff1a; #include <stdio.h> #include <stdint.h>typedef struct WTF {uint8_t a;uint8_t b;uint8_t c;uint8_t d; } WTF;int main() {WTF wtf;printf("hello world\n");printf("wtf.a addr %p\n", &(wtf.a));p…

AI大模型探索之路-应用篇10:Langchain框架-架构核心洞察

目录 前言 一、LangChain设计目标 二、LangChain设计之道 三、LangChain典型应用 1、简单的问答Q&A over SQL CSV: 2、聊天机器人Chatbots: 3、总结摘要Summarization: 4、网页爬虫Web scraping: 5、本地知识库&#xff08;Q&A with RAG): 三、LangChain架构…

(React Hooks)前端八股文修炼Day9

一 对 React Hook 的理解&#xff0c;它的实现原理是什么 React Hooks是React 16.8版本中引入的一个特性&#xff0c;它允许你在不编写类组件的情况下&#xff0c;使用state以及其他的React特性。Hooks的出现主要是为了解决类组件的一些问题&#xff0c;如复杂组件难以理解、难…

你不知道的JavaScript---作用域与闭包深入解析与实践指南

你好&#xff0c;我是小白Coding日志&#xff0c;一个热爱技术的程序员。在这里&#xff0c;我分享自己在编程和技术世界中的学习心得和体会。希望我的文章能够给你带来一些灵感和帮助。欢迎来到我的博客&#xff0c;一起在技术的世界里探索前行吧&#xff01; JavaScript 中的…

用于深度调试的 GPT:AI 如何改变代码质量

GPT-4革命&#xff1a;未来编程必备的AI调试专家 介绍 人工智能在编程中的概述&#xff1a;人工智能 (AI) 在编程中的集成彻底改变了开发人员编码和解决问题的方式。 GPT 等人工智能工具在软件开发的各个阶段&#xff08;包括调试&#xff09;提供前所未有的帮助。 GPT在调试中…

玄子Share-使用 Pycharm 执行 Shell 脚本

玄子Share-使用 Pycharm 执行 Shell 脚本 Why&#xff1f; 为什么我要使用 Pycharm 执行 Shell 脚本呢&#xff0c;我直接使用 Linux 不行吗&#xff1f; 使用 Pycharm 执行 Shell 脚本的好处 我们的宿主机都是 WIndows 平台&#xff0c;若想编译 Shell 脚本&#xff0c;我…