이미지 , 로딩 속도 높이 는 방법 10 가지 1 . 이미지 는 반드시 size 를 지정 한다 . 이미지 의 WIDTH 와 HEIGHT 를 입력 하 여 주 면 로딩 속도 가 빨라집니다 . 이미지 삽 입시 test . gif ( width = 100 , height = 50 크기 ) 라는 이미지 를 올린다면 이 와 같이 이미지 의 폭 과 높이 를 모두 넣 어 주 는 것 이 로딩 에 도움 을 줍니다 . 2 . 배경 이미지 를 고정 시키 기 대부분 같 은 배경 이미지 가 홈페이지 전체 에 이어지 는 경우 가 많 습니다 . 이것 이 통일 성 도 있 고 혼란 을 줄이 는 방법 이 되 기 도 하 기 때문 입니다 . 이럴 때 다음 태그 를 삽입 시켜 주 시 면 , 배경 이미지 가 로딩 되 는 시간 을 절약 합니다 . 3 . 캐시 메모리 에 다음 페이지 의 이미지 를 미리 받 습니다 . 다음 페이지 로 연결 되 는 페이지 라면 다음 페이지 의 이미지 를 미리 받 아 캐시 메모리 에 저장 시켜 두 는 것 이 다음 페이지 의 로딩 속도 를 빠르 게 합니다 . 예 를 들 어 다음 페이지 에 test . gif 라는 큰 이미지 가 있 다면 앞 페이지 의 하단 에 다음 태그 를 넣 습니다 . ( 앞 페이지 를 보 는 동안 뒷 페이지 이미지 를 받 음 ) 이 와 같이 가로 세로 를 1 픽셀 로 잡 아 미리 받 아 놓 으면 캐시 메모리 에 이미지 가 저장 되 어 다음 페이지 로딩 시 에 빠르 게 이미지 를 받 게 됩니다 . 그리고 width 와 height 를 1 로 잡 았 기 때문 에 현재 페이지 의 스크린 에 는 보이 지 않 습니다 . 4 . 이미지 의 숫자 는 4 개 이하 로 줄입니다 . 대부분 의 웹 서버 는 문서 를 불러올 때 동시 에 네 개 의 GIF 파일 을 호출 합니다 . 따라서 이미지 숫자 가 세 개 인 것 과 네 개 인 것 에 는 로딩 속도 에 큰 차이 가 없 지만 네 개 와 다섯 개 는 속도 의 차이 가 매우 큽니다 . 이미지 숫자 가 다섯 개 이상 이 되 면 로딩 이 훨씬 느려 집니다 . 야후 와 같 은 검색 엔진 에서 는 절대 한 페이지 에 이미지 를 네 개 이상 의 이미지 를 쓰 지 않 는다고 합니다 . 한 페이지 에 는 네 개 이하 의 이미지 를 사용 합시다 . 5 . 이미지 다이어트 하 기 . 페이지 에 커다란 이미지 가 하나 있 을 경우 에 는 4 개 로 자르 면 훨씬 로딩 속도 가 빨라집니다 . 물론 훨씬 로딩 이 빨라집니다 . 이미지 를 조각 내 서 올린 후 웹 상 에서 붙여 지 도록 합니다 . 해상도 가 중요 한 경우 가 아니 라면 이미지 를 작 게 만든 후 에 웹 상 에서 이미지 사이즈 를 지정 하 여 확대 시키 는 방법 도 생각 할 수 있 습니다 . 이미지 의 질 을 손상 시키 지 않 는 범위 에서 jpg 보 다는 gif 를 쓰 며 색 의 종류 도 불 필요 하 게 많이 쓰 지 맙 시 다 . 또 이미지 의 색상 을 줄이 면 이미지 용량 이 줄어듭니다 . 따라서 불 필요 한 색 을 없애 고 투명 이미지 를 적극 활용 해 봅시다 . 6 . 반복 적 인 이미지 의 사용 동일 한 이미지 를 여러 차례 사용 하 는 경우 매번 새로 이미지 를 불러들이 지 않 게 해야 합니다 . 서로 다른 페이지 에서 라도 동일 한 그림 을 쓸 경우 새로 로딩 을 받 지 않 고 캐 쉬 에 저장 된 이미지 를 불러들여 사용 합니다 . 물론 이렇게 되 면 속도 가 훨씬 빨라집니다 . 이렇게 하 기 위해서 는 여러 차례 사용 되 는 이미지 는 특정 한 폴더 에 넣 고 계속 같 은 폴더 에 링크 시켜 사용 해야 합니다 . 7 . 적절 한 테이블 의 사용 이미지 를 가능 하 면 줄이 고 테이블 을 이용 함 으로써 깔끔 하 고 산뜻 한 효과 를 볼 수 있 습니다 . 표 나 셀 의 테두리 선 속성 , 바탕색 속성 등 을 이용 하 여 html 문서 만 으로 도 충분히 깔끔 한 페이지 를 작성 할 수 있 습니다 . 테이블 사용 은 이미지 화일 에 비해서 는 훨씬 빠르 지만 로딩 을 느리 게 하 는 원인 이 되 기 도 하 는 데 지나치 게 복잡 한 테이블 은 자제 하 는 것 이 좋 겠 습니다 . 또 세로 로 길 게 이어지 는 테이블 보다 는 가로 로 긴 테이블 이 훨씬 로딩 이 빠릅니다 . 태그 가 훨씬 절약 되 고 브라우저 가 읽 기 쉬워 집니다 . 8 . 특수 문자 활용 하 기 특수 문자 를 잘 활용 하 면 이미지 못지 않 은 효과 를 줄 수 있 습니다 . ▲ ☆ ▩ ♣ ☞ ◈ 9 . 자바 애플릿 만 은 신중 하 게 아무리 잘 만든 자바 애플릿 이 라고 하 더라도 애플릿 은 속도 가 느 립니 다 . 더구나 중간 에 중단 도 안 되 고 , 잦 은 에러 를 유발 합니다 . 이러 한 사이트 는 절대 다시 안 옵니다 . 10 . 그 외 다른 방법 들 1 ) 섬네일 이미지 사용 큰 사진 같 은 걸 올릴 땐 섬네일 이미지 ( 작 은 이미지 를 먼저 보여 주 고 원 하 면 클릭 해서 큰 사진 을 보여 주 는 ) 를 사용 하 는 것 이 에티켓 이 라고 합니다 . 2 ) CGI 선택 시 속도 를 고려 CGI 는 애플릿 과 더불 어 인터 네 속도 를 잠식 하 는 주범 중 의 하나 입니다 . CGI 선택 시 속도 를 살펴보 고 제대로 프로그래밍 된 것 을 선택 하 는 것 도 훌륭 한 생각 일 것 입니다 . 3 ) Save For Web 포토샵 5 . 5 에서 는 이미지 저장 시 Save For Web 으로 색상 수 를 줄여 저장 하 면 이미지 용량 이 줄어듭니다 . 여호 와 는 나 와 함께 http : / / cafe . daum . net / following 공유 하 기 글 요소