이미지 압축이 웹사이트의 로드 시간을 향상시키는 방법

디자인, 개발, 네트워크 아키텍처 및 최종 연결 사용자의 속도를 포함한 여러 요소가 웹 사이트 로드 속도를 결정합니다. 이들 중 많은 것, 특히 마지막 것들은 당신이 통제할 수 없을 것입니다.

올해 초 개설한 홈페이지를 재방문했을 때 홈페이지 파일 크기가 1.7MB가 넘는 것을 확인했다. 웹 페이지의 경우 이는 터무니없이 크지만 유감스럽게도 빈번한 파일 크기입니다. 우리는 최근의 또 다른 고급 이니셔티브인 거대한 그래픽 페이지 배너로 유사한 문제를 겪었습니다. 느린 연결이나 셀 네트워크를 사용하는 개인이 사이트를 방문하는 것은 매우 어렵습니다. 작은 장치에서 멋지게 보이는 반응형의 유동적인 사이트를 만드는 모든 작업은 사용자가 페이지 로드를 완료하기 전에 페이지를 버린다면 아무 소용이 없습니다.

작은 이미지로 인해 인터넷 속도가 느린 사용자가 웹사이트를 쉽게 탐색할 수 있습니다.

우리가 책상에 앉아 웹 사이트를 계획, 구축 또는 관리할 때 귀하나 나에게 직접적인 영향을 미치는 문제는 아닐지라도 우리가 사이트를 사용하는 상황이 사이트를 사용하는 사람들의 상황과 항상 일치하지는 않는다는 점을 명심해야 합니다. 도시와 전 세계의 많은 사람들이 집에서 인터넷에 액세스할 수 없으며 온라인에 접속하려면 열악한 모바일 연결에 의존해야 합니다. 의심할 여지 없이 많은 모바일 사용자가 고속 인터넷을 사용합니다. 커피숍, 도서관, 공항과 같은 품질이 좋지 않은 공용 Wi-Fi를 통해 사이트를 로드하려는 사람들은 어떻습니까?

이미지 압축은 페이지 성능을 논의할 때 고려해야 할 유일한 요소가 아닙니다. 로드 시간을 단축하기 위해 다른 많은 작업을 수행할 수 있습니다.

이미지 압축은 웹 사이트의 로드 시간을 개선할 수 있습니다.

웹 페이지는 대부분 무작위로 로드된 투명한 PNG 파일로 구성되어 있었는데, 특히 그 중 하나는 1.6MB였습니다. 이미지 파일의 크기를 크게 줄일 수 있는 무료 웹 기반 사진 압축 프로그램이 있습니다. 이미지 품질에서 식별할 수 있는 최소한의 차이로 1.6MB 이미지가 230K로 줄어들 수 있습니다. 이로 인해 로드 시간이 약 85% 단축되었습니다.

이미지 압축 콘텐츠 마이그레이션/입력 주기의 일부로 사용 중인 콘텐츠 관리 시스템에 업로드하기 전에 불행히도 비즈니스 CMS를 포함한 대부분의 CMS에는 이미지 압축 기능이 없습니다. Photoshop은 Save for Web 압축 설정에도 불구하고 더 나은 압축 프로그램과 동일한 압축 수준을 달성하지 못했습니다.

페이지가 약 200 또는 300K이면 훌륭합니다. 그래픽 집약적인 페이지를 600K 미만으로 유지할 수 있다면 이를 목표로 해야 합니다. 매직 넘버가 없으므로 페이지 크기를 가능한 작게 유지하십시오. 사진이 이전에 압축된 경우 너무 많은 이미지 파일을 로드한 것일 수 있습니다. 페이지에 대한 성능 예산을 설정하는 것은 이 개념을 실행에 옮기는 훌륭한 접근 방식입니다. 페이지 무게에 대한 목표 목표를 지정하고 예산을 설정하여 제한할 수 있습니다.

• CSS 스프라이트 사용

CSS 스프라이트 접근 방식은 여러 그림을 단일 이미지로 병합하여 페이지 속도를 개선하고 HTTP 요청을 저장합니다. 이는 페이지의 아이콘, 로고 및 기타 시각적 요소에 여러 번 유용합니다. 이 방법에 대한 자세한 내용은 "CSS 스프라이트가 속도와 지속 가능성을 향상시키는 방법"을 참조하십시오.

• 올바른 파일 형식 선택

이미지를 생성하고 저장하면 압축을 거쳐 파일 크기가 줄어듭니다. 파일 형식에 따라 파일 크기를 줄이는 방법도 달라집니다. 주어진 이미지에 적합한 파일 형식을 선택하면 일반적으로 파일 크기가 작아집니다.

• 음영이 많은 이미지와 일러스트레이션의 경우 JPEG를 사용하십시오. 라인 아트, 그래픽 및 텍스트에 GIF 또는 SVG를 사용하십시오. 장애가 있는 개인을 위한 스크린 리더와 같은 사이트 스파이더 및 보조 장비는 이미지에 포함된 유형을 볼 수 없다는 점에 유의하십시오. 장식용으로만 이러한 방식으로 유형을 사용하십시오.

• PNG는 회사 로고와 같이 JPG의 일부 선명도를 유지하면서 부분적인 투명도가 필요한 이미지에 가장 적합한 파일 유형인 경우가 많습니다.

• Photoshop에서 이미지 품질 실험.

아래 예에서는 Climate Ride에서 바이커를 촬영하기 위해 JPEG 파일 형식을 선택했습니다. 이미지의 파일 형식을 선택한 후 JPEG 품질을 변경할 수 있습니다. 좋아 보이는 올바른 파일 형식의 가장 짧은 파일 크기를 찾고 있습니다.

해상도와 함께 다른 유형의 변형을 사용하고 이미지를 매력적으로 만들 수 있습니다.