|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.