2019년 여름 이미지 최적화 설문조사 의견

다양한 이미지 최적화 기법에 관한 설문조사 응답자의 의견

Sam Dutton

이 게시물에는 2019년 여름 이미지 최적화 기법 설문조사에서 Google Web DevRel이 받은 자유 형식 의견이 나와 있습니다. 웹 기초 및 @ChromiumDev를 통해 응답을 요청했습니다. 설문조사의 목적은 대부분의 사이트가 이미지 최적화 권장사항을 따르지 않는 이유를 파악하는 것이었습니다. 이미지 최적화는 성능을 개선하는 비교적 쉬운 방법으로 보이지만, 대부분의 사이트가 이를 따르지 않습니다. 설문조사 방법론에 결함이 있었기 때문에 응답 데이터는 여기에 나열되지 않습니다.

대상

  • 웹 개발자라면 이 게시물을 통해 새로운 이미지 최적화 기법을 발견하거나 다른 웹 개발자가 직면한 문제를 해결한 방법과 각 기법의 비용, 이점, 제한사항에 관한 세부정보를 확인할 수 있습니다.
  • 이미지 서비스 또는 이미지 CDN 제공업체인 경우 이 게시물이 새로운 시장 기회를 찾는 데 도움이 될 수 있습니다.
  • 프레임워크, 빌드 도구 또는 CMS 개발자라면 이 게시물에서 구현할 새로운 기능에 관한 아이디어를 얻을 수 있습니다.

댓글

WebP

  • "WebP를 좋아하지만 아직 완전히 준비되지 않았습니다. 게다가 WordPress는 WebP를 지원하지 않습니다. 가장 인기 있는 사진 편집 앱 중 하나인 Photoshop도 기본적으로 WebP를 지원하지 않습니다. 따라서 이미지 압축을 위해 서드 파티 앱이나 서비스에 의존할 수 없습니다."
  • "Safari에서 WebP를 사용할 수 있도록 설정"
  • "Photoshop/Figma/Sketch에서 내보낼 수 있고 모든 브라우저에서 지원한다면 WebP를 사용하고 싶습니다." [참고: Sketch는 WebP를 지원합니다.]
  • "차세대 포맷 솔루션이 있으면 좋겠습니다."
  • "브라우저 지원이 좋지 않은 경우 WebP를 너무 강요하지 말고 스크린샷에 JPEG 대신 PNG가 필요한지 고려하세요."
  • "Google Docs는 WebP를 지원하지 않습니다."
  • "WebP만 사용하고 싶지만 브라우저 호환성이 우려됩니다."
  • "먼저 브라우저 호환성을 수정하고 기존 브라우저를 업데이트하거나 기존 수정사항을 추가하면 사용자가 WebP와 같은 새로운 이미지 유형을 채택할 가능성이 높아집니다…"
  • "플러그인/테마 개발자가 WebP 및 기타 차세대 이미지 유형을 지원하도록 장려하여 개발자가 아닌 사용자가 직접 처리할 필요가 없도록 합니다."

SVG 및 벡터 이미지

  • "가능하면 (애니메이션) SVG를 사용합니다. gatsby-image가 이 문제를 많이 해결했습니다. 하지만 이들이 한 일을 자세히 살펴보면 일반 웹사이트에서 이미지를 제대로 작동시키기 위해 그런 것을 구축해야 한다는 것은 완전히 비현실적입니다. 브라우저가 이 책임을 더 많이 맡아야 합니다."
  • "lottie.js로 SVG 애니메이션을 만드는 방법을 문서화할 수 있나요?"
  • "로드 시간을 줄이기 위해 웹사이트에서 크기가 작은 고해상도 JPEG 사진을 사용하는 경우가 많습니다. 또한 반응형 디자인의 품질을 제공하기 위해 필요한 경우 SVG를 사용합니다."
  • "가능한 경우 사진을 제외한 모든 항목에 최적화된 벡터 그래픽을 사용하려고 합니다."

기타 이미지 형식

  • "GIF 사용을 중단하도록 사람들을 더 잘 교육해야 합니다."

