it-gundan.com

이미지의 파일 크기를 줄이려면 어떻게해야합니까?

일부 wordpress 테마 작업 일부 이미지 파일을 수정하고 편집 한 버전이 원본보다 3-4 배 더 큰 경우가 있습니다 (동일한 형식으로 저장). 품질을 떨어 뜨리고 싶지 않습니다. 파일 크기를 작게하여 더 빠르게로드 할 수있는 방법에는 어떤 것이 있습니까?

예를 들어 현재 Photoshop을 사용하고 이미지 품질 슬라이더를 '8'(10 개 중)로 설정했습니다.

15
Ryan Elkins

Smashing Magazine은 PNG OptimizationJPG Optimization 에서 2 개의 훌륭한 기사를 수행했습니다.

형식과 구현에 대해 알지 못하는 몇 가지 사항에 대해 자세히 설명합니다. 예를 들어 JPEG 기사 : "Photoshop에서 품질을 50 미만으로 설정하면 색상 다운 샘플링이라는 추가 최적화 알고리즘을 실행하여 인접한 8 픽셀 블록의 색상을 평균화합니다.".

두 기사 모두 Photoshop에서 사용할 수있는 특정 기술을 사용하여 압축률을 높이기 위해 파일을 준비합니다. 파일을 저장 한 후 사용 된 기술보다 훨씬 더 효과적입니다.

이러한 파일을 저장하거나 파일에 저장 한 후에 Photoshop에서 조정하기 위해 소스 파일을 계층화 할만큼 운이 좋지 않은 경우에도 이러한 파일을 압축하는 데 더 많은 압축이 적용됩니다.

ImageOptim 라는 Mac 앱을 사용합니다. 그들의 사이트에서 :

ImageOptim은 최상의 압축 매개 변수를 찾고 불필요한 설명과 색상 프로파일을 제거하여 이미지를 최적화하여 디스크 공간을 덜 차지하고 더 빠르게로드합니다. PNG, JPEG 및 GIF 애니메이션을 처리합니다.

ImageOptim은 다양한 최적화 도구를위한 GUI를 제공합니다. AdvPNG AdvanceCOMP의 OptiPNG , PngCrush , JpegOptim , libjpeg의 jpegtran, Gifsicle 및 선택적으로 PNGOUT .

웹에 이미지를 게시하는 데 탁월하며 (Photoshop에서 "웹용으로 저장된 이미지"를 쉽게 축소 할 수 있음) Mac 및 iPhone 응용 프로그램을 더 작게 만드는 데 유용합니다.

케이크 조각. 이미지 (또는 이미지 폴더)를 창으로 드래그하면 압축 구성을 조정하고 불필요한 메타 데이터 및 색상 프로파일 정보 (어쨌든 널리 지원되지 않는)를 제거하는 이러한 모든 도구를 통해 실행됩니다. 저장하기 전에 색상 프로파일을 수정해야합니다. 저장 및 포함하지 않음).

이 인용문에 링크 된 모든 도구에는 PNGOUT을 제외한 Windows/Linux/Mac 버전이 있지만 고맙게도 누군가가 OS X와 ​​Linux로 PNGOUT 을 포팅했습니다. ImageOptim을 사용하기로 선택한 경우 .app에 PNGOUT을 제외한 모든 항목이 포함되므로 PNGOUT 포트를 잡고/usr/local/bin (또는 어디에나)에 놓고 ImageOptim의 위치를 ​​알려주십시오.

Photoshop의 "웹 및 장치 용으로 저장"을 통해 저장 한 후에도 파일 크기가 30 % 이상 떨어지는 것을 볼 수 있습니다 (특히 PNG 이미지의 경우).

팁 : 최적화를 실행 한 후 왼쪽의 아이콘 열을 기준으로 정렬하고 더 이상 축소되지 않은 (X) 아이콘이있는 모든 행을 선택하십시오. 목록에서 이미지를 제거하고 확인 표시 아이콘이있는 모든 이미지에서 다시 실행하십시오. 나는 여전히 파일 크기를 잃는 이미지를 가질 것이라고 약속 할 수 있습니다. 모든 (X) 아이콘이 표시 될 때까지 정렬, 선택, 제거, 재실행을 반복하고 하루에 호출하십시오.

14
Bryson

Photoshop에서 사진을 저장할 때 File > Save for Web and Devices를 사용하는 것이 좋습니다. 압축 수준으로 재생하고 시각적 결과를 실시간으로 볼 수 있습니다. 사진에서는 일반적으로 레벨 8보다 낮게 저장하고 여전히 좋은 결과를 얻을 수 있습니다. alt text

10
jessegavin

Yahoo의 Smush.it 를 확인하십시오. 나는 그것이 잘 작동한다는 것을 알았습니다.

4
Travis Northcutt

