웹 이미지와 그 솔루션을 처리할 때 가장 흔히 저지르는 10가지 실수

웹페이지 이미지 처리 시 가장 흔히 저지르는 10가지 실수와 해결 방법

이미지는 현대 웹사이트 개발에서 가장 중요한 부분입니다. 현재 통계에 따르면 이미지는 전체 웹사이트 대역폭의 60%를 차지합니다. 이는 최첨단 웹사이트 디자인을 다룰 때 더욱 분명해집니다. 핀 모양의 레이아웃을 사용하는 이미지가 풍부한 소셜 네트워크에서 이 수치는 최대 85%에 이릅니다.

안타깝게도 대역폭이 비쌉니다. 트래픽이 많은 웹 사이트의 경우 대역폭이 IT 프로그래머 비용을 담당할 가능성이 높으며 웹 호스팅 및 스토리지 비용을 쉽게 초과합니다. 게다가 이렇게 많은 트래픽이 발생하면 시간이 걸리기 때문에 방문자는 사이트를 탐색할 때 이미지가 로드되기를 기다리는 데 오랜 시간을 소비할 가능성이 높습니다.

우리가 매일 직면하는 몇 가지 문제와 이를 해결할 수 있는 방법(및 해결해야 하는 방법)을 나열했습니다.

1. 브라우저 측에서 이미지 크기 조정의 고급스러움

우리는 개발자가 사용하는 지름길은 서버 측이 아닌 브라우저 측에서 이미지 크기 조정을 사용하는 것임을 종종 목격합니다. 이미지 크기가 맞습니다.

웹사이트에 특정 크기의 썸네일이 여러 개 있고 그래픽 디자인이 변경되는 경우가 많습니다. 새로운 그래픽 디자인에서는 썸네일 크기를 약간 더 작게 변경해야 합니다. 우리 개발자들은 때론 무심코 때론 고의적으로 원본의 큰 사이즈 이미지를 사용하고, 브라우저에 맞게 이미지의 CSS 높이와 너비만 조정해 이미지가 썸네일처럼 보이도록 하고 있습니다.

최신 브라우저에서는, 최종 결과는 동일해 보이지만 이미지를 로드하는 데 걸리는 블록 수가 다릅니다. 웹 사이트에서 불필요한 이미지를 로드하는 데 귀중한 시간을 낭비하고 있으며 이를 전송하는 데 추가 대역폭을 낭비하게 됩니다. 이미지 크기 조정 알고리즘 효율성이 평균보다 낮기 때문에 구형 브라우저에서 더 두드러집니다.

이 문제는 생각보다 더 흔하며, 예를 들어 우리가 매일 방문하는 많은 웹사이트에서 발견할 수 있습니다. , Yahoo의 첫 페이지를 방문하면 여기의 "인기" 뉴스가 모든 썸네일 픽셀을 로드한다는 것을 알 수 있습니다. 두 픽셀 모두 보이는 크기의 두 배입니다.

수정 방법: 개발자/디자이너의 경우 – 게시하려는 이미지가 웹 사이트 크기에 완벽하게 맞습니다. 동일한 이미지라도 다른 크기의 축소판을 사용하여 동일한 대형 이미지를 사용하는 대신 다양한 크기의 축소판을 만드는 것이 좋습니다.

2. 불필요한 고품질 JPEG 이미지

JPEG 이미지는 수년 동안 웹에 진정한 혁명을 일으켰습니다. 개발자는 다른 어떤 경쟁업체보다 더 많은 비용을 절감할 수 있습니다.

그러나 개발자와 그래픽 디자이너는 실제로 이미지의 JPEG 압축을 시도하지 않는 것을 계속해서 보고 있습니다. 대부분의 웹사이트에서는 보기 품질의 큰 손실 없이 안전하게 JPEG 품질을 한 단계 낮출 수 있습니다.

85% JPEG 이미지 품질이 일반적인 것처럼 보이지만 많은 웹사이트에서 품질이 떨어지는 것을 볼 수 있습니다. 95%, 품질이 낮은 제품은 실제로 전체 경험을 손상시키지 않고 대역폭을 크게 줄일 수 있습니다. 결과적으로 대역폭 소비가 높아지고 네트워크 지연이 사용자 경험에 미치는 영향이 발생합니다.

