애플 웹 사이트 이미지 압축

Ok 나는이 주제에 대해 전체 인터넷처럼 검색했지만 전혀 찾을 수 없었으며 아마도 이것이 그런 질문을 할 수있는 적절한 장소라고 생각했습니다. 나는 최근에 사과 아이폰 사이트를 방문하고 있었고 거기에는 고해상도의 이미지가 많이 있습니다. 그러나 실제로로드하는 MB를 확인하기 위해 사이트를 스캔 할 때 나는 기절했습니다! 이 모든 이미지는 믿을 수 없을 정도로 1.4MB 만 구성했습니다. 예를 들어 Apple 웹 사이트에서이 그림을보십시오.

http://images.apple.com/v/iphone/home/r/home/images/iphone_workshops_6s_xlarge.jpg

이 고해상도 이미지는 182 KB입니다. JPEG를 저장할 때 Photoshop에서 이러한 결과를 얻을 수 없습니다. 나는 세부 사항이 약간 얼룩 져 있음을 분명히 알 수 있으므로 이것이 정상적인 방법으로 편집되지 않았다고 생각합니다.

누군가 압축에 대한 설명과 어쩌면 그러한 작은 크기를 얻는 방법에 대한 자습서가 있습니까? 나는 웹 개발자이며 일반적으로 1920 x 400 또는 이와 비슷한 이미지 크기를 사용하는 슬라이드 쇼가있는 웹 사이트를 만들 때 500-800 KB 미만의 이미지는 절대 얻지 못합니다.

전체 이미지 압축 설명이 StackOverflow에 더 적합 할 수 있지만 Apple과 관련이 있으므로 여기에 개요를 제공합니다.

이미지 자체는 실제로 파일 크기를 어느 정도 결정합니다. 이를 통해 많은 겉보기 품질을 잃지 않고 일부 이미지를 다른 이미지보다 압축 할 수 있습니다. 예를 들어 JPEG 이미지 압축 알고리즘은 빨강을 제대로 처리하지 않습니다. 따라서 빨간색이 더 많은 사진이 있으면 차이를 느끼지 않기 위해 JPEG 품질을 더 높게 유지해야합니다. 파일 크기에 영향을 줄 수있는 다른 이미지 압축 형식의 다른 단점도 있습니다.

두 번째는 파일을 저장하는 방법입니다. Photoshop에는 이미지 저장 품질을보다 세밀하게 제어 할 수있는 웹 저장 기능이 있습니다. 원본의 품질 비율을 조정하고 사진에 미치는 영향을 즉시 확인할 수 있습니다. 한 제안자는 이미지 품질이 58 %라는 것을 알았습니다. 그렇다고 원래 파일 크기의 58 %가 아니라 알고리즘과 관련된 숫자입니다. 사진 원본 크기의 58 % 미만일 수 있습니다. 웹용 저장을 사용하여 사진을 Photoshop에 저장 한 다음 JPEG 형식으로 설정하고 품질을 58 %로 설정하면 설명 된 내용을 쉽게 확인할 수 있습니다.

사진이 저장된 후에도 수행 할 수있는 또 다른 압축 수준이 있습니다. 실제로 둘 이상의 압축이 있습니다. 아마도 가장 간단한 방법은 이미지 압축기를 통해 실행하는 것입니다. 거기에는 많은 것들이 있으며 생각 나는 단 하나의 독립형 앱은 JPEG-Mini입니다. 일부 경우 파일 크기를 크게 줄일 수 있습니다 (모두는 아니지만). 크기를 더 줄 이도록 gzip으로 압축 된 이미지 버전을 제공하도록 서버를 구성 할 수도 있습니다. (이미지 요청 / 응답에 대한 헤더를보고 사진이 압축되었는지 확인할 수 있습니다.)

이미지 압축은 매우 중요하지만 불행히도 너무 자주 간과 됩니다 . 개발자가 이미지 크기를 줄이기 위해 할 수있는 일을 수행하여 모든 사용자가 더 빠른로드 시간을 누릴 수 있다는 것을 보여주는 사이트에 감사합니다. 이 주제에서는 반응 형 이미지가 빠르게 지원되고 있으며 브라우저가보다 구체적인 콘텐츠를 제공함에 따라 더 나은 UX를 제공 할 것입니다.