웹용 JPEG 파일의 압축 및 최적화

Nathan E. Malpass가 마지막으로 업데이트 : August 27, 2019

저는 그래픽 디자이너이며 매일 여러 이미지와 이미지 형식으로 작업합니다. 제가 하는 일 중 하나는 대용량 이미지 파일을 작업하고 편집하는 것입니다. 가장 많이 사용되는 파일 형식 중 하나는 JPEG입니다. 이제 최적화 및 JPEG 압축 특히 웹의 경우. 도와드릴까요?

~익명 그래픽 디자이너

1 부 : 소개 100부: XNUMX%(XNUMX%) 저축에서 자신을 중지 파트 III: 압축 옵션 XNUMX부: 웹을 위한 다양한 미디어 유형 파트 V: JPEG 이미지를 압축하는 도구 6 부 : 결론

1 부 : 소개

이미지 압축은 오늘날 매우 인기 있는 개념입니다. 이미지는 비즈니스, 직장, 심지어 개인 생활에서도 중요한 역할을 했기 때문에 삶의 거의 모든 측면에서 사용됩니다. 이미지 압축은 GIF, JPEG 및 PNG와 같은 다양한 파일 형식으로 수행할 수 있습니다.

이러한 이미지 파일 형식의 차이점은 압축이 수행되고 화면 내에서 표시되는 방식에 있습니다. 인터넷에서 훌륭한 미디어를 게시하는 방법을 알려주는 가이드가 많이 있습니다. 그러나 많은 디자이너들은 여전히 일반적으로 이미지와 미디어에 관한 기본 사항을 이해하지 못하고 있습니다.

이 기사에서는 JPEG 파일의 압축을 적절하게 구현하는 방법에 대해 설명하고 아이디어를 제공합니다. 이미지 품질을 일정 수준으로 유지하면서 웹 페이지 로딩 시간을 단축하려면 이미지를 최적화하고 압축해야 합니다.

여기서 트릭은 파일의 크기와 화면의 묘사 사이의 균형을 찾는 것입니다. 완벽한 실제 솔루션은 없습니다. 익숙해지려면 약간의 연습이 필요합니다. 하지만 한 번 더 알고 나면 JPEG 파일 압축, 웹사이트 개발은 장기적으로 더 쉬울 것입니다.
JPEG 이미지 압축

100부: XNUMX%(XNUMX%) 저축에서 자신을 중지

백퍼센트(100%) 품질을 사용하여 JPEG 이미지를 저장하지 마십시오. 물론 이것이 최적화된 이미지로 이어지지는 않습니다. 이미지의 품질이 높을수록 파일 크기가 커집니다.

확인하세요. 이미지를 90% ~ 95% 품질로 저장하려고 하면 파일 크기가 크게 줄어든 것을 알 수 있습니다. 90% 미만의 품질로 이미지를 저장해야 하는 경우가 있습니다.

Photoshop을 사용하는 경우 운이 좋습니다. "웹용으로 저장" 대화 상자를 확인하려고 하면 Photoshop에서 실제로 다양한 사전 설정 값 중에서 선택할 수 있음을 알 수 있습니다. JPEG에 대한 가능한 값은 아래에서 볼 수 있습니다.

* 최대 품질은 100%입니다.

* 매우 높은 품질은 80%입니다.

* 고품질은 60%입니다.

* 중간 품질은 30%입니다.

* 마지막으로 낮은 품질은 10%입니다.

Adobe Photoshop에서는 60%를 고품질 이미지로 간주하기도 합니다. 웹 개발자의 경우 약 50%에서 70%를 유지하는 것이 가장 좋습니다. 이것은 웹사이트를 개발할 때 보증할 수 있는 안전한 범위입니다.

이미지 품질이 실제로 낮다고 실제로 말할 수 있는 실제 값은 무엇입니까? 실제로 최적화에 사용하는 값은 작업 중인 실제 프로젝트나 이미지에 따라 다릅니다.

가장 큰 파일 크기를 초래하는 다양한 그래픽 유형을 고려해야 합니다. 이러한 이미지는 최대한 압축해야 합니다. 30% 미만이면 이미지 품질이 저하될 수 있습니다. 다른 디자이너와 개발자는 품질을 타협하고 싶지 않기 때문에 제한을 50%로만 설정합니다.

