Webでの画像形式とファイルサイズ目安 [2020/5]

Webでの画像形式とファイルサイズ

画像形式とサイズの目安

JPG, JPEG

• 非可逆圧縮

区分	画素数	JPGサイズ
FHD	1920x1080	2.2MB
4K	3840*2169	4.1MB
8K	7680*4320	21.5Mb

PNG

透過が使えて便利、losslessで細かい部分もぼやけずに表現。透過ならWebPでもできる。
小さいアイコン画像とかなら、JPGよりもサイズが小さくなり良いらしい。

区分	画素数	PNGサイズ
FHD	1920x1080	3.9MB
4K	3840*2169	9.5MB
8K	7680*4320	47.1Mb

Webp

Google発

a new image format for the web

軽い・早い・透過できる・Safariでは全く使えない

SVG

ベクター
アイコンをいろいろなサイズでなめらかに表示したいとき、や、Canvas

#　圧縮

Webpつおい

画像出典

その他

画像出典

画像出典

実験

何枚かの4K~サイズの画像（jpg）をwebpで出力してみた。
概してwebpの方が圧縮率が高かったが、特に同じ色が多いような画像（夜景や書類など）で圧縮率が高かった。
また、qualityに関しては、100~50程度までであれば、ほとんど画像の劣化を感じさせなかった。

#	size	original data (kb)	webp q=100	webp q=80	webp q=60	webp q=40
0	4032x3024	6,099 kb	4,082kb <66.9%>	496kb <8.1%>	193kb <3.2%>	131kb <2.1%>
1	4032x3024	7,383 kb	4,998kb <67.7%>	1,462kb <19.8%>	884kb<12.0%>	670kb <9.1%>
2	4032x3024	9,385 kb	6,408kb <68.3%>	2,237kb <23.8%>	1,551kb<16.5%>	1,192kb <12.7%>
3	7088x3904	19,471 kb	12,343kb <63.4%>	4,449kb <22.8%>	3,127kb<16.1%>	2,397kb <12.3%>
4	4032x3024	5,095 kb	3,244kb <63.7%>	412kb <8.1%>	237kb<4.7%>	178kb <3.5%>
5	4032x3024	5,294 kb	3,421kb <64.6%>	468kb <8.8%>	270kb<5.1%>	196kb <3.7%>

※<>内は、オリジナルデータの何％かを示している

実験コード

.py

from pathlib import Path
from PIL import Image
from io import BytesIO
import webp

def getsize(img, ext=None, **kwargs):
    if ext is None:
        ext = img.format
    iobuff = BytesIO()
    img.save(iobuff, ext, **kwargs)
    return len(iobuff.getvalue())//1000 #Kb

if __name__ == '__main__':
    ips = list(Path('./').glob("*_*.jpg"))
    print('| # |size|original data (kb)|webp q=100|webp q=80|webp q=60|webp q=40|')
    print('|---|----|------------------|---------:|--------:|--------:|--------:|')
    for i, _p in enumerate(ips):
        im = Image.open(_p)
        h, w = im.size
        s1 = _getsize(im,quality=100)
        s2 = _getsize(im,ext="webp", quality=100)
        s3 = _getsize(im,ext="webp",quality=80)
        s4 = _getsize(im,ext="webp",quality=60)
        s5 = _getsize(im,ext="webp",quality=40)
        print(f'|{i}|{h}x{w}|{s1:,} kb|{s2:,}kb <{s2/s1*100:.1f}%>|{s3:,}kb <{s3/s1*100:.1f}%>|{s4:,}kb<{s4/s1*100:.1f}%>|{s5:,}kb <{s5/s1*100:.1f}%>|')

Reference