• Welcome to the Kancolle Wiki!
  • If you have any questions regarding site content, account registration, etc., please visit the KanColle Wiki Discord

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

From Kancolle Wiki
Jump to navigation Jump to search
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>
 +
 
 +
==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>
  
 
<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="Army_Units_Animation.webp" data-width="400"></div>
 
</div>
 
</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">
<div class="webp" data-src="Furniture_Animation_230.webp"></div>
+
<div class="video" data-src="Furniture_Animation_230.webp"></div>
 
</div>
 
</div>
  
==PNG==
+
==PNG (native)==
  
 
Preferable for images (transparency).
 
Preferable for images (transparency).
Line 29: Line 45:
 
</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 53:
 
</div>
 
</div>
  
==GIF==
+
==GIF (native)==
  
 
Not good (poor color palette, bad transparency, large files).
 
Not good (poor color palette, bad transparency, large files).

Revision as of 02:52, 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).

PNG (native)

Preferable for images (transparency).

Furniture Full 230.png

APNG as PNG (native)

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

Furniture Animation 230.png

GIF (native)

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

Furniture Animation 230.gif