두 사진의 품질 위의 내용은 거의 동일합니다. 왼쪽의 95% 품질의 JPEG는 크기가 34KB인 반면, 오른쪽의 80% 품질의 JPEG는 이전보다 다운로드 시간이 절반, 로딩 시간은 2배밖에 걸리지 않습니다. . 이러한 미미한 품질 손실은 그만한 가치가 있습니다.

수정 방법: 일부 사이트에서는 JPEG 품질을 50%로 사용하는 것이 매우 좋습니다. 합리적인 결과입니다. 물론 고품질 JPEG는 항상 더 좋아 보이지만, 고품질 이미지에 따른 추가 대역폭과 대기 시간만큼 품질이 향상되는 것이 항상 가치 있는 것은 아닙니다.

3 .잘못된 이미지 파일 형식

현재 홈페이지는 JPEG, PNG, GIF 입니다. 평균적으로 JPEG와 GIF는 웹사이트의 약 40%를 차지하고 PNG는 나머지 20%를 차지합니다.

이 세 가지 형식의 좋은 점과 나쁜 점은 웹사이트에서 각각 다른 역할을 한다는 것입니다. 잘못된 이미지 형식을 사용하는 것은 방문자의 시간과 돈을 낭비하는 것입니다.

Cloudinary에서 가장 흔한 실수는 PNG를 사용하여 사진을 전달하는 것입니다. PNG에 대한 일반적인 오해는 PNG가 무손실 형식이며 사진을 대체할 가능성이 가장 높다는 것입니다. 일반적으로 말하면 이는 사실이며 실제로 최적화할 필요가 없습니다. 비슷한 품질의 고품질 JPEG 이미지를 얻으려면 PNG 파일 크기의 일부만 필요합니다.

왼쪽이 PNG 이미지로, 크기가 110KB입니다. 오른쪽에는 비슷해 보이지만 크기가 15KB에 불과한 JPEG 이미지가 있습니다.

깨는 방법: 어떤 이미지 형식이 콘텐츠 표시에 적합한지 항상 주의하세요. PNG는 컴퓨터에서 생성된 이미지(차트, 로고 등)에 사용되거나 이미지의 일부가 투명해야 하는 경우(이미지 오버레이)에 사용해야 합니다. 캡처된 이미지를 표시하려면 JPEG를 사용해야 합니다. 애니메이션을 표시할 때는 GIF를 사용해야 합니다(Jjax를 사용하여 애니메이션 로드 등). 이는 일반적인 지침이며 거의 모든 측면에서 PNG가 GIF보다 성능이 뛰어납니다.

4. 최적화되지 않은 이미지 게시

PNG는 무손실 형식이지만 더 압축할 수 있다는 사실을 알고 계셨나요? 동일한 정밀도로 이미지를 게시할 수 있으며, 무료 PNG 압축 도구를 사용하면 PNG 크기를 최대 50%까지 줄일 수 있습니다. 상세 이미지는 동일하지만 크기가 절반인가요? 나를 정신지체자라고 생각해보세요. 불행하게도 많은 개발자와 웹사이트 디자이너는 이 단계를 건너뛰고 최적화되지 않은 이미지를 게시합니다.

해결 방법: PNGCrush와 OptiPNG는 두 가지 오픈 소스 이미지 최적화 라이브러리입니다. 아직 사용해 본 적이 없다면 꼭 사용해 보세요. 자동 최적화 프로세스가 필요하지 않은 경우 Yahoo의 smush로 이동할 수 있습니다. 수동 압축 PNG 서비스를 제공합니다.

위는 Yahoo smush 사용 예시입니다. 효과가 있었습니다.

5. 이미지 메타데이터 삭제를 잊지 마세요

많은 최신 웹사이트에서는 방문자가 사진을 업로드할 수 있습니다. 사용자의 프로필 사진이든 최근 여행에서 공유한 사진이든 최신 카메라의 원시 정보가 함께 제공되므로 사진에 많은 메타 정보가 포함될 가능성이 높습니다.

