写点什么

前端代码规范 - 图片相关

作者:南城FE
  • 2024-04-12
    广东
  • 本文字数:2236 字

    阅读完需:约 7 分钟

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


在前端项目中,图片资源是构成网站视觉效果的重要元素。合理的图片使用规范不仅可以提高页面加载速度,还可以增强用户体验。本文将详细介绍前端项目中图片,包括图标(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>} <img src={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;
复制代码


使用示例:


<ImageComponent  src="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)

发布于: 1 小时前阅读数: 5
用户头像

南城FE

关注

公众号@南城大前端 2019-02-12 加入

专注前端开发,分享前端知识

评论

发布
暂无评论
前端代码规范 - 图片相关_前端_南城FE_InfoQ写作社区