Nod

Submit a ticket My Tickets
Welcome
Login  Sign up

Swapping Background images

Technique
Dmp
Samsung
iPad
With transition: ease all 0.5s; and background: cover
Frozen
Almost frozen

No transition, no background cover
Frozen
Works nicely, but no transition is jaring

Jpgs compressed with TinyJPG, display:none; instead of opacity: 0;
Frozen
Smooth

PNGs compressed with TinyPNG, opacity: 0;
Lags on image change, dropping frames from all other animations
Smooth

PNGs compressed with TinyPNG, opacity: 0;
Lags and doesn't show transistion
Lags terribly on the transistion

Animating only the front div not both
Skips transistion
Lags terribly on the transistion

2 image png sprite - changing background position
Smooth
Smooth

5 image png sprite, changing position on HTML element
Smooth
Smooth
Smooth, but needs media queries to scale background correctly.
4 Image png sprite on an absolutely positioned element
Frozen
Lags terribly on the transistion

4 img png sprite on the body element, wildcard on the html element
Incredibly laggy
Smooth

5 image sprite with css transistion on background position

Lags terribly
Choppy but performs


In conclusion, the only technique with acceptable performance on the DMP is a giant spritesheet, on the html element. For some reason, changing the position of a background image on the <html> element is very fast. 


The downside of this technique is there isn't any way to change out just the wildcard image on the fly. However, it won't take too long to make multiple assets which have different spritesheets. 

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.