search

LottieFiles / dotlottie-web

Official LottieFiles player for rendering Lottie and dotLottie animations in the web. Supports React, Vue, Svelte, SolidJS and Web Components.
https://developers.lottiefiles.com/docs/dotlottie-player/
MIT License
191 stars 11 forks source link

perf(web): set default DPR to 75% of machine's DPR #329

Closed theashraf closed 3 months ago

theashraf commented 3 months ago

Currently, the dotlottie-web package allows users to control the devicePixelRatio (DPR) through the renderConfig option. By default, it uses the machine's full DPR, which can lead to unnecessary resource usage without any noticeable improvement in animation quality, especially on high-DPI screens.

To provide better default rendering performance out-of-the-box, it is recommended to set the default DPR to 75% of the machine's DPR. This change will offer a balanced trade-off between rendering quality and performance, ensuring smoother animations.

Proposed Changes:

Adjust the default devicePixelRatio in RenderConfig to window.devicePixelRatio * 0.75 or 0.75, whichever is lower.

cc @hermet

hermet commented 3 months ago

Adjust the default devicePixelRatio in RenderConfig to window.devicePixelRatio * 0.7 or 0.7, whichever is lower.

@theashraf Leaving this, Just in case. The result will be 0.7 when the DPR is 1. The main idea is to adjust the resolution when the DPR is higher (for more effective on smaller LED diodes).

Please check where the ThorVG player’s default DPR is set for guaranting dpr is 1 or higher than it.

dpr = 1 + ((window.devicePixelRatio - 1) * 0.75x;   //assume window dpr is 1 or higher than it.