[티스토리] 이미지 용량 줄이기 (압축)

[티스토리] 이미지 용량 줄이기 (압축) - Squoosh

안녕하세요. 심심한 코딩쟁이입니다.

오늘은 이미지의 용량을 줄여주는 사이트를 소개하려합니다.

티스토리 또는 다른 블로그를 운영하는 블로거라면 이미지의 용량이 커서

페이지 로딩 시간이 길어질까 걱정해본 적이 있을 겁니다.

이때 필요한 것이 바로 Squoosh 입니다.

같이 살펴보시죠.

Squoosh는 구글에서 만들고 무료로 제공하고있는 "이미지 최적화 서비스"라고 보시면 됩니다.

Squoosh

Simple Open your image, inspect the differences, then save instantly. Feeling adventurous? Adjust the settings for even smaller files.

squoosh.app

특히 블로그 글에 올라갈 이미지를 최적화시키기는 작업에 유용하게 이용할 수 있습니다.

이미지를 JPEG 형식으로 변경하면서 Progressive 옵션을 적용시킬 수 있습니다.

또 WebP 형식의 이미지로 변경시킬 수 있으며, 이는 웹페이지에 최적화된 이미지 형식입니다.

홈페이지에 접속해 압축할 이미지를 드래그하거나 탐색창에서 찾아서 열어줍니다.

저는 반려견의 사진을 사용해보겠습니다.

가운데 검은 선을 기준으로 왼쪽에 원본 이미지, 오른쪽에 압축된 이미지를 보여줍니다.

오른쪽 하단부에서 이미지의 형식을 선택할 수 있으며, 형식별로 설정 가능한 옵션들을

고급 설정을 눌러서 변경할 수 있습니다.

단지, 이미지만을 업로드하고 아무설정도 건드리지 않았는데도 기존 용량에 비해 76%로 낮아진 것을 볼 수 있습니다.

Quality 값을 조절하거나 고급 설정의 설정값을 변화하면서 압축률의 변화와 이미지의 변화를 확인해가면서

원하는 설정대로 이미지를 최적화 시킬 수 있습니다.

압축에 대한 설정이 끝나면 내려받기 버튼을 클릭해서 변경된 이미지를 다운받고 사용하시면 됩니다.

여기가지 이미지 용량 줄이는 (압축) 사이트 Squoosh에 대한 설명이었습니다.

웹에서 사용하는 이미지는 가벼울수록 로딩시간을 빠르게 해주기 때문에 이미지의 최적화가 꼭 필요합니다.

이미지 최적화 외에도 내가 운영하는 웹 페이지의 로딩 속도를 빠르게하는 최적화 방법을 알아내는 방법이 있습니다.

구글에서 제공하는 페이지 로딩 속도를 측정하는 "PageSpeed Insights" 입니다.

PageSpeed Insights

올바른 URL을 입력하세요.

pagespeed.web.dev

위 링크로 접속해 테스트하고 싶은 링크를 입력하면 해당 페이지의 화면을 분석한 결과를 나타납니다.

분석 결과에서 발견된 문제점들에 대한 해결 방법도 알려주기 때문에 최적화에 큰 도움이 될 것입니다.

감사합니다.