メインコンテンツにスキップ

State of HTML 2025

グラフィックス & マルチメディア

グラフィックスとアニメーションのレンダリング

We're highlighting interesting features or libraries we think you should know about.

Feature Highlight: JPEG XL

After the "JIF/GIF" pronunciation fiasco and the confusingly-named "PNG" ("pee-en-gee"? "ping"?), whoever's in charge of image format nomenclature decided to keep things simple this time: take the already-popular JPEG and add an “XL” to it to make it cooler.

But not bigger though, as contrary to their name JPEG XL images are actually smaller than boring old JPEG–while somehow also being backwards-compatible with it. Don't ask me how that works.

Baseline: Limited Availability

Learn more

Useful Resources

Graphics & Multimedia Experience & Sentiment

JPEG XL and ctx.drawElement() were the two new features that garnered the most positive sentiment, whereas more complex areas like augmented or extended reality APIs didn't score as high–showing once more that devs are first and foremost interested in primitives that make their daily lives easier.

グループ化:

ソート基準:

1
Graphics
87.3%
8.7%
3.4%
4,947
2
Graphics
73.4%
24.1%
4,942
3
Graphics
28.1%
21.5%
50%
4,906
4
Graphics
19%
58.2%
22.3%
4,887
5
Graphics
9.6%
22.1%
67.8%
4,913
6
Graphics
5%
46.2%
48.6%
4,892
7
Graphics
4.1%
26.9%
68.6%
4,913
8
Graphics
3.7%
36.8%
59.1%
4,902
9
Graphics
14.1%
83.7%
4,888

経験

  • 使ったことがある: Respondents who have used an item.
  • 知っている: Respondents who have heard about an item, but haven't used it.
  • 知らない: Respondents who have never heard about an item.

所感

  • 肯定的: その技術について詳しく知りたい、あるいは今後も継続して利用したいと考えている回答者。
  • 中立: その技術に対して、肯定・否定のどちらの感情も示さなかった回答者
  • 否定的: その技術についてこれ以上学ぶ意欲がない、あるいは、実際に使用して否定的な印象を抱いた回答者。
“Used” average:26%
“Positive” average:24%
“Negative” average:7%

グラフィックス & マルチメディアの問題点

SVG has always been the the dark horse of the Web, chronically neglected by browser vendors, yet being used on nearly every website. It is therefore no surprise that it dominates here, with a quarter of pain points being about it.
グラフィックス、動画、アニメーション、その他のメディアのレンダリングに関してどのような問題を抱えていますか？
Multiple
Top pain point topics overall.

View:

Items that are not one of “limitations”
0%
20%
40%
60%
80%
100%
01
Browser support
3
02
7
03
Images
4
04
5
05
Performance
06
Responsive design
07
5
08
Cognitive overload
1
09
Animations
10
Styling & customization
2
11
Reliability
12
Tooling
13
Excessive complexity
14
Accessibility
15
16
Education
17
Audio
1
18
Security & privacy
19
Poor design
20
21
3D graphics
1
22
Reliance on JavaScript
23
Loading
24
Ecosystem issues
25
End-user experience
26
その他の回答
0%
20%
40%
60%
80%
100%
回答数に占める割合（%）
616
10%
25
5

おすすめのリソース

SVG Essentials & Animation, v2
Sarah Drasner
Google

SVG Essentials & Animation, v2

In this course, you'll learn to create immersive graphics and make them alive with animations!
パートナーのサポートに感謝しています！ 詳細をみる。