Thumbor를 사용하면 필요에 따라 이미지의 크기를 자유롭게 조절하고 압축하고 변환할 수 있습니다.
Thumbor는 이미지를 쉽게 압축, 크기 조절, 변환할 수 있게 해주는 무료 오픈소스 이미지 CDN입니다. 이 게시물을 통해 아무것도 설치하지 않고도 Thumbor를 직접 사용해 볼 수 있습니다. http://34.67.235.246:8888에서 사용해 볼 수 있도록 샌드박스 Thumbor 서버를 설정했습니다. 실험할 이미지는 http://34.67.235.246:8888/unsafe/https://web.dev/backdrop-filter/hero.jpg에서 확인할 수 있습니다.
사전 요건
이 게시물에서는 이미지 CDN이 로드 성능을 개선할 수 있는 방법을 이해하고 있다고 가정합니다. 그렇지 않은 경우 이미지 CDN을 사용하여 이미지 최적화를 확인하세요. 또한 이전에 기본 웹사이트를 구축한 적이 있다고 가정합니다.
미리보기 URL 형식
이미지 CDN을 사용하여 이미지 최적화에서 언급했듯이 각 이미지 CDN은 이미지에 약간 다른 URL 형식을 사용합니다. 그림 1은 Thumbor의 형식을 보여줍니다.
출발지
모든 출처와 마찬가지로 Thumbor URL의 출처는 스키마 (거의 항상 http 또는 https), 호스트, 포트의 세 부분으로 구성됩니다. 이 예에서 호스트는 IP 주소를 사용하여 식별되지만 DNS 서버를 사용하는 경우 thumbor-server.my-site.com과 같이 표시될 수 있습니다. 기본적으로 Thumbor는 포트 8888을 사용하여 이미지를 제공합니다.
보안 키
URL의 unsafe 부분은 보안 키 없이 Thumbor를 사용하고 있음을 나타냅니다. 보안 키는 사용자가 이미지 URL을 무단으로 변경하지 못하도록 합니다. 이미지 URL을 변경하면 사용자가 서버 및 호스팅 청구서를 사용하여 이미지 크기를 조절하거나 더 악의적으로 서버에 과부하를 일으킬 수 있습니다. 이 가이드에서는 Thumbor의 보안 키 기능 설정을 다루지 않습니다.
크기
URL의 이 부분은 출력 이미지의 원하는 크기를 지정합니다. 이미지의 크기를 변경하지 않으려는 경우 생략할 수 있습니다. Thumbor는 자르기 또는 크기 조정과 같은 다양한 접근 방식을 사용하여 다른 URL 매개변수에 따라 원하는 크기를 달성합니다. 이 게시물의 다음 섹션에서는 이미지 크기를 조절하는 방법을 자세히 설명합니다.
직접 해보기:
새 탭에서 원래 크기로 게재된 이미지를 보려면 다음 URL을 클릭합니다. http://34.67.235.246:8888/unsafe/https://web.dev/backdrop-filter/hero.jpg
원본 이미지 이미지 크기를 100x100픽셀로 조절합니다. http://34.67.235.246:8888/unsafe/100x100/https://web.dev/backdrop-filter/hero.jpg
필터
필터는 이미지를 변환합니다. URL 세그먼트의 필터 부분은 filters:로 시작하고 그 뒤에 콜론으로 구분된 필터 목록이 옵니다. 필터를 사용하지 않는 경우 생략할 수 있습니다. 개별 필터의 문법은 0개 이상의 인수가 포함된 함수 호출 (예: grayscale())과 유사합니다.
직접 해보기:
반경 25픽셀의 가우시안 블러 효과인 단일 필터를 적용합니다. http://34.67.235.246:8888/unsafe/filters:blur(25)/https://web.dev/backdrop-filter/hero.jpg
흐리게 처리된 이미지 여러 필터를 적용합니다. 그레이 스케일로 변환하고 이미지를 90도로 회전합니다. http://34.67.235.246:8888/unsafe/filters:grayscale():blur(90)/https://web.dev/backdrop-filter/hero.jpg
이미지 변환
이 섹션에서는 성능과 관련성이 가장 높은 Thumbor 기능(압축, 크기 조절 및 파일 형식 간 변환)에 초점을 맞춥니다.
압축
quality 필터는 JPEG 이미지를 원하는 이미지 품질 수준 (1~100)으로 압축합니다. 품질 수준을 지정하지 않으면 Thumbor가 이미지를 품질 수준 80으로 압축합니다. 이는 좋은 기본값입니다. 품질 수준 80~85는 일반적으로 이미지 품질에 눈에 띄는 영향을 거의 미치지 않지만 이미지 크기를 30~40% 줄입니다.
직접 해보기:
이미지를 화질 1 (매우 나쁨)으로 압축합니다. http://34.67.235.246:8888/unsafe/filters:quality(1)/https://web.dev/backdrop-filter/hero.jpg
저화질 이미지 Thumbor의 기본 압축 설정(http://34.67.235.246:8888/unsafe/filters:quality()/https://web.dev/backdrop-filter/hero.jpg)을 사용하여 이미지를 압축합니다.
크기 조정
원래 비율을 유지하면서 이미지 크기를 조절하려면 URL 문자열의 size 부분 내에 $WIDTHx0 또는 0x$HEIGHT 형식을 사용합니다.
직접 해보기:
원래 비율을 유지하면서 이미지의 너비를 200픽셀로 조정합니다. http://34.67.235.246:8888/unsafe/200x0/https://web.dev/backdrop-filter/hero.jpg
너비 200픽셀로 이미지 크기가 조절됨 원래 비율을 유지하면서 이미지 높이를 500픽셀 높이로 조정합니다. http://34.67.235.246:8888/unsafe/0x500/https://web.dev/backdrop-filter/hero.jpg
proportion 필터를 사용하여 이미지의 크기를 원본의 비율로 조정할 수도 있습니다. 비율 필터와 함께 크기를 지정하면 이미지 크기가 조정되고 비율 필터가 적용됩니다.
직접 해보기:
다음과 같이 이미지 크기를 원본의 50% 로 조정합니다. http://34.67.235.246:8888/unsafe/filters:proportion(.5)/https://web.dev/backdrop-filter/hero.jpg
이미지 크기가 원본 크기의 50% 로 조절됨 이미지의 너비를 1, 000픽셀로 조절한 다음 현재 크기의 10% 로 이미지 크기를 조절합니다. http://34.67.235.246:8888/unsafe/1000x/filters:proportion(.1)/https://web.dev/backdrop-filter/hero.jpg
이러한 메서드는 Thumbor의 다양한 자르기 및 크기 조정 옵션 중 일부에 불과합니다. 다른 옵션에 대해서는 사용량을 확인하세요.
파일 형식
format 필터는 이미지를 jpeg, webp, gif 또는 png로 변환합니다. 성능 향상을 위해 최적화하는 경우 JPEG 또는 WebP를 사용해야 합니다. PNG 및 GIF 파일은 대체로 훨씬 더 크고 압축되지 않기 때문입니다.
직접 해보기:
- 이미지를 WebP로 변환합니다. DevTools의 네트워크 패널을 열면 문서의 Content-Type 응답 헤더에 서버가 WebP 이미지를 반환했음을 알 수 있습니다. http://34.67.235.246:8888/unsafe/filters:format(webp)/https://web.dev/backdrop-filter/hero.jpg
content-type 응답 헤더다음 단계
hero.jpg 이미지에 다른 필터 및 변환을 사용해 보세요.
자체 Thumbor 설치를 사용해 보려면 thumbor.conf 파일을 사용하는 방법과 이유를 설명하는 아래 부록을 확인하세요.
부록: thumbor.conf
thumbor.conf 구성 파일을 설정하고 사용하여 이 게시물에서 설명하는 여러 구성 옵션을 비롯한 여러 구성 옵션을 기본값으로 설정할 수 있습니다. thumbor.conf 파일의 설정은 URL 문자열 매개변수로 재정의하지 않는 한 모든 이미지에 적용됩니다.
thumbor-config명령어를 실행하여 새thumbor.conf파일을 만듭니다.thumbor-config > ./thumbor.conf새
thumbor.conf파일을 엽니다.thumbor-config명령어는 모든 Thumbor 구성 옵션을 나열하고 설명하는 파일을 생성했습니다.줄 주석 처리를 삭제하고 기본값을 변경하여 설정을 구성합니다. 다음과 같이 설정하면 유용할 수 있습니다.
QUALITYAUTO_WEBPMAX_WIDTH및MAX_HEIGHTALLOW_ANIMATED_GIFS
thumbor.conf설정을 사용하려면--conf플래그와 함께 Thumbor를 실행하세요.thumbor --conf /path/to/thumbor.conf