Difference between revisions of "Kancolle Wiki:Test/Video"

 
(7 intermediate revisions by the same user not shown)
Line 1: Line 1:
<div style="background:black">
+
==TODO==
[[File:Furniture Full_230.png]]
+
 
 +
* MP4
 +
* Lazy loading
 +
* Native MW support?
 +
 
 +
==WebM (JS)==
 +
 
 +
Preferable for full video.
 +
 
 +
<div style="background:#35393e;padding:10px;margin:10px;text-align:center;border-radius:10px;max-width:800px">
 +
<div class="video" data-src="Mov_bbb.webm"></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 class="video" data-src="Mov_bbb.ogg"></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 class="video" data-src="Army_Units_Animation.webp"></div>
 +
</div>
 +
 
 +
<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>
 +
</div>
 +
 
 +
<div style="background:#35393e;padding:10px;margin:10px;text-align:center;border-radius:10px;max-width:800px">
 +
<div class="video" data-src="Furniture_Animation_230.webp"></div>
 +
</div>
  
[[File:Furniture_Animation_230.gif]]
+
==APNG as PNG (native)==
  
[[File:Furniture_Animation_230.webp]]
+
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">
 
[[File:Furniture_Animation_230.png]]
 
[[File:Furniture_Animation_230.png]]
 +
</div>
 +
 +
==GIF (native)==
 +
 +
Not good (poor color palette, bad transparency, large files).
  
<div class="webp" data-src="Army_Units_Animation.webp"></div>
+
<div style="background:#35393e;padding:10px;margin:10px;text-align:center;border-radius:10px;max-width:800px">
 +
[[File:Furniture_Animation_230.gif]]
 +
</div>
  
<div class="webp" data-src="Army_Units_Animation.webp" data-width="400"></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>

Latest revision as of 02:54, 10 May 2023

TODO

  • MP4
  • Lazy loading
  • Native MW support?

WebM (JS)

Preferable for full video.

Ogg (JS)

Also full video.

WebP (JS)

Preferable for animated images (transparency and small files).

APNG as PNG (native)

Okay for slideshow images (transparency but otherwise large files).

 

GIF (native)

Not good (poor color palette, bad transparency, large files).

 

PNG (native)

Preferable for images (transparency).