지연 로드

  • "지연 로드와 같은 기능을 고려할 때는 사용자를 염두에 두세요. 많은 사용자에게 지연 로드는 성가신 기능입니다."
  • "지연 로드 속성이 background-image와 함께 작동하도록 해 줘."
  • "프레임워크는 기본적으로 애셋 처리를 더 잘해야 합니다."
  • "오래전에 지연 로드에서 전환했습니다. 수백만 개의 이미지와 사이트가 '로드되지 않는다'는 사용자 신고가 접수되었습니다. 저희 팀은 그렇게 이해했습니다. 기술 지식이 없는 사용자가 문제를 설명하기는 어렵습니다."
  • "기존 기술을 사용하는 대신 지연 로드에 Intersection Observer API를 사용하는 방법을 더 잘 이해하고 싶습니다."
  • "pwafire.org/developer/codelabs/progressive-loading이 잘 작동합니다."

배경 이미지

  • "저는 보통 CSS에서 이미지를 배경으로 로드합니다."
  • 0"<img> 태그는 문제가 있으며, 특히 사용자가 제출한 콘텐츠의 경우 세부적인 사항을 제어하기 어렵습니다. 저희는 <div> 및 background-image 스타일 지정을 훨씬 더 자주 사용합니다. background-size, background-position을 사용할 수 있고 마우스 오른쪽 버튼 클릭으로 이미지를 저장하는 것을 방지할 수 있기 때문입니다."

투명성

  • "2019년입니다. JPG는 알파 투명도가 없는데 어떻게 가능한가요?"
  • "투명한 배경이 필요할 때만 사진에 PNG를 사용합니다."

저품질 이미지 자리표시자 (LQIP)

  • "LQIPS를 사용하고 있는데, 고화질 이미지를 너무 일찍 로드하지 않고도 방문자의 참여를 유지할 수 있는 훌륭한 기술입니다."

성능

  • "최근에 이미지와 관련된 성능 문제가 있었습니다. 사용자가 사이트에서 아래로 스크롤하면 썸네일이 포함된 다음 카드 60개가 표시됩니다. 동일한 도메인에 대한 연결 제한이 6개이므로 사용자가 계속 아래로 스크롤하면 다음 60개 카드를 가져오기 위한 다음 AJAX 요청뿐만 아니라 썸네일도 차단되었습니다."
  • "HTTP/2를 사용하고 싶지만 대부분의 고객이 IE11을 사용합니다. 따라서 도메인 샤딩을 살펴보고 있으며 다른 도메인에서 AJAX JSON 데이터 요청을 로드하고 있습니다."

크기 조정

  • 'intrinsicsize를 사용해서 죄송합니다. height/width를 활용하는 것이 더 나을 것 같습니다.'
  • "크기를 줄일 수 있는 방법을 찾고 있습니다. 현재는 약 12개입니다."
  • "이미지의 동적 크기 조절은 매우 어렵고 JS 없이는 불가능합니다."
  • "responsivebreakpoints.com과 같은 도구는 web.dev에 적합합니다. :)"

고품질 및 고해상도 이미지

  • "DPI 품질 저하 없이 압축 이미지를 다운로드하는 방법"
  • "저희는 문서 관리 회사입니다. 우리 앱은 일반적으로 TIFF 또는 PDF 형식의 고해상도 스캔 이미지 수백만 개를 처리합니다."
  • "번거롭습니다. 인쇄 형식에는 고해상도 이미지 파일이 필요하며 웹에 최적화되어야 합니다. 웹용 이미지를 축소하는 것은 번거로운 일이지만, 작성자가 인쇄 출판용 이미지에 가벼운 파일만 제공하는 경우 문제가 발생합니다. 결국 아트워크가 포함된 원고 제출 요구사항에 대해 상반된 메시지를 전달하게 됩니다. 결국 이러한 자료를 처리하기 위한 복잡한 워크플로가 생깁니다."

브라우저 기능

  • "모든 이미지를 4가지 크기로 자르고 모든 마크업을 작성하는 데 시간이 많이 걸리므로 브라우저에서 [기본 제공] 기능으로 자동 반응형 src 자르기를 사용하면 매우 유용할 것입니다. 큰 사진 한 장을 업로드하고 브라우저가 여러 src 속성을 자동으로 생성하는 간단한 그림 태그를 작성할 수 있다면 정말 유용한 기능이 될 것입니다."
  • "개인적으로 반응형 이미지의 CSS로 이미지 너비를 설정할 때 (max-width: 100%; height auto 또는 height: width: 100%; height auto), 특히 적응형 이미지/picture 태그의 아트 디렉션과 결합할 때 페이지 리플로우를 방지하는 데 어려움을 겪고 있습니다. 이를 방지하는 가장 좋은 방법은 고정된 이미지 비율에 '음수 패딩 핵'을 사용한 다음 이 비율 상자 안에 이미지를 배치하는 것입니다. 브라우저 지원/반응형 이미지 처리가 개선되면 정말 큰 도움이 될 것입니다."
  • "첫 번째 프레임만 가져와서 GIF '자동재생'을 사용 중지하세요."