메타 데이터는 EXIF/IPTC 형식이며 카메라 모델, 날짜 및 시간 정보, 조리개, 셔터 속도, 초점 거리, 측광 모드, ISO, 글로벌 포지셔닝 및 기타 다양한 카메라 및 사진 정보를 포함합니다. 기타 정보의 일부입니다.

대부분의 경우 메타 정보를 제거하는 것은 좋은 생각입니다. 개인 정보 보호 및 파일 크기 감소에 적합합니다. 안타깝게도 개발자가 시간을 들여 메타 정보를 삭제하는 경우는 거의 없습니다. 이로 인해 대역폭이 증가하고 사용자의 검색 환경이 손상됩니다.

수정 방법: 이미지와 사용자가 업로드한 사진에서 메타 정보를 삭제했는지 확인하세요. 이 정보가 필요한 경우 해당 정보가 이미지의 일부가 아닌 범위 내에서 사용 가능한지 확인하세요. 팁: 웹 사이트에 이미지 메타 정보가 필요하지 않더라도 사진을 올바르게 표시하는 데 중요한 정보, 즉 이미지의 원래 사진 방향이 있습니다. Exif 정보를 삭제할 때 Exif 정보를 기준으로 이미지를 올바른 방향으로 회전했는지 확인하십시오.

6. 서버에서 직접 이미지 게시

웹사이트 콘텐츠가 준비되면 다음 목표는 모든 웹사이트 이미지를 방문자에게 최대한 빨리 배포하는 것입니다.

Cloudinary에서 가장 일반적인 웹사이트 문제 중 하나는 개발자가 자신의 서버에 이미지를 저장하는 경우가 많으며, 웹사이트와 동일한 시스템에 있는 경우가 많습니다. 여기서는 두 가지 일이 발생합니다. 첫째, 서버가 고유한 웹 사이트 콘텐츠 게시에 집중하는 대신 이미지를 게시하느라 바쁩니다. 둘째, 가장 놀라운 이미지 전달 솔루션 중 하나인 콘텐츠 전달 네트워크(Content Delivery Networks)를 놓치고 있습니다.

해결 방법: 콘텐츠 전송 네트워크는 웹사이트 자체가 CDN에 의존하여 이미지 배포를 관리할 수 있는 것보다 훨씬 빠르게 웹사이트의 이미지를 관리하는 사용하기 쉬운 서비스입니다. 방문자가 웹 사이트를 탐색할 때 자동으로 가장 가까운 경계 서버로 라우팅되므로 이미지가 가능한 한 빨리 게시될 수 있으며 필요한 대역폭에 따라 달라지는 CDN이 크게 줄어듭니다. 호스팅 서비스 제공업체보다 비용이 약간 비싸지만 현재 CDN 가격은 매우 저렴하여 이용 가치가 있습니다.

선택할 수 있는 CDN 서비스 제공업체가 많기 때문에 등록만 하면 바로 즐길 수 있습니다. 장점 Amazon CloudFront는 좋은 시작입니다.

7. 정적 아이콘은 별도로 제공됩니다

웹사이트에는 사진과 썸네일 외에도 로고, 화살표, 별, 기호도 있습니다. , 로고, 버튼, 그림자, 테두리 및 기타 이미지 조각을 구성하는 이미지 조각을 사용하면 아티스트의 요구 사항에 따라 다양한 위젯을 동적으로 만들 수 있습니다.

웹사이트에는 믿을 수 없을 만큼 작은 사진이 너무 많습니다. Google의 검색 결과 페이지를 예로 들어보겠습니다. Google을 자주 사용한다면 여전히 그 간단한 인터페이스에 깊은 인상을 받을 것입니다. 아이콘이 거의 보이지 않죠? 큰 실수죠? Google 검색 결과 페이지에는 80개가 넘는 작은 아이콘이 있습니다(!)