PNG 이미지의 경우 컬러 맵의 색상 수를 줄이고 인덱스 PNG로 저장할 수 있습니다. 예를 들어 128x128 픽셀 (압축되지 않은)의 로고를 생각해보십시오. 실제로 사용하는 16 가지 색상 만 있다고 상상해보십시오.

  • PNG-32, 픽셀 당 4 바이트-65KB
  • PNG-8, 픽셀 당 1 바이트-16kB
  • PNG-4, 픽셀 당 4 비트-8KB

이미지의 품질을 낮추지 않고 (특정 종류의 이미지에만 적용) 크기를 크게 줄일 수 있습니다.

단추 및 사이트 아이콘의 경우 하나의 이미지로 집계하고 CSS 또는 JavaScript를 사용하여 표시 (스프라이트)를 제어 할 수도 있습니다. 이렇게하면 각 이미지에 대한 HTTP 요청 수가 줄어 듭니다.

4
dmsnell

다른 형식을 사용해보십시오.

  • 알파 및/또는 그림자가있는 사진 용 PNG
  • 작은 색상 표 (흑백 또는 노란색 아이콘 등)가있는 이미지의 경우 GIF
3
Aaron

기본적으로 이미지를 다른 형식으로 저장 한 다음 파일 크기를 확인하십시오.

JPEG를 사용하는 경우 Paint.net과 같은 그래픽 편집기에서 이미지 품질을 위아래로 조정할 수 있어야합니다. 이미지의 50 % 품질은 일반적으로 웹에 충분하며 이미지를 훨씬 작게 만듭니다.

PNG를 사용하면이 작업을 수행 할 수 없지만 때로는 PNG가 JPEG보다 훨씬 크고 때로는 작습니다. PNG는 흑백 선 그림과 같은 흑백 이미지의 경우 훨씬 작습니다.

요즘의 조언은 CSS 스프라이트를 사용하여 요청을 줄여로드 시간을 단축하는 것이지만 실제로 얻는 이미지 크기를 살펴 봐야합니다. 예를 들어 여러 흑백 PNG를 색상으로 결합하는 경우 CSS Sprite 이미지가 구성 요소 이미지보다 훨씬 클 수 있습니다.

2
delete

또한 모든 EXIF ​​데이터를 제거해야합니다. 거의 모든 것이 웹 사용자와 관련이 없으며, Canon 5D를 사용하여 사진을 찍었고 실제로 사용했음을 알아야합니다. F-Stop 2.8, 0.5 초 노출, ISO 160, 노출 바이어스 없음, 초점 거리 9mm?

이 메타 데이터는 모두 이미지에 가중치를 추가하므로 일반적으로 제거해야합니다.

jessegavin 이 지적한 것처럼, 대부분의 이미지 앱은 압축 효과의 미리보기를 보여줍니다. "8"의 담요 설정이 거의 최상의 트레이드 오프를 제공하지 않으므로이를 사용하십시오.

마지막으로 Google Page Speed Firefox/ Firebug 플러그인을 사용하면 이미지 크기를 얼마나 줄일 수 있는지에 대한 좋은 아이디어를 얻을 수 있습니다 (작은 버전을보고 저장하는 것을 포함). .

2
1
adamcodes

원하는 품질 수준을 유지하면서 이미지의 크기를 가능한 작게 유지하기 위해 다른 제안을 모두 수행 한 후에는 최소한의 HTTP 헤더로 이미지를 제공하도록 웹 사이트를 구성하고 제공하는 헤더를 사용하면 프록시 서버와 웹 브라우저를 캐싱하여 이미지를 적절하게 저장할 수 있습니다.

요청 크기를 줄이려면 웹 서버가 X-Powered-By와 같은 쓸모없는 헤더를 보내지 않도록 구성되어 있는지 확인하십시오. 또한 쿠키를 설정하지 않은 호스트의 이미지, CSS 및 기타 정적 구성 요소 (예 : static.example.com)를 제공해야합니다.

정적 이미지의 경우 Expires 헤더를 먼 미래의 날짜로 설정하십시오. 이를 통해 웹 브라우저와 중간에있는 모든 캐싱 프록시가 가능한 한 오랫동안 이미지를 유지할 수 있습니다. 이것의 유일한 단점은 다른 이미지를 표시하려면 다른 파일 이름을 사용하고 대신 해당 파일에 링크해야한다는 것입니다. 파일 이름의 버전 번호 (예 : myimage_1.png 또는 /images/3/logo.png)는 효과적인 방법입니다. 정적이 아닌 페이지의 경우 현실적인 Expires 헤더 (액세스 + X 시간)를 설정하고 이전에 파일을 다운로드 한 브라우저가 빠르게 테스트 할 수 있도록 Last-Modified 헤더 또는 eTag 헤더 (둘다는 아님)를 설정하십시오 전체 이미지를 풀다운하는 대신 헤더를 비교하여 현재 버전이 있는지 여부.

이러한 기술에 대해 설명 할 수있는 많은 자료가 있지만 Yahoo는 한곳에서 콘텐츠 전송 성능 향상 에 대한 여러 가지 팁을 제공하는 훌륭한 작업을 수행했습니다.

1
JasonBirch