CDN 및 이미지 서비스

  • "Google은 Cloudflare와 같은 무료 CDN을 제공해야 합니다."
  • "다양한 제공업체와 동적 확장 및 CDN을 설정하는 도구가 더 많으면 좋을 것 같습니다."
  • "압축률이 높은 대형 이미지 하나를 사용하는 것은 추가 제작 비용이 들지 않는 매우 좋은 솔루션입니다. 모바일의 경우 너비가 약 1000픽셀인 이미지가 필요하며 (렌더링 너비 500px), 이는 대형/데스크톱 비레티나 디스플레이에 필요한 크기이기도 합니다. 이전에 사용해 본 적이 있지만 이미지 크기 조절 CDN은 매우 좋지 않은 솔루션이라고 생각합니다. CMS에서 크기 조절을 처리해야 하며, 설정이 너무 복잡한 경우 단일 솔루션이 (현재로서는) 적절한 절충안입니다."
  • "Cloudflare는 사용자의 디스플레이에 가장 적합하도록 이미지를 자동으로 확장합니다. 따라서 사용자의 디스플레이에 맞게 이미지가 로드되므로 로드 시간을 절약할 수 있습니다. 예를 들어 사용자가 휴대전화를 사용하는 경우 데스크톱 크기의 배경으로 로드되지 않습니다."
  • "Cloudflare는 설정 패널에서 체크박스를 선택하는 것 외에는 아무것도 하지 않아도 백그라운드에서 이 작업을 수행합니다."
  • "다시 말씀드리지만, 제가 srcset 등을 성공적으로 사용할 수 있는 유일한 이유는 Cloudinary의 편리함 덕분입니다. 하지만 Cloudinary는 정말 빠르게 비싸집니다. 개발 경험에 큰 구멍이 있는 것 같습니다."
  • "다양한 맥락에서 다양한 가로세로 비율로 작동할 수 있도록 이미지를 스마트하게 자동 자르기하는 쉬운 방법이 필요합니다."
  • "Unsplash와 같이 해상도, 품질, 압축을 제어하기 어려운 다른 제공업체의 이미지도 사용합니다."

CMS, 플랫폼, 프레임워크

  • "CMS를 사용하여 사이트를 구축할 때 이미지를 사용하는 가장 좋은 방법을 찾는 데 여전히 어려움을 겪고 있습니다. 작성자는 다양한 크기로 이미지를 구성하는 경향이 있으며 이미지가 축소되거나 확장되지 않기를 기대합니다. 이미지에 max-width 또는 max-height를 설정해도 되는지 잘 모르겠습니다."
  • "지난 몇 개의 프로젝트에서 gatsby-image를 사용해 왔으며, 다른 도구는 생각도 하지 않았습니다."
  • "최종 사용자가 CMS에 이미지를 넣을 때 이미지가 문제가 되는 경우가 많습니다. 최종 사용자는 어떤 크기나 형식도 사용할 수 있으며, 때로는 이상적인 이미지 형식과 크기의 원본 이미지를 사용할 수 없는 경우도 있습니다."
  • "시스템이 셀프 서비스이므로 이미지를 유지하기가 어렵습니다. 해상도에 영향을 주지 않고 자동으로 처리되지 않는 한 제어 기능을 추가하기가 어렵습니다. 또한 모바일과 데스크톱에서 이미지가 올바르게 표시되지 않습니다."
  • "저는 사용자가 사이트 (WordPress)를 최적화하도록 지원합니다. 이미지와 관련해 제가 본 가장 큰 문제는 WebP를 만들려면 CDN이나 플러그인에 의존해야 한다는 점입니다. srcset/picture는 테마 개발자가 올바르게 코딩해야 합니다. 대부분의 지연 로드 플러그인은 로드 속도가 느려 UX가 좋지 않습니다. 배경 이미지는 지연 로드하기가 어렵습니다."

