Changes

no edit summary
Line 1: Line 1:  
==TODO==
 
==TODO==
   −
* WebM
+
* MP4
 
* Lazy loading
 
* Lazy loading
* Maybe configure native MW support?
+
* Native MW support?
   −
==WEBP (JS)==
+
==WebM (JS)==
   −
Preferable for video (transparency and small files).
+
Preferable for full video.
    
<div style="background:#35393e;padding:10px;margin:10px;text-align:center;border-radius:10px;max-width:800px">
 
<div style="background:#35393e;padding:10px;margin:10px;text-align:center;border-radius:10px;max-width:800px">
<div class="webp" data-src="Army_Units_Animation.webp"></div>
+
<div class="video" data-src="Mov_bbb.webm"></div>
 
</div>
 
</div>
 +
 +
==Ogg (JS)==
 +
 +
Also full video.
    
<div style="background:#35393e;padding:10px;margin:10px;text-align:center;border-radius:10px;max-width:800px">
 
<div style="background:#35393e;padding:10px;margin:10px;text-align:center;border-radius:10px;max-width:800px">
<div class="webp" data-src="Army_Units_Animation.webp" data-width="400"></div>
+
<div class="video" data-src="Mov_bbb.ogg"></div>
 
</div>
 
</div>
 +
 +
==WebP (JS)==
 +
 +
Preferable for animated images (transparency and small files).
    
<div style="background:#35393e;padding:10px;margin:10px;text-align:center;border-radius:10px;max-width:800px">
 
<div style="background:#35393e;padding:10px;margin:10px;text-align:center;border-radius:10px;max-width:800px">
<div class="webp" data-src="Furniture_Animation_230.webp"></div>
+
<div class="video" data-src="Army_Units_Animation.webp"></div>
 
</div>
 
</div>
   −
==PNG==
+
<div style="background:#35393e;padding:10px;margin:10px;text-align:center;border-radius:10px;max-width:800px">
 
+
<div class="video" data-src="Army_Units_Animation.webp" data-width="400"></div>
Preferable for images (transparency).
+
</div>
    
<div style="background:#35393e;padding:10px;margin:10px;text-align:center;border-radius:10px;max-width:800px">
 
<div style="background:#35393e;padding:10px;margin:10px;text-align:center;border-radius:10px;max-width:800px">
[[File:Furniture Full_230.png]]
+
<div class="video" data-src="Furniture_Animation_230.webp"></div>
 
</div>
 
</div>
   −
==APNG (as PNG)==
+
==APNG as PNG (native)==
   −
Okay for slideshow videos (transparency but otherwise large files).
+
Okay for slideshow images (transparency but otherwise large files).
    
<div style="background:#35393e;padding:10px;margin:10px;text-align:center;border-radius:10px;max-width:800px">
 
<div style="background:#35393e;padding:10px;margin:10px;text-align:center;border-radius:10px;max-width:800px">
Line 37: Line 45:  
</div>
 
</div>
   −
==GIF==
+
==GIF (native)==
    
Not good (poor color palette, bad transparency, large files).
 
Not good (poor color palette, bad transparency, large files).
Line 43: Line 51:  
<div style="background:#35393e;padding:10px;margin:10px;text-align:center;border-radius:10px;max-width:800px">
 
<div style="background:#35393e;padding:10px;margin:10px;text-align:center;border-radius:10px;max-width:800px">
 
[[File:Furniture_Animation_230.gif]]
 
[[File:Furniture_Animation_230.gif]]
 +
</div>
 +
 +
==PNG (native)==
 +
 +
Preferable for images (transparency).
 +
 +
<div style="background:#35393e;padding:10px;margin:10px;text-align:center;border-radius:10px;max-width:800px">
 +
[[File:Furniture Full_230.png]]
 
</div>
 
</div>
cssedit, gkautomate
6,926

edits