推荐开源项目：Responsive-Image —— 优化响应式网页图像的Ember插件

🌟 推荐开源项目：Responsive-Image —— 优化响应式网页图像的Ember插件

responsive-image Automatically generate resized images at build-time, optimized for the responsive web, and using components to render them easily as elements. 项目地址: https://gitcode.com/gh_mirrors/re/responsive-image

项目介绍

responsive-image 是一个专为 Ember.js 开发的插件，旨在自动生成适配响应式网页的优化图像。通过在构建时进行图像处理，并利用组件轻松渲染 <picture> 元素，极大地提升了网页的性能和用户体验。

注意
本文介绍的是 responsive-image 插件的下一代版本，目前处于 beta 状态。当前稳定版本 v4.0.0 的文档请查阅 这里。

项目技术分析

核心技术

• 图像格式支持：兼容基础 PNG 和 JPEG 格式，同时支持新一代 WebP 和 AVIF 格式，确保在低文件大小下提供最佳图像质量。
• 图像处理速度：借助高效的 sharp 库，实现超快的图像处理速度。
• 布局模式：支持固定尺寸（包括 1x 和 2x 图像变体）和响应式布局（通过 srcset 优化各设备上的图像尺寸）。
• 远程图像集成：除了处理本地图像，还支持通过灵活的图像提供者抽象集成来自图像 CDN（如 Cloudinary 或 imgix）的远程图像。
• 懒加载优化：默认启用懒加载，优化 content-visibility 和 decoding 设置，防止 CLS（累积布局偏移），提升 Web Vitals 和 Lighthouse 评分。
• LQIP 技术：支持高级低质量图像占位符（LQIP）技术，加载时显示预览，可配置为模糊低分辨率图像、BlurHash 或简单的主色调。

技术栈

• 基础框架：基于 Octane/Polaris 的 v2 插件。
• 构建工具：使用自定义的 webpack-based loader 进行本地图像处理。
• 编程语言：采用 TypeScript 编写，包括 Glint 类型支持。
• 兼容性：支持 FastBoot 和 Embroider，经过全面测试。

项目及技术应用场景

• 响应式网页开发：适用于需要在不同设备上提供优化图像的响应式网页。
• 性能优化：通过图像压缩和懒加载技术，显著提升网页加载速度和性能。
• 图像管理：简化图像处理流程，自动生成多分辨率图像，方便管理和使用。
• CDN 集成：支持与主流图像 CDN 集成，扩展图像来源和处理能力。

项目特点

• 高效处理：利用 sharp 库实现快速图像处理，提升构建效率。
• 格式多样：支持多种图像格式，满足不同质量和性能需求。
• 布局灵活：支持固定和响应式布局，适应多种设计需求。
• 懒加载优化：默认懒加载配置，优化用户体验和性能指标。
• LQIP 支持：提供多种 LQIP 技术选项，提升图像加载体验。
• 类型安全：TypeScript 和 Glint 支持确保类型安全和代码质量。
• 配置灵活：提供丰富的配置选项，满足个性化需求。

开始使用

安装

在您的应用目录中执行以下命令：

npm add @responsive-image/ember @responsive-image/webpack
# 或
yarn add @responsive-image/ember @responsive-image/webpack
# 或
pnpm add @responsive-image/ember @responsive-image/webpack

配置 Webpack

根据您使用的构建方式（Embroider 或 classic Ember CLI），配置 Webpack 以使用插件的 loader：

Embroider

编辑 ember-cli-build.js 文件：

const { Webpack } = require('@embroider/webpack');
return require('@embroider/compat').compatBuild(app, Webpack, {
  packagerOptions: {
    webpackConfig: {
      module: {
        rules: [
          {
            resourceQuery: /responsive/,
            use: require('@responsive-image/webpack').setupLoaders(),
          },
        ],
      },
    },
  },
});

Classic build with ember-auto-import

配置 autoImport 选项：

let app = new EmberApp(defaults, {
  autoImport: {
    allowAppImports: ['images/**/*'],
    webpack: {
      module: {
        rules: [
          {
            resourceQuery: /responsive/,
            use: require('@responsive-image/webpack').setupLoaders(),
          },
        ],
      },
    },
  },
});

TypeScript 使用

Glint

在 types/global.d.ts 文件中添加声明：

declare module '*responsive' {
  import { ImageData } from '@responsive-image/ember';
  const value: ImageData;
  export default value;
}

基本使用

导入图像

配置好 Webpack 后，可以开始导入图像：

import heroImage from './hero.jpg?responsive';

还可以通过查询参数自定义图像处理选项：

import heroImage from './hero.jpg?lqip=inline&w=1920;1280;640&responsive';

通过以上步骤，您就可以轻松地在 Ember 项目中集成 responsive-image 插件，享受优化后的图像处理和渲染效果。

立即尝试 responsive-image，提升您的响应式网页性能和用户体验！🚀

responsive-image Automatically generate resized images at build-time, optimized for the responsive web, and using components to render them easily as elements. 项目地址: https://gitcode.com/gh_mirrors/re/responsive-image