이미지의 파일 크기를 줄이려면 어떻게해야합니까?
답변:
Smashing Magazine은 PNG 최적화 및 JPG 최적화 에 대해 2 개의 훌륭한 기사를 작성했습니다 .
형식과 구현에 대해 알지 못하는 몇 가지 사항에 대해 자세히 설명합니다. 예를 들어 JPEG 기사 : "Photoshop에서 품질을 50 미만으로 설정하면 색상 다운 샘플링이라는 추가 최적화 알고리즘을 실행하여 인접한 8 픽셀 블록의 색상을 평균화합니다."
두 기사 모두 Photoshop에서 사용할 수있는 특정 기술을 사용하여 압축률을 높이기 위해 파일을 준비합니다. 파일을 저장 한 후 사용 된 기술보다 훨씬 더 효과적입니다.
이러한 파일을 저장하거나 파일에 저장 한 후에 Photoshop에서 조정할 소스 파일을 계층화 할만큼 운이 좋지 않은 경우에도 이러한 파일을 압축하는 데 더 많은 압축이 적용됩니다.
ImageOptim 이라는 Mac 앱을 사용합니다 . 그들의 사이트에서 :
ImageOptim은 최상의 압축 매개 변수를 찾고 불필요한 설명과 색상 프로파일을 제거하여 이미지를 최적화하여 디스크 공간을 덜 차지하고 더 빠르게로드합니다. PNG, JPEG 및 GIF 애니메이션을 처리합니다.
ImageOptim은 AdvanceCOMP 의 AdvPNG, OptiPNG , PngCrush , JpegOptim , libjpeg의 jpegtran , Gifsicle 및 선택적으로 PNGOUT 과 같은 다양한 최적화 도구를위한 GUI를 제공합니다 .
웹에 이미지를 게시하는 데 탁월하며 (Photoshop에서 "웹용으로 저장된 이미지"이미지를 쉽게 축소) Mac 및 iPhone 응용 프로그램을 더 작게 만드는 데 유용합니다.
케이크 조각. 이미지 (또는 이미지 폴더)를 창으로 드래그하면 압축 구성을 조정하고 불필요한 메타 데이터 및 색상 프로파일 정보 (어쨌든 널리 지원되지 않는)를 제거하는 이러한 모든 도구를 통해 실행됩니다. 저장하기 전에 색상 프로파일을 수정해야합니다. 저장 및 포함하지 않음).
이 인용문에 링크 된 모든 도구에는 PNGOUT을 제외한 Windows / Linux / Mac 버전이 있지만 고맙게도 누군가 PNGOUT 을 OS X 및 Linux 로 이식 했습니다 . ImageOptim을 사용하기로 선택한 경우 .app에 PNGOUT을 제외한 모든 항목이 포함되므로 PNGOUT 포트를 잡고 / usr / local / bin (또는 어디에나)에 놓고 ImageOptim의 위치를 알려주십시오.
Photoshop의 "웹 및 장치 용으로 저장"을 통해 저장 한 후에도 파일 크기가 30 % 이상 떨어지는 것을 볼 수 있습니다 (특히 PNG 이미지의 경우).
팁 : 최적화를 실행 한 후 왼쪽의 아이콘 열을 기준으로 정렬하고 더 이상 줄이지 않은 (X) 아이콘이있는 모든 행을 선택하십시오. 목록에서 이미지를 제거하고 확인 표시 아이콘이있는 모든 이미지에서 다시 실행하십시오. 나는 여전히 파일 크기를 잃는 이미지를 가질 것이라고 약속 할 수 있습니다. 모든 (X) 아이콘이 표시 될 때까지 정렬, 선택, 제거, 재실행을 반복하고 하루에 호출하십시오.
PNG 이미지의 경우 컬러 맵의 색상 수를 줄이고 인덱스 PNG로 저장할 수 있습니다. 예를 들어 128x128 픽셀 (압축되지 않은)의 로고를 생각해보십시오. 실제로 사용하는 16 가지 색상 만 있다고 상상해보십시오.
- PNG-32, 픽셀 당 4 바이트-65KB
- PNG-8, 픽셀 당 1 바이트-16kB
- PNG-4, 픽셀 당 4 비트-8KB
이미지의 품질을 떨어 뜨리지 않고 (특정 종류의 이미지에만 적용) 크기를 크게 줄일 수 있습니다.
단추 및 사이트 아이콘의 경우 하나의 이미지로 집계하고 CSS 또는 JavaScript를 사용하여 표시 (스프라이트)를 제어 할 수도 있습니다. 이렇게하면 각 이미지에 대한 HTTP 요청 수가 줄어 듭니다.
다른 형식을 사용해보십시오.
- 사진을위한 JPEG
- 알파 및 / 또는 그림자가있는 사진의 경우 PNG
- 작은 색상 표가있는 이미지의 경우 GIF (흑백 또는 노란색 아이콘 등)
기본적으로 이미지를 다른 형식으로 저장 한 다음 파일 크기를 확인하십시오.
JPEG를 사용하는 경우 paint.net과 같은 그래픽 편집기에서 이미지 품질을 위아래로 조정할 수 있어야합니다. 이미지의 50 % 품질은 일반적으로 웹에 충분하며 이미지를 훨씬 작게 만듭니다.
PNG를 사용하면이 작업을 수행 할 수 없지만 때로는 PNG가 JPEG보다 훨씬 크고 때로는 작습니다. PNG는 흑백 선 그림과 같은 흑백 이미지의 경우 훨씬 작습니다.
요즘의 조언은 CSS 스프라이트를 사용하여 요청을 줄여로드 시간을 단축하는 것이지만 실제로 얻는 이미지 크기를 살펴 봐야합니다. 예를 들어 여러 흑백 PNG를 색상으로 결합하는 경우 CSS 스프라이트 이미지가 구성 요소 이미지보다 훨씬 클 수 있습니다.
또한 모든 EXIF 데이터를 제거해야합니다. 거의 모든 것이 웹 사용자와 관련이 없으며, Canon 5D를 사용하여 사진을 찍었고 실제로 사용했음을 알아야합니다. F-Stop 2.8, 0.5 초 동안 노출, ISO 160, 노출 바이어스 없음 및 9mm 초점 거리?
이 메타 데이터는 모두 이미지에 가중치를 추가하므로 일반적으로 제거해야합니다.
으로 jessegavin의 포인트 아웃, 대부분의 이미지 앱이 사용자에게 압축의 효과의 미리보기를 표시합니다 - "8"거의 당신에게 오프 최상의 거래를주기 위하여려고하지의 담요 설정으로,이를 사용합니다.
마지막으로 Google Page Speed Firefox / Firebug 플러그인을 사용하면 이미지 크기를 얼마나 줄일 수 있는지에 대한 좋은 아이디어를 얻을 수 있습니다 (작은 버전을보고 저장하는 것을 포함하여).
원하는 품질 수준을 유지하면서 이미지의 크기를 가능한 작게 유지하기 위해 다른 제안을 모두 수행 한 후에는 최소한의 HTTP 헤더로 이미지를 제공하도록 웹 사이트를 구성하고 제공하는 헤더를 사용하면 프록시 서버와 웹 브라우저를 캐싱하여 이미지를 적절하게 저장할 수 있습니다.
요청 크기를 줄이려면 웹 서버가 X-Powered-By와 같은 쓸모없는 헤더를 보내지 않도록 구성되어 있는지 확인하십시오. 또한 쿠키를 설정하지 않은 호스트의 이미지, CSS 및 기타 정적 구성 요소 (예 : static.example.com)를 제공해야합니다.
정적 이미지의 경우 Expires 헤더를 먼 미래의 날짜로 설정하십시오. 이를 통해 웹 브라우저와 중간에있는 캐싱 프록시가 가능한 한 이미지를 오래 유지할 수 있습니다. 이것의 유일한 단점은 다른 이미지를 표시하려면 다른 파일 이름을 사용하고 대신 해당 파일에 링크해야한다는 것입니다. 파일 이름의 버전 번호 (예 : myimage_1.png 또는 /images/3/logo.png)는 효과적인 방법입니다. 정적이 아닌 페이지의 경우 현실적인 Expires 헤더 (액세스 + X 시간)를 설정하고 이전에 파일을 다운로드 한 브라우저가 빠르게 테스트 할 수 있도록 Last-Modified 헤더 또는 eTag 헤더 (둘다는 아님)를 설정하십시오 전체 이미지를 풀다운하는 대신 헤더를 비교하여 현재 버전이 있는지 여부
이러한 기술에 대해 많은 자료가 있지만 Yahoo는 한 곳에서 컨텐츠 전송 성능 을 향상시키는 데 도움이되는 많은 팁을 제공 했습니다.