웹 - 궁극적 인 가이드를위한 JPEG 최적화
이미지 압축은 모든 기본 미디어 형식으로 제공됩니다. 그러나 GIF, PNG 및 JPEG의 차이점은 방법 정보가 압축되어 화면에 표시됩니다. 웹에 게시 된 훌륭한 이미지 미디어를 구성하기위한 팁이 너무 많습니다. 그러나 많은 디자이너는 여전히 일부 기본 사항을 이해하지 못합니다..
이 가이드에서는 적절한 JPEG 압축에 대한 몇 가지 아이디어를 나누고 자합니다. 적정 수준의 품질을 유지하면서 이미지를 최적화하여 웹 페이지로드 시간을 줄이려합니다. 파일 크기와 화면 묘사 사이의 균형을 찾는 것입니다. 디자이너가 따라야 할 완벽한 솔루션은 없습니다. 몇 가지 초기 연습이 필요하지만 일단 JPEG 압축을 이해하면 나중에 웹 사이트를 개발하는 것이 훨씬 쉬워집니다..
항상 100 % 절약하십시오.
거의 100 % 품질로 JPEG 이미지를 저장하면 안됩니다. 이것은 아니 가능한 한 생산하다 “최적화 된” 영상. 실제로 파일 크기를 엄청나게 늘리는 최적화 제한 공식을 계산합니다. 90 % 또는 95 % 품질과 비교해도 파일 크기가 크게 줄어 듭니다..
대부분의 경우 90 % 품질보다 훨씬 낮은 이미지를 저장하는 것이 좋습니다. Photoshop에서 [웹용으로 저장] 대화 상자를 열면 선택할 수있는 사전 설정 값이 있음을 알 수 있습니다. 가능한 JPEG 값을 아래에 추가했습니다. 고유 한 이름 지정 규칙을 알아 두십시오..
- 낮은 - 10 %
- 매질 - 30 %
- 높은 - 60 %
- 매우 높음 - 80 %
- 최고 - 100 %
Adobe Photoshop에서도 60 % 이미지 품질은 '높음'으로 간주됩니다. 많은 웹 개발자들은 50 % ~ 70 % 사이의 값으로 보증 할 안전한 범위입니다..
낮음이 너무 낮음?
최적화를 위해 선택한 값은 현재 프로젝트에 전적으로 의존합니다. 가장 큰 파일 크기를 출력 할 그래픽의 유형을 고려해야합니다. 압축해야하는 그래픽입니다.
나는 30 % 이하가 당신이 근본적인 화질을 정말로 버리고 있다고 주장 할 것이다. 다른 디자이너는 50 %를 “한도” 최적 값을 감소시키는 것. 하지만 여기서 가장 좋은 조언은 다른 설정을 시도하고 가장 잘 보이는 것을 보는 것입니다. 웹용 JPEG 이미지를 최적화하는 몇 가지 테스트 연구에서 잘못 될 수는 없습니다..
압축 옵션
우리는 먼저 '압축'과 '품질'이라는 두 용어를 서로 역의 관계로 명확히해야합니다. 즉, JPEG를 40 % 압축으로 저장하면 60 %의 품질을 얻을 수 있습니다 (압축하지 않고 최대 100 % 품질과 비교).
이것들은 활용할 수있는 가장 기본적인 옵션이며, 웹 저장시 충분해야합니다. 일반 사용자는 훨씬 더 세부적인 사용자 지정을하지 않습니다. 서브 샘플링은 RGB 이미지를 YCbCr (휘도, 크로마 블루, 크로마 레드)로 변환하는보다 복잡한 문제에 빠지게됩니다..
(이미지 출처 : Kara Monroe)
그만큼 광도 또는 밝기 설정은 항상 JPEG 압축에서 가능한 가장 높은 값으로 유지됩니다. 별도의 채널에이 밝기 값을 설정하면 Red 및 Blue의 개별 색상 값을보다 쉽게 최적화 할 수 있습니다. 이것은라고도합니다. 크로마 서브 샘플링. 손을 더럽히는 데 관심이있는 디자이너는이 압축 알고리즘에 대해 더 많이 읽는 것을 좋아합니다. JPEG 이미지에 초점을 맞춘 채도 샘플링에 관한이 훌륭한 블로그 게시물을 확인하십시오..
(이미지 출처 : Derek Hatfield)
흥미로운 측면으로 Adobe Photoshop은 항상 압축을 위해 서브 샘플링을 사용하지 않습니다. 을 통해 저장된 모든 이미지 “웹용으로 저장” 대화 상자는 50 % 품질 값 이하의 채도 서브 샘플링 만 사용합니다..
다른 웹 미디어
웹은 또한 다양한 종류의 이미지 미디어로 가득합니다. 사진, 아이콘, 단추, 배지 및 기타 그래픽을 사용할 수 있습니다. 그러나 버튼과 사진 사이의 품질을 비교하는 것이 의미가 없다는 것은 주목할만한 사실입니다.
사진이나 자세한 이미지를 사용하는 경우 압축되지 않은 별도의 JPEG 파일로 연결하는 것이 좋습니다. 그러면 압축률이 높고 파일 크기가 훨씬 작은 사이트에서 미리보기 이미지를 설정할 수 있습니다. 유일한 단점은 미디어 갤러리를 위해 두 세트의 이미지를 제공해야한다는 것입니다. 웹 사이트에서 여러 가지 다른 그래픽을 훑어보고 개별적으로 최적화 기술을 고려하십시오..
그래픽 모델 계획
당신은 쉽게 샅샅이 뒤질 수있는 정리 된 파일 시스템을 원합니다. 일부 웹 마스터는 플리커 (Flickr) 나 피카사 (Picasa)와 같이 웹상에서 자신의 사진을 호스팅하도록 선택할 것입니다. 그러나 여전히 이미지 크기를 줄이기 위해 압축 도구를 사용하고 싶지만 사이트에 표시하는 방법은 다양합니다. 이것은 특히 인터넷에 액세스 할 수있는 모바일 장치가 널리 보급 된 경우에 해당됩니다.
프론트 엔드 코드에서 발생하는 JavaScript JPEG 인코딩에 대해 논의하는 흥미로운 기사를 발견했습니다. 고품질 이미지 갤러리에는 많은 이점이 없지만 모바일 방문자의 로딩 시간을 줄일 수 있습니다. 이미지를 핫 링크하거나 섬네일을 동적으로 다시자를 때도 유용합니다..
체크 아웃 할 수있는 또 다른 멋진 도구는 Yahoo!입니다. 웃어. 이미지를 업로드 할 수있는 브라우저 기반 웹 응용 프로그램이며 Smush.it는 불필요한 추가 바이트를 모두 제거하여 파일 크기를 최적화합니다. 이미지 품질이 전혀 저하되지 않는 100 % 무손실입니다. 또한 웹 사이트 나 타사 서버에서 호스팅 한 경우 직접 URL에서 이미지를 일괄 업로드 할 수 있습니다..
추가 도구
이미지 조작과 관련하여 시도 할 소프트웨어가 많이 있습니다. 각 파일의 크기를 줄일 수있는 여분의 바이트는 매우 중요합니다. 거기에 소프트웨어의 전체가 많이 아니지만 사용할 수있는 옵션은 놀라운 있습니다.
IrfanView
Windows 용 무료 소프트웨어를 사용하면 큰 이미지 세트를보고 최적화 할 수 있습니다. 여러 개의 디렉토리에있는 이미지에서 일괄 변환을 지원하므로이 소프트웨어가 특히 마음에 듭니다. 수백 개의 JPEG 이미지에 대해 동일한 기능을 자동으로 적용 할 수 있습니다..
타사 개발자의 플러그인 지원이 더 좋습니다. 그 중 하나가 RIOT (Radical Image Optimization Tool)입니다. 이 플러그인은 김프와 같은 다른 유사한 오픈 소스 그래픽 편집기에서 작동합니다. 각 이미지의 압축 매개 변수를 수동으로 조정할 수있는 이중 이미지보기를 제공합니다.
소프트웨어 지원은 훌륭하며 RIOT 기능은 매우 사용하기 쉽습니다. 이미지 압축과 함께 EXIF 및 Adobe XMP와 같은 추가 메타 데이터를 제거 할 수 있습니다. 이러한 여분의 데이터 비트는 전체 파일 크기에 추가 할 수 있으며 거의 필요하지 않습니다..
Mac 용 ImageOptim
OS X을 실행 중이고 강력한 압축 응용 프로그램이 필요한 경우 더 이상 보지 마십시오. ImageOptim은 웹용 이미지를 압축하는 강력한 도구입니다. 때때로 Photoshop보다 좋습니다..
전체 응용 프로그램은 드래그 앤 드롭 기능을 지원하므로 많은 수의 이미지를 쉽게 최적화 할 수 있습니다. 마찬가지로 터미널 및 셸 스크립트에서 바로 명령을 실행할 수 있습니다. 자세한 정보 및 기술 지원은 Google 코드 페이지를 확인하십시오..
오페라에서 픽셀 화 된 JPEG 이미지를 렌더링 할 때 최신 1.3.3 안정 릴리스에 약간의 사소한 문제가있었습니다. 크롬, 사파리, 파이어 폭스, 오페라 (그리고 아마 IE)의 4 가지 주요 브라우저에서 최적화 된 이미지를 모두 확인해보십시오. 아무것도 보이지 않는 경우 조금 더 깨끗하게 변환하는 ImageOptim 1.3.0을 다운로드 해보십시오..
유용한 자료
- JPEG 101 : JPEG의 크래시 코스 가이드
- WordPress 용 JPG 이미지를 저장하는 올바른 압축 설정
- 영리한 JPEG 최적화 기법
- 웹 사이트에서 JPEG 이미지를 최적화하는 방법
- 이미지 압축에 대해 알아야 할 모든 것
결론
JPEG 압축은 품질과 물질 간의 적절한 균형을 찾아야하기 때문에 까다 롭습니다. 현대 인터넷 연결 속도가 증가하고 있더라도 웹 페이지의 크기를 줄여야 할 필요가 있습니다. jQuery 및 Typekit과 같은 새로운 프레임 워크는 잘 최적화 된 디자인에서도 수백 킬로바이트를 추가 할 수 있습니다..
제 초연 이미지 편집 소프트웨어로 Adobe Photoshop을 추천해야합니다. JPEG 최적화 프로세스에 대한 다른 예가있을 수 있습니다. 그러나 웹 디자이너는 덜 알려진 오픈 소스 솔루션을 통해 얻을 수 있습니다. JPEG 압축에 관한 비슷한 트릭이나 아이디어가 있다면 아래 게시 토론 영역에서 공유하십시오..