비용/편익

  • '새로운 관행은 효과적이지만 사이트 개발 시간이 늘어납니다.'
  • "srcset 및 WebP와 같은 새로운 표준을 준수하지 않는 Fortune 500대 기업이 많아 채택이 더디게 진행되고 있습니다. 이러한 상황에서 많은 기업은 현재 웹사이트에 불필요한 개발 비용이 발생한다는 이유로 변화를 거부해 왔습니다. 최종 사용자 (UX)가 성능 향상에 관해 널리 논의하거나 보고하지 않습니다. 오히려 웹에서 이미지를 저장하기가 다소 어려워졌습니다."
  • "다양한 크기와 버전의 광고 소재를 만들고 관리하는 데 비용이 많이 듭니다."
  • "서버에서 많은 공간을 차지합니다."

검색엔진 최적화

  • "허용 가능한 이미지 품질과 파일 크기 사이의 균형을 맞추기가 어렵습니다. 한편으로는 SEO 이점을 위해 빠른 로드를 원하지만, 다른 한편으로는 품질이 낮은 이미지가 UI/UX를 저해할 수 있습니다."

웹에서 이미지의 역할

  • "웹에 너무 많습니다. 서면 콘텐츠를 보완하지 않는 쓸모없는 이미지는 사용하지 마세요."
  • "웹에 이미지가 없어서 셀카를 ASCII 아트로 공유하던 시절을 기억하시나요?"

도구, 가이드, 표준, 권장사항: 불만사항 및 요청

  • [한 참가자가 이 설문조사에 대한 응답으로 블로그 게시물을 작성했습니다.]
  • "요구사항이 계속 바뀌는 것 같습니다. 웹 개발자로서 이미지를 저장하는 데 시간이 많이 걸리기 때문에 매우 불편합니다. 최선을 다해 최적화하고 사이트를 확인한 후 몇 달이 지나면 Google에서 이미지를 더 압축하거나 다른 형식으로 변경해야 한다고 결정합니다. 이로 인해 고객에게 지속 가능한 최상의 솔루션을 제공할 수 없게 되며, 고객과 Google 모두에게 비용이 많이 드는 작업이 됩니다. 일부 소규모 비즈니스 고객은 요구사항을 준수하기 위해 이미지를 계속 수정하고 다시 저장할 예산이 없습니다. 관리 패키지 내에서 이 작업을 수행할 예산이 없습니다. 기기마다 다른 이미지 크기를 호출하는 코드를 작성하는 것도 시간이 많이 걸립니다. 더 오랜 기간 동안 일관되게 이미지를 저장하는 시스템을 마련하면 좋을 것 같습니다."
  • "예, Lighthouse에서 '요청 수와 파일 크기를 작게 유지'를 완전히 잘못 이해하신 것 같습니다. 사이트가 HTTP1.x를 통해 제공되는 경우에는 그렇지만, 사이트가 HTTP2를 통해 제공되는 경우에는 요청 수가 덜 중요하거나 동일한 호스트 이름에서 발생하는 경우 문제가 되지 않습니다. 가벼운 웹사이트가 있지만 동일한 호스트 이름에서 HTTP2를 통해 총 약 35개의 요청 중 30개의 작은 WebP 파일을 로드합니다. Lighthouse는 이 문제를 '요청 수를 적게 유지하고 파일 크기를 작게 유지' 문제로 표시하지만, 이 문제는 매우 빠르며 동일한 호스트 이름의 HTTP2로 인해 요청 수가 문제가 되지 않습니다. 파일은 이미 작습니다 (대부분 1KB~2KB 이하). 스프라이트를 로드할 수 있지만 더 많은 CSS 컴퓨팅을 수행해야 합니다. 따라서 동일한 호스트 이름에서 HTTP2를 고려하도록 Lighthouse의 '요청 수 및 파일 크기 작게 유지' 보고서를 업데이트하세요."
  • "사람들이 이미지를 압축하는 것을 기억하는 데 어려움을 겪고 있습니다."
  • "브라우저 간 동작은 예측할 수 없으므로 가장 간단한 솔루션이 가장 안전한 경우가 많습니다."