像素密度模式与宽度描述符模式有什么区别？

像素密度模式使用 1x、2x 针对固定尺寸的高分屏设备；宽度描述符（w 模式）配合 sizes 属性，让浏览器依据实际渲染槽位宽度自适应选图。

格式层（Format Layer）是如何工作的？

选择 AVIF 或 AVIF+WebP 后，工具会优先生成对应 MIME 类型的 ` ` 节点，并在末尾保留原始格式作为降级回退。

为什么生成的代码中必须包含标签？

根据 HTML 规范，` ` 仅作为资源包装容器，实际负责渲染、显示 alt 文本以及决定布局尺寸的始终是内部的 ` ` 标签。

JSX 模式会做哪些语法适配？

JSX 方言会将 `srcset` 转换为驼峰式 `srcSet`、将自闭合标签规范化（如 ` ` 和 ` `），便于直接粘贴进 React 组件。

启用 loading/decoding 属性有什么好处？

勾选后会在 ` ` 标签上添加 `loading="lazy"` 与 `decoding="async"`，降低首屏非关键资源对渲染管道的阻塞并减少 CLS 风险。

Elysia Tools

导航

Development

响应式 Picture / srcset 艺术方向构建器

生成完整的 <picture> 艺术方向标记：按断点的 <source media>、1x/2x 密度候选或 {w} 模板宽度描述符、可选 AVIF/WebP 格式层、sizes 处理、防 CLS 的 width/height，同时输出 HTML 与 JSX 两种方言并附基于规范的 lint 提示。

执行

运行这个工具

填写表单、运行工具，并在同一页面查看结果。

预设示例运行

点击示例可自动填充表单；文件类型仍需手动上传。

2 个示例

经典三档裁切 hero，密度模式

每个艺术方向裁切一行：1280px 起用宽幅 hero、768px 起用中幅裁切，窄幅竖构图作为 <img> 回退。密度 1x,2x 生成 retina.js 风格的 @2x 候选，loading/decoding 属性让 hero 不阻塞关键路径。

<section class="pb-wrap">breakpoint ladder 1280→768→img · <picture> HTML block with two media sources (1x/@2x candidates) and a lazy fallback img · JSX twin · clean lint banner</section>

宽度描述符 + sizes + JSX 输出 AVIF/WebP 层

{w} URL 模板配合真实文件宽度（800/1024/1600），sizes 属性让浏览器按布局宽度选图而不是默认 100vw，AVIF+WebP 层为每种 MIME 重复艺术方向源——输出为 React JSX（srcSet 驼峰、自闭合标签）。

<section class="pb-wrap">breakpoint ladder 1024→img · JSX block: three <source> elements (avif/webp/original) each with srcSet="…{800w,1024w,1600w}" and sizes · lint note about combining art-direction media with media conditions inside sizes</section>

输入参数

参数已分组展示，长表单更容易浏览和调整。

10 个选项

文件上传此流程需要的源文件。1

可选：改为上传裁切变体（最多 6 张）file可选

每个文件最大体积：20 MB / 最大文件数：6支持格式：image/jpeg, image/jpg, image/png, image/webp, image/avif, image/gif

内容粘贴或输入主要内容。5

艺术方向源（每行：minWidth URL [宽度列表]）textarea可选密度列表text可选sizes 属性（w 模式）text可选回退 <img> URLtext可选替代文本text可选

参数设置调整格式、范围、数值和模式。3

描述符模式select必填格式层select必填标记方言select必填

开关选项启用或关闭可选行为。1

添加 loading/decoding 属性checkbox可选勾选后启用

结果

等待运行

运行工具后，这里会展示文件、文本、结构化数据或流式返回结果。

案例

与这个工具匹配的案例

继续查看相关工具与专题

sources: "1280 /img/hero-wide.jpg\n768 /img/hero-mid.jpg" descriptorMode: "density" densities: "1x,2x" fallbackUrl: "/img/hero-mobile.jpg" altText: "Fresh sourdough loaves on a marble counter" flavor: "html" lazyAttrs: true

sources: "1024 /cdn/hero-{w}.jpg 800,1024,1600" descriptorMode: "width" sizesAttr: "(min-width: 1024px) 960px, 100vw" fallbackUrl: "/cdn/hero-800.jpg" altText: "Product hero shot on a neutral background" formatLayer: "avif+webp" flavor: "jsx" lazyAttrs: true

响应式 Picture / srcset 艺术方向构建器

运行这个工具

预设示例运行

输入参数

结果

与这个工具匹配的案例

继续查看相关工具与专题

预设示例运行

输入参数

结果

详细了解工具的适用范围、支持能力及用户案例。

关键事实

概览

适用场景

使用方式

常见用途

示例

1. 三档断点 Hero 横幅（Retina 像素密度）

2. React 项目宽度描述符与 AVIF/WebP 现代格式层

常见问题

Web Python 图像处理示例

Web TypeScript 图像处理示例

Android Java 图像处理示例

Android Kotlin 图像处理示例

Data URI 生成器

批量图片转换

批量图片转换

批量图片信息查看器

文本脱敏、高亮与展示格式化工具

图片格式转换与动画导出工具

文本大小写、编码与规范化转换工具

图片整理、修饰与批处理准备工具