6시간 날려먹음
휴…
클라우드 플레어 를 이용한 CDN 우회
이미지는 종종 웹 페이지에서 다운로드된 바이트의 대부분을 차지하며 종종 상당한 양의 시각적 공간을 차지한다. 결과적으로, 이미지를 최적화하면 종종 웹사이트에서 가장 큰 바이트 절감과 성능 개선을 얻을 수 있습니다. 브라우저가 다운로드해야 하는 바이트가 적을수록 클라이언트의 대역폭에 대한 경쟁이 줄어들고 브라우저가 화면에 유용한 콘텐츠를 더 빨리 다운로드하고 렌더링할 수 있습니다.
이미지 최적화는 예술과 과학이다: 개별 이미지를 가장 잘 압축하는 방법에 대한 확실한 답이 없기 때문에 예술이며, 이미지의 크기를 크게 줄일 수 있는 잘 발달된 기술과 알고리즘이 많기 때문에 과학이다. 이미지에 대한 최적의 설정을 찾으려면 포맷 기능, 인코딩된 데이터의 내용, 품질, 픽셀 크기 등 다양한 차원을 따라 신중한 분석이 필요합니다.
벡터 이미지 최적화 #
모든 최신 브라우저는 2차원 그래픽을 위한 XML 기반 이미지 형식인 확장 가능한 벡터 그래픽(SVG)을 지원합니다. SVG 마크업을 페이지에 직접 삽입하거나 외부 리소스로 삽입할 수 있습니다. 대부분의 벡터 기반 그리기 소프트웨어는 SVG 파일을 만들거나 좋아하는 텍스트 편집기에서 직접 손으로 쓸 수 있습니다.
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 612 792" xml:space="preserve">
<g id="XMLID_1_">
<g>
<circle fill="red" stroke="black" stroke-width="2" stroke-miterlimit="10" cx="50" cy="50" r="40"/>
</g>
</g>
</svg>
XML
복사
위의 예는 검은색 윤곽선과 빨간색 배경으로 아래의 간단한 원 모양을 렌더링하고 어도비 일러스트레이터에서 내보냈습니다.
아시다시피, 브라우저에서 자산을 렌더링하는 데 불필요한 레이어 정보, 주석 및 XML 네임스페이스와 같은 많은 메타데이터가 포함되어 있습니다. 결과적으로, SVGO와 같은 도구를 통해 SVG 파일을 축소하는 것은 항상 좋은 생각입니다.
예를 들어, SVGO는 일러스트레이터가 생성한 위의 SVG 파일의 크기를 58% 줄여 470바이트에서 199바이트로 줄입니다.
<svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 792"><circle fill="red" stroke="#000" stroke-width="2" stroke-miterlimit="10" cx="50" cy="50" r="40"/></svg>
XML
복사
SVG는 XML 기반 형식이기 때문에, 전송 크기를 줄이기 위해 GZIP 압축을 적용할 수도 있습니다. 서버가 SVG 자산을 압축하도록 구성되어 있는지 확인하세요!
래스터 이미지는 단순히 개별 "픽셀"의 2차원 격자입니다. 예를 들어, 100x100 픽셀 이미지는 10,000 픽셀의 시퀀스입니다. 차례로, 각 픽셀은 "RGBA" 값을 저장합니다: (R) 빨간색 채널, (G) 녹색 채널, (B) 파란색 채널, (A) 알파 (투명도) 채널.
내부적으로, 브라우저는 각 채널에 256개의 값(쉐이드)을 할당하며, 이는 채널당 8비트(2 ^ 8 = 256), 픽셀당 4바이트(4채널 x 8비트 = 32비트 = 4바이트)로 변환됩니다. 결과적으로, 그리드의 크기를 알면 파일 크기를 쉽게 계산할 수 있습니다:
•
100x100 픽셀 이미지는 10,000 픽셀로 구성되어 있습니다.
•
10,000 픽셀 x 4바이트 = 40,000바이트
•
40,000바이트 / 1024 = 39KB
이미지 최적화 체크리스트 #
이미지를 최적화할 때 명심해야 할 몇 가지 팁과 기술:
•
벡터 형식을 선호합니다: 벡터 이미지는 해상도와 스케일에 독립적이기 때문에 다중 장치 및 고해상도 세계에 완벽하게 적합합니다.
•
SVG 자산 축소 및 압축: 대부분의 그리기 응용 프로그램에서 생성된 XML 마크업에는 종종 제거할 수 있는 불필요한 메타데이터가 포함되어 있습니다. 서버가 SVG 자산에 GZIP 압축을 적용하도록 구성되어 있는지 확인하십시오.
•
•
래스터 형식에 대한 최적의 품질 설정을 실험하세요: "품질" 설정을 누르는 것을 두려워하지 마세요, 결과는 종종 매우 좋고 바이트 절약이 중요합니다.
•
불필요한 이미지 메타데이터 제거: 많은 래스터 이미지에는 자산에 대한 불필요한 메타데이터가 포함되어 있습니다: 지리 정보, 카메라 정보 등. 이 데이터를 제거하기 위해 적절한 도구를 사용하세요.
•
자동화, 자동화, 자동화: 모든 이미지 자산이 항상 최적화되도록 자동화된 도구와 인프라에 투자하세요.
왜 신경을 써야 할까요? #
압축되지 않은 이미지는 불필요한 바이트로 페이지를 부풀립니다. 오른쪽 사진은 왼쪽 사진보다 40% 작지만 일반 사용자에게는 동일하게 보일 것입니다.
측정 #
Lighthouse을 실행하여 이미지를 압축하여 페이지 로드를 개선할 수 있는 기회를 확인합니다. 이러한 기회는 "효율적으로 이미지 인코딩"에 나열되어 있습니다.
Lighthouse는 현재 JPEG 형식의 이미지만 압축할 수 있는 기회에 대해 보고합니다.
이미지민 #
플러그인 #
Imagemin은 "플러그인"을 중심으로 구축되었습니다. 플러그인은 특정 이미지 형식을 압축하는 npm 패키지입니다(예: "mozjpeg"는 JPEG 압축). 인기 있는 이미지 형식에는 선택할 수 있는 여러 플러그인이 있을 수 있습니다.
플러그인을 선택할 때 고려해야 할 가장 중요한 사항은 "손실"인지 "무손실"인지입니다. 무손실 압축은 데이터가 손실되지 않습니다. 손실 압축은 파일 크기를 줄이지만 이미지 품질을 저하시킬 수 있습니다. 플러그인 "손실"인지 "무손실"인지를 언급하지 않으면 API로 알 수 있습니다. 출력의 이미지 품질을 지정할 수 있다면 "손실"입니다.
대부분의 사람들에게 손실 플러그인이 최선의 선택입니다. 더 큰 파일 크기 절감 효과를 제공하며 요구 사항에 맞게 압축 수준을 사용자 지정할 수 있습니다. 아래 표에는 인기 있는 Imagemin 플러그인이 나열되어 있습니다. 이것들이 사용 가능한 유일한 플러그인은 아니지만 모두 프로젝트에 좋은 선택이 될 것입니다.
이미지 형식 | 손실 플러그인 | 무손실 플러그인 |
JPEG | ||
PNG | ||
GIF | ||
SVG | ||
웹 |
이미지민 CLI #
Imagemin CLI는 imagemin-gifsicle, imagemin-jpegtran, imagemin-optipng, imagemin-pngquant 및 imagemin-svgo의 5가지 플러그인과 함께 작동합니다. Imagemin은 입력의 이미지 형식에 따라 적절한 플러그인을 사용합니다.
"images/" 디렉터리의 이미지를 압축하고 동일한 디렉터리에 저장하려면 다음 명령을 실행하십시오(원본파일 덮어쓰기).
$ imagemin images/* --out-dir=images
Shell
복사
이미지민 npm 모듈 #
Imagemin 자체를 노드 스크립트로 사용할 수도 있습니다. 이 코드는 "imagemin-mozjpeg" 플러그인을 사용하여 JPEG 파일을 50 품질로 압축합니다('0'은 최악, '100'은 최고):
const imagemin = require('imagemin');
const imageminMozjpeg = require('imagemin-mozjpeg');
(async() => {
const files = await imagemin(
['source_dir/*.jpg', 'another_dir/*.jpg'],
{
destination: 'destination_dir',
plugins: [imageminMozjpeg({quality: 50})]
}
);
console.log(files);
})();
Plain Text
복사