개발자가 흔히 범하는 실수는 이러한 작은 아이콘을 웹사이트에 그대로 삽입하는 것입니다. 브라우저가 너무 많은 이미지를 다운로드하는 데는 상당한 시간이 걸립니다. 사진을 다운로드할 때 방문자로서 우리는 네트워크 지연을 견뎌야 하며, 평균 브라우저는 동시에 6개 이하의 사진만 다운로드할 수 있도록 지원하므로 지연 시간에 사진 다운로드 배치가 곱해집니다. 방문자는 브라우저가 이러한 이미지를 모두 다운로드할 때까지 기다려야 하며, 너무 많은 다운로드 요청을 처리하면 웹 서버가 응답하지 않을 수 있습니다. 방문자는 기다리기를 포기하고 일상적인 탐색 활동을 계속할 수도 있습니다.

수정 방법: 간단한 해결책은 모든 작은 아이콘이 포함된 단일 이미지인 CSS Sprite를 사용하는 것입니다. 웹페이지는 서버에 있는 이 단일 이미지에서 다운로드되고 수정되며, 페이지의 HTML은 대체 CSS 클래스 이름을 사용하여 큰 이미지 내의 작은 이미지를 가리킵니다.

이제 Google 방문자는 80개의 이미지 대신 단 하나의 이미지만 다운로드합니다. 브라우저는 Google 서버에서 이러한 단일 이미지를 신속하게 다운로드하고 캐시하며 모든 이미지는 즉시 렌더링됩니다.

8. CSS3를 사용할 수 있는 경우 이미지를 사용하세요

웹사이트 디자인을 HTML 요소로 변환할 때 여전히 많은 개발자가 버튼을 이미지로 디자인합니다. 오래된 브라우저는 CSS를 사용하여 그림자, 호 모서리 및 특수 글꼴을 구현하는 것을 지원하지 않기 때문에 개발자는 과거에 위 기능, 즉 이미지 기반 솔루션을 달성하기 위해 작은 이미지를 사용하는 데 익숙했습니다.

안타깝게도 이 솔루션에는 많은 수의 이미지가 필요하므로 궁극적으로 시청자 경험이 저하되고 관리도 어려워 개발에 필요한 시간과 비용이 늘어납니다. (삽입된 텍스트에서 이미지를 변경하는 방법을 생각해 보세요.) .

최신 브라우저는 그림자, 둥근 사각형 및 특수 글꼴에 간단한 CSS 사용을 지원합니다. 그러나 여전히 이미지 기반 버튼을 사용하는 웹사이트가 많이 있습니다. 이것은 일반적인 유형의 실수입니다. 예를 들어 CNN 버튼의 이 부분을 살펴보세요.

이 작은 트릭은 간단한 CSS 지침을 사용하여 쉽게 구현할 수 있는 61KB 이미지로, 대역폭 소비를 줄이면서 로드 시간과 사용자 경험을 향상시킵니다.

수정 방법: 가능하면 CSS3를 사용하세요. 그래픽 디자이너가 CSS3 기반 요소를 제공할 수 있다면 이전 버전의 IE를 지원하려면 인터페이스가 정상적으로 저하될 수 있는지도 확인해야 합니다. 최소한 설계된 기능을 사용할 수 있는지 확인하거나(원래 효과가 완벽하게 표시될 수는 없음) CSS3 PIE와 같은 CSS3 시뮬레이션 솔루션을 선택하세요.

9. 잘못된 사진 캐시 설정

일반적으로 귀하의 웹사이트 이미지 문화는 거의 변하지 않습니다. HTTP 캐싱 지시문을 사용하면 방문자의 브라우저가 다른 서비스(CDN, 프록시 등)와 마찬가지로 이러한 이미지를 캐시할 수 있습니다. 이미지가 캐시되면 향후 웹사이트 방문 시 이미지를 반복해서 다운로드하는 대신 캐시를 사용하게 됩니다.

적절한 캐싱 설정은 페이지 로드 시간을 줄여 사용자 경험을 향상시키는 동시에 웹사이트 대역폭을 줄여 비용을 절감합니다.

안타깝게도 캐싱을 제대로 활용하지 못하는 경우를 많이 봅니다. 가장 일반적으로, 웹 사이트 방문자가 새 이미지 대신 이전 이미지를 보게 될 것이라고 생각하기 때문에 이미지를 업데이트할 때 캐시 설정이 길어지는 것에 대한 우려가 있습니다.

