고성능 WEB 개발 이미지 압축 편

1.그림 크기 를 줄 이 는 것 은 그림 이 많 을 때 그림 크기 를 줄 이 는 것 이 다운로드 속 도 를 높이 는 가장 직접적인 방법 이다.1.GIF(비 애니메이션 이미지)대신 PNG 8 을 사용 합 니 다.PNG 8 은 효과 가 같은 경우 GIF 보다 그림 크기 가 작 기 때 문 입 니 다.2.fireworks 로 PNG 그림 을 처리 합 니 다.우리 제품 에서 많은 PNG 그림 은 미술 관 이 직접 포 토 샵 으로 내 보 낸 것 입 니 다.나중에 미술 관 에 게 fireworks 로 PNG 를 처리 하 게 합 니 다.처리 후 100 K 의 그림 크기 는 기본적으로 3/4 감소 하 였 으 나 그림 의 질 도 약간 떨 어 질 수 있 으 므 로 자신 이 받 아들 일 수 있 는 지 를 봐 야 한다.3.Smush.it 사용(http://www.smushit.com/ysmush.it/)압축 사진,Smush.it 는 YUI 팀 이 온라인 압축 사진 을 만 드 는 사이트 이다.이 사 이 트 는 원래 사진 의 질 에 영향 을 주지 않 고 이미지 의 메타 데 이 터 를 제거 하기 때문에 안심 하고 이 사 이 트 를 이용 하여 압축 할 수 있 지만 이 압축 비율 도 비교적 제한 적 이다.2.그림 과 분할 그림 1.CSS Sprites 가 그림 을 합 쳐 요청 수 를 줄 여 성능 을 향상 시 키 는 것 은 모두 가 알 고 있 습 니 다.그러나 그림 을 너무 많이 합치 지 마 세 요.너무 많 고 너무 크 면 이 그림 때문에 이 페이지 의 표시 에 영향 을 줄 수 있 습 니 다.2.가끔 우 리 는 큰 그림 1 개 를 여러 개의 작은 그림 으로 나 누 어야 한다.예 를 들 어 제품 의 첫 페이지 사진 이 비교적 적 고 큰 배 너 그림 1 개 만 있어 야 한다.브 라 우 저 는 모두 사진 을 동시에 다운로드 할 수 있 기 때문에 나 누 지 않 고 큰 그림 1 개 만 사용 하면 다운로드 속도 가 오히려 느 릴 수 있다.3.투명 이미지 처리 IE6 는 투명 한 PNG 그림 을 표시 하지 못 한다.많은 개발 자 들 이 골 치 아 픈 일이 다.몇 가지 방식 의 장단 점 을 소개 한다.1.AlphaImageLoader,IE6 지원 filter 를 사용 하고 아래 의 CSS 코드 를 사용 하면 IE6 지원 PNG

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

의 장점:간단 한 단점 을 사용 할 수 있 습 니 다.성능 손실 이 매우 크 고 AlphaImageLoader 는 투명 한 그림 을 처리 하 는 데 많은 자원 을 사용 합 니 다.AlphaImageLoader 를 사용 하면 IE 사용 내 저장 이 빠르게 증가 합 니 다.또한 알파 이미지 로 더 는 모든 처리 가 같은 스 레 드 에서 동기 화 되 기 때문에 알파 이미지 로 더 가 많 을 때 UI 렌 더 링 을 막 습 니 다.사용filter,IE7 도 식별 할 수 있 으 며,사실 IE7 은 PNG 투명 이미 지 를 식별 할 수 있 으 며,IE7 에서 위 코드 를 사용 하면 IE7 은 그림 을 직접 사용 하지 않 고 AlphaImageLoader 를 사용한다.주:개인 적 으로 AlphaImageLoader 2.JS 처 리 는 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 > head > style type ="text/css" > v\:* { behavior : url(#default#VML) ; } span style="color: rgb(128, 0, 0);">style > span style="color: 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 배경 그림 캐 시 는 번 거 로 운 일 입 니 다.많은 사람들 이 IE6 캐 시 배경 그림 try{document.execCommand("Background ImageCache",false,true)를 아래 JS 로 사용 하 는 것 을 알 고 있 습 니 다.}catch(e){}그러나 이렇게 하 는 효 과 는 그리 좋 지 않 습 니 다.마우스 이동 으로 배경 그림 을 바 꿀 때 IE6 는 항상 그림 요청(이 배경 그림 이 다운로드 되 었 음 에 도 불구 하고)을 보 냅 니 다.결 과 는 304 이지 만 시간 이 많이 걸 립 니 다.이 경우 다음 1 개의 변 칙 적 인 방식 으로 처리 할 수 있 으 며,페이지 에 서 는 1 개의 DIV 요 소 를 사용 하여 이 그림 을 불 러 오 면 그림 을 불 러 오 면 캐 시 되 고,마우스 이동 도 요청 을 보 내지 않 습 니 다.6.미리 불 러 온 그림 은 아래 코드 를 사용 하여 페이지 에 불 러 온 다음 페이지 의 그림 을 미리 불 러 올 수 있 습 니 다.다음 페이지 에 들 어가 면 그림 을 다운로드 하지 않 아 도 됩 니 다.

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