고성능 WEB 개발 이미지 압축

1. 이미지 크기 줄이기

이미지가 많은 경우, 이미지 크기를 줄이는 것이 다운로드 속도를 높이는 가장 직접적인 방법입니다.
1. GIF(애니메이션이 아닌 이미지) 대신 PNG8을 사용하세요. PNG8은 효과는 동일하지만 이미지 크기가 GIF보다 작기 때문입니다.

2. Fireworks를 사용하여 PNG 이미지를 처리합니다. 당사 제품에 포함된 많은 PNG 이미지는 아티스트가 Photoshop을 사용하여 직접 내보냅니다.
나중에 아티스트에게 Fireworks를 사용하여 PNG 처리를 요청했습니다(대략적인 방법은 PNG8로 저장하고 배경색을 삭제하는 방법을 선택하는 것입니다).
처리 후 100K 이미지의 크기는 기본적으로 3/4로 줄어들지만, 이미지 품질도 약간씩 줄어들게 되는데, 이는 수용 가능 여부에 따라 다릅니다.

3. Smush.it(http://www.smushit.com/ysmush.it/)을 사용하여 이미지를 압축하세요. Smush.it은 YUI 팀이 만든 온라인 이미지 압축 웹사이트입니다.
이 웹사이트는 원본 이미지의 품질에 영향을 주지 않고 이미지에서 일부 메타데이터를 제거하므로 압축 시에도 이 웹사이트를 안전하게 사용할 수 있습니다.
그러나 이 압축 비율도 상대적으로 제한되어 있습니다.


2. 이미지 병합 및 분할

1. Sprite가 이미지를 결합하여 요청 수를 줄이고 성능을 향상시킨다는 것은 누구나 알고 있습니다. 하지만 너무 많은 사진을 병합하지 마세요. 너무 크면 이 사진 하나로 인해
가 이 페이지 표시에 영향을 미치게 됩니다.

2. 큰 사진을 여러 개의 작은 사진으로 분할해야 하는 경우가 있습니다. 예를 들어 제품 홈페이지에 사진이 거의 없고 큰 배너 사진이 하나만 있는 경우가 있습니다.
브라우저에서는 이미지를 동시에 다운로드할 수 있기 때문에 분할하지 않고 큰 이미지 하나만 사용할 경우 다운로드 속도가 느려집니다.


3. 투명한 이미지 처리

IE6에서는 많은 개발자에게 골치 아픈 PNG 이미지를 표시할 수 없습니다. 아래에서는 여러 가지 방법의 장점과 단점을 소개합니다.

1. AlphaImageLoader를 사용하세요. IE6은 필터를 지원합니다. 다음 CSS 코드를 사용하여 IE6이 PNG를 지원하도록 만드세요.

#some-element { 
background: url(image.png); 
_background: none; 
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', 
sizingMethod='crop'); 
}

장점: 사용하기 쉽습니다.
단점: 성능 손실이 큽니다. AlphaImageLoader는 투명한 이미지를 처리하기 위해 많은 리소스를 소비합니다. AlphaImageLoader를 사용하면 IE의 메모리 사용량이 급격히 증가합니다.
또한 AlphaImageLoader의 모든 처리는 동일한 스레드에서 동기적으로 수행되므로 AlphaImageLoader가 너무 많으면 UI 렌더링이 차단됩니다.
_filter를 사용하면 IE7에서도 이를 인식할 수 있습니다. 실제로 IE7에서는 PNG 투명 이미지를 인식할 수 있습니다. IE7에서 위 코드를 사용하면 IE7에서는 이미지를 직접 사용하지 않고 AlphaImageLoader를 사용합니다.
참고: 개인적으로는 AlphaImageLoader를 최대한 사용하지 않는 것이 좋습니다.

2.
DD_belatedPNG(http://www.dillerdesign.com/experiment/DD_belatedPNG/)를 사용하면 인터페이스의 모든 투명 이미지를 동일한 방식으로 쉽게 처리할 수 있습니다.
장점: 사용이 간편함(AlphaImageLoader보다 간단함)
단점: 페이지에 처리할 사진이 많으면 속도가 상대적으로 느리고 사진을 동적으로 변경할 수 없습니다.

3. VML
IE6은 VML을 지원하고 VML은 투명 이미지를 사용할 수 있으며 코드는 다음과 같습니다.
html 코드 헤더 수정
html xmlns ="http://www.w3.org/1999/xhtml" xmlns:v >
헤드
스타일 유형 ="text/css" >
v:* { 동작: url(#default#VML) }
span 스타일="색상: rgb(128, 0, 0);">스타일 >
스팬 스타일="색상: rgb(128, 0, 0);">head >
body >
v:image src ="image.png" />
span style="color: rgb(128, 0, 0);">body >
span style="color: rgb(128, 0, 0);">html >


장점: 우수한 성능, 빠른 속도
단점: 사용이 복잡하고 Firefox와 같은 브라우저를 지원하지 않습니다. 브라우저마다 다른 HTML 코드가 출력되는지 확인해야 합니다.

4. 여러 도메인 이름에서 사진 다운로드

각 브라우저는 동시에 동일한 도메인 이름으로 고정된 요청만 보낼 수 있기 때문에 예를 들어 IE6에는 2개가 있는 것으로 보이므로 여러 도메인 이름을 열어 이미지 리소스를 요청할 수 있습니다.
예: img1.abc.com, img2.abc.com. 하지만 도메인 이름을 너무 많이 열지 마십시오. 도메인 이름을 확인하고 새 연결을 여는 데 시간이 걸리기 때문입니다. 도메인 이름이 너무 많으면 속도가 느려질 수 있습니다. 일반적으로 도메인 이름은 2~4개면 충분합니다.

5. IE6에서 배경 이미지 캐싱

IE6 배경 이미지 캐싱은 골치 아픈 일입니다. 다음 JS를 사용하여 IE6 배경 이미지를 캐시하도록 하는 방법을
시도해 보세요.
document.execCommand("BackgroundImageCache", false, true)
}catch(e){}
그러나 이 효과는 그리 좋지 않습니다. 마우스 움직임으로 배경 이미지가 변경되면 IE6에서는 항상 이미지 요청을 보냅니다(배경 이미지가 다운로드되었더라도).
반환 결과가 304인데도 시간이 많이 걸립니다. 이 경우 다음 해결 방법을 사용할 수 있습니다.
페이지에서 직접 DIV 요소를 사용하여 이미지를 로드하면 로드된 이미지가 실제로 캐시될 수 있고 마우스가 움직일 때 요청이 전송되지 않습니다.

6. 이미지 미리 로드

페이지가 로드된 후 다음 페이지의 이미지를 미리 로드하려면 다음 코드를 사용하세요.

window.onload=function(){ 
var img = new Image(); 
img.src = "images/image.png"; 
img = null; 
};

위 내용은 이미지 압축 및 WEB 개발에 관한 내용입니다. 더 많은 관련 글은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!