이미지 URL에 지문(MD5, 타임스탬프 등)을 추가하면 까다로워 보이는 이 상황을 쉽게 피할 수 있습니다. 이미지의 URL에 지문을 추가하면 이미지가 변경된 시기와 해당 URL을 알 수 있습니다. URL이 변경되면 브라우저는 이미지를 강제로 다시 읽습니다. 현재 웹 개발 플랫폼은 이러한 지문을 모든 이미지에 자동으로 추가하여 소스에서 이 문제를 해결할 수 있습니다.

해결 방법: 사이트 전체에서 이미지를 적극적으로 캐싱하고 가능하면 이미지의 'Expires' HTTP 헤더를 설정하는 것이 좋습니다. 이미지 URL 지문 채취 외에도 웹 사이트 성능을 즉시 향상시킬 수 있습니다.

10. 모든 전송 미디어에 동일한 이미지 크기를 사용하세요

귀하의 웹사이트는 다양한 기기에서 조회되고 있습니다. 최근 몇 년 동안 모바일 및 태블릿 사용자가 증가함에 따라 웹사이트의 트래픽 분석을 살펴보세요. 이러한 장치를 통해 유입되는 방문자 수가 크게 증가한 것으로 나타났습니다.

웹사이트에 모바일 방문자가 있는지, 아니면 웹사이트 콘텐츠의 모바일 버전을 제공할 계획인지에 따라 결정해야 할 사항은 한 가지입니다. 이미지를 어떻게 모바일 기기에서도 데스크톱 해상도로 전송할지 결정하세요. 너무 낮습니다.

개발자가 다양한 기기 해상도에 동일한 이미지를 제공하고 클라이언트 측에서 이미지 크기를 조정하여 문제를 해결하려고 하는 경우가 많습니다. 이미지는 훌륭해 보이지만 사용자는 큰 이미지를 로드하는 데 시간을 낭비하고 추가 대역폭 요금을 지불하게 됩니다. 이는 대용량 고해상도 이미지를 위해 추가 비용을 지불해야 하는 3G 사용자와 로밍 사용자에게 특히 불공평합니다.

그 반대는 가장 낮은 표준을 사용하고 모든 기기에서 매우 낮은 해상도의 이미지를 사용하여 최신 고해상도 기기에서 사이트 성능이 저하되는 것입니다.

해결 방법: 해결 방법은 간단합니다. 사용자 에이전트 또는 클라이언트 측 Javascript 코드를 통해 방문자의 모바일 장치와 해상도를 식별합니다. 정확한 해상도를 얻은 후 서버에서 가장 적합한 이미지를 검색합니다. 물론 이를 위해서는 원본 이미지의 썸네일 세트를 제공해야 합니다. 이 프로세스를 자동화하는 좋은 JavaScript 패키지가 이미 있습니다.

요약

이 글에서 가장 많이 언급되는 웹사이트 이미지 처리 문제는 사실 Cloudinary에서 가장 많이 접하는 문제입니다. 문제가 너무 많아서만 올려드리는 것이 아닙니다. 효율성에 더 큰 영향을 미치는 문제에 대해 간단한 설명을 제공하여 연구의 출발점으로 활용하고 적절한 솔루션을 찾을 수 있습니다.

Cloudinary에 대해 아직 들어보지 못하셨다면 Cloudinary가 위에서 언급한 문제를 해결했다는 사실을 알려드리게 되어 기쁩니다. Cloudinary에 업로드되는 모든 이미지는 어떤 크기로든 동적으로 생성될 수 있습니다. Cloudinary는 사용하기 쉽고 관리하기 쉬운 Sprite를 제공하며, 크기에 따라 모든 이미지가 자동으로 제거됩니다. 고속 CDN 전송을 최적화하고 사용하세요. 책에 언급된 거의 모든 모범 사례가 사용되었습니다. 마지막으로 Cloudinary의 클라우드 동적 이미지 크기 조정 기능이 반응형 디자인에 완벽하게 적응한다는 점을 언급할 가치가 있습니다.