페이지스피트 인사이트에서 블로그를 점검해보니 이미지 로드에 시간이 많이 소요되고 있었다.
이미지 다이어트가 필요함을 깨닫는 순간이었다.
원래는 webp 형식을 이용했으나, avif가 압축률이 높고 호환성이 좋으며 움짤까지 지원된다는 사실을 알게 되었다.
그래서 한번 비교해보았다.
png파일을 avif로 변경해주었더니 크기가 10배 줄어들었다.
2~3배면 모르겠는데 10배는 너무 크다.
무조건 바꿔야한다는 생각이 들었다.
python을 이용하면 png를 avif로 변환하거나, avif를 png로 변환하는 것이 가능하다.
먼저 pip를 이용해 필요한 라이브러리들을 설치해준다.
pip install pillow pillow_avif imageio일단 내 그림들은 posts/[slug]/*.png 와 같은 경로로 저장되어 있다.
따라서 해당 경로로 이동해 png파일을 모두 avif로 변경해주면 된다.
from PIL import Image
import pillow_avif
import imageio
import pathlib
path = pathlib.Path.cwd()
# 현재 경로에 있는 파일들을 모두 확인한다.
for folder in path.iterdir():
if folder.is_dir():
for file in folder.iterdir():
# 만약 폴더라면 폴더 내부의 파일을 확인한다.
# 만일 확장자가 jpg, png 등 이미지 파일이면 실행한다.
if file.suffix in [".jpg", ".png", ".gif", ".PNG", ".JPG", ".jpeg", ".webp"]:
img = Image.open(file)
# gif파일이면 무조건 움짤이다.
# 각각의 이미지를 프레임으로 저장해 변환한다.
if file.suffix == ".gif" :
frames = []
frame_count = 0
try:
while True:
current_frame = img.convert('RGB')
frames.append(current_frame)
img.seek(img.tell() + 1)
except EOFError:
pass
imageio.mimsave(f'{file.parent}/{file.stem}.avif', frames, format='AVIF')
# 그게 아닐 경우 그냥 확장자 변환 후 저장한다.
else:
img.save(f'{file.parent}/{file.stem}.avif')이렇게 변환하고 나니 5.5MB짜리 움짤이 500kb가 되었다.
진짜 압축률 장난 없다.
avif의 성능에 대한 내용은 netflix의 공식 블로그를 확인해보자.
avif 확장자는 자본의 논리에 따라 기업에서 계속 밀어주고 있으니 앞으로도 계속 발전할 듯 하다.
블로그에 적용해서 SEO 최적화도 노려보자.