그러나 가장 좋은 조언은 무엇입니까? 글쎄, 당신은 실제로 당신을 위해 최고의 설정을 시도해야합니다. 몇 가지 최적화 또는 압축 수준을 시도하고 품질 및 파일 크기와 관련하여 어떤 것이 가장 잘 보이는지 확인하십시오. 여기저기서 약간의 조정이 모양과 느낌을 손상시키지 않고도 JPEG 파일을 최대 압축률로 최적화하는 데 도움이 될 수 있다는 사실을 알게 되면 놀랄 것입니다.
JPEG 포토샵 압축

파트 III: 압축 옵션

먼저 품질과 압축에 대해 더 많이 알고 싶습니다. 이 두 용어는 실제로 서로 반비례합니다. 즉, 특정 JPEG 이미지를 30% 압축률로 저장하면 70% 품질의 결과를 얻을 수 있습니다. 이미지가 압축되지 않은 경우 100% 품질입니다.

이것들은 실제로 가장 기본적인 것 중 하나인 사용할 수 있는 옵션입니다. 그리고 실제로 World Wide Web용으로 저장하면 충분합니다. 대부분의 사용자는 다양한 사용자 정의에 대해 더 깊이 파고 들지 않습니다. 서브샘플링은 예를 들어 RGB 이미지에서 YCbCr(Chroma Red, Chroma Blue 및 Luminance)의 이미지로 변환하는 과정에서 사람들을 훨씬 더 복잡한 문제에 빠뜨립니다.

밝기 설정을 휘도라고 합니다. JPEG 이미지를 압축하는 동안 휘도는 항상 가장 높을 수 있는 값 내에서 설정됩니다. 밝기 값은 별도의 채널에 배치됩니다. 이 때문에 개별 색상 값(예: 파란색 및 빨간색)을 실제로 최적화하기가 더 쉬워집니다. 이를 크로마 서브샘플링 프로세스라고 합니다. 매우 세심한 설계자는 이러한 유형의 압축 알고리즘에 대해 더 알고 싶어합니다.

그러나 이것을 모를 수도 있지만 Adobe Photoshop은 일반적으로 압축 방법으로 서브샘플링을 사용하지 않습니다. Adobe Photoshop을 사용하고 웹용으로 저장을 선택한 경우 이 기능을 사용하여 저장된 이미지는 품질 값 50% 미만인 크로마 서브샘플링을 활용합니다.
JPEG 압축 압축 Jpeg

XNUMX부: 웹을 위한 다양한 미디어 유형

월드 와이드 웹은 매우 다양합니다. 다양한 이미지 매체로 가득 차 있습니다. 예를 들어 아이콘, 배지, 버튼, 사진 및 기타 유형의 그래픽 파일이 있습니다. 그러나 다음과 같은 점을 고려해 볼 수 있습니다. 두 가지 다른 유형의 그래픽(예: 버튼과 제품 이미지)의 품질을 비교하는 것은 실제로 의미가 없습니다.

자세한 이미지나 사진을 활용할 때 압축률이 낮은 별도의 JPEG 파일로 연결을 시도할 수 있습니다. 그런 다음 상대적으로 압축률이 높고 파일 크기가 훨씬 줄어든 썸네일을 사이트 내에서 설정할 수 있습니다.

이것의 단점은 무엇입니까? 글쎄, 당신은 당신의 미디어 갤러리를 위해 이러한 이미지의 두 가지 다른 세트를 제공해야 할 것입니다. 웹사이트에 넣은 모든 그래픽 파일을 고려해야 합니다. 그런 다음 각 파일에 대해 구현해야 하는 압축 또는 최적화 기술을 장치해야 합니다.

파일을 쉽게 검색할 수 있도록 조직화된 파일 시스템을 구현하는 것이 가장 좋습니다. Picasa 또는 Flickr와 같은 웹 호스트 외부에서 이미지를 호스팅하도록 선택한 웹마스터가 있습니다.

이 경우에도 이미지 크기를 최소화하기 위해 압축 도구를 사용하는 것이 더 나을 수 있습니다. 그러나 사이트 내에서 이러한 압축 이미지를 실제로 표시하는 방법은 여전히 다양합니다. 이는 오늘날 사람들이 전 세계 어디에서나 인터넷에 액세스할 수 있도록 도와주는 모바일 장치의 사용이 증가함에 따라 사실입니다.
압축 JPEG 압축