목록 카드에 1600px 원본을 그대로 쓰면 안 되는 이유

카드 썸네일 규격을 1600×1000으로 정해 놓고, 목록에서도 그 원본을 그대로 썼습니다.

카드는 화면에서 330픽셀 정도로 보입니다. 1600픽셀짜리를 내려보내면 용량이 몇 배로 늘고, 브라우저가 줄이는 과정에서 작은 글자가 뭉갭니다. 실제로 재어 보니 28KB가 7.7KB로 줄었습니다. 4분의 1입니다.

올릴 때 한 번만 800픽셀짜리 사본을 만들어 두면 끝나는 일이었습니다. 목록은 작은 사본, 상세는 원본. srcset을 같이 넣으면 화면 크기에 따라 브라우저가 알아서 고릅니다.

한 가지 더. 홈페이지 전체를 16:10 카드에 밀어 넣으면 뭘 만든 건지 안 읽힙니다. 첫 화면 한 장 분량만 잘라 쓰는 편이 훨씬 낫습니다.