요약

블로그는 로딩 속도가 생명이다. 무손실 고용량 이미지로 방문객들의 트래픽을 낭비할 필요가 없다. 어떻게 하면 생각없이 이미지를 업로드하면서도 페이지 빌드 과정에서 자동으로 유저에게 가벼운 이미지로 변환할 수 있을까?

목표

이미지를 올리고 본문 영역에서 이용하면 리사이징이나 파일 형식 변환(PNG,JPG -> AVIF,WEBP 등)을 자동으로 수행할 수 있을까?

• 결과적으로 브라우저 트래픽을 줄여야 함
  • 대충 CSS로 장난쳐서 보이는 이미지 크기만 줄이는 것을 원하는 건 아님
  • 원본 파일 및 리사이징된 파일 여러개가 생기는 것을 원함
• 직접 imagemagick을 다루는 일은 없었으면 좋겠다
• Aspect ratio는 유지해야 함
• 가능하면 싸고 간편한 방법이라야 함

선택지

하하, 역시 이미 툴이 있었네?

astro-imagetools에서 모든것을 다 해주고 있었다.

외부 SaaS 서비스를 이용하는 방법

보니까 imagekit.io라는 서비스에서 내가 원하는 기능을 거의 맞춰서 제공하고 있다. 다만 이 사이트의 경우 parameter을 URL에 바로 넣고, 그 URL 째로 캐시 및 제공하는 서버가 따로 있어 보였다. 쌈마이한 기능을 원하는 내 입장에선 이렇게 하면 static webpage builder를 쓰는 장점이 전혀 생기질 않아서 좋아보이진 않았다.

• 간편한 인터페이스 제공: React 기반 인터페이스

Makefile 삽질?

어차피 static한 입력 파일들이기 때문에 빌드 과정에 이미지들을 우겨넣는 것도 가능해 보였다. 다만 빌드 결과를 본문에 다시 적용하는게 조금 자연스럽지 않아보였다.

결론

어지간한 것들은 이미 다 구현되어 있는 경우가 많으니 검색부터 잘 해보자.