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

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

이 게시물에는 Google Web DevRel이 2019년 여름 이미지 최적화 기법 설문조사에서 받은 자유 형식 의견이 나열되어 있습니다. 응답은 Web Fundamentals@ChromiumDev를 통해 요청되었습니다. 설문조사의 목적은 이미지 최적화 권장사항이 비교적 쉽게 성능을 개선하는 방법임에도 불구하고 권장사항을 따르지 않는 이유를 알아보기 위한 것이었습니다. 설문조사 방법에 결함이 있어서 응답 데이터가 여기에 나와 있지 않습니다.

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

설명

WebP

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

SVG 및 벡터 이미지

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

기타 이미지 형식

  • "사람들에게 GIF 사용을 중단하는 방법을 더 잘 교육해야 합니다."

지연 로드

  • "지연 로드와 같은 기능을 고려할 때는 사용자를 염두에 두시기 바랍니다. 많은 경우 사용자를 성가시게 하기 때문입니다."
  • "지연 로드 속성이 백그라운드 이미지와 함께 작동하도록 하세요."
  • "프레임워크는 처음부터 더 나은 애셋 처리를 수행합니다."
  • "우리는 오래전에 지연 로드에서 전환했습니다. 수백만 개의 이미지와 사이트가 '로드되지 않음' 사용자 신고 저희 팀이 요약한 내용을 이해했습니다. 비기술적 사용자는 문제를 설명하기 어렵습니다."
  • "지연 로드에 기존 기술을 사용하기보다는 Intersection Observer API를 사용하는 방법을 더 잘 이해하고 싶습니다."
  • "pwafire.org/developer/codelabs/progressive-loading는 제 도움이 될 것입니다."

배경 이미지

  • "보통 CSS에서 이미지를 배경으로 로드합니다."
  • "<img> 태그는 문제가 되고 특히 사용자가 제출한 콘텐츠에서 세부적인 세부정보를 제어하기가 어렵습니다. <div> 및 배경 이미지 스타일 지정을 훨씬 더 자주 사용합니다. 배경 크기, 배경 위치를 사용하고 이미지를 마우스 오른쪽 버튼으로 클릭하여 저장하지 못하도록 하기 때문입니다."

투명성

  • 2019년이 되었습니다. JPG에 알파 투명도가 적용되지 않은 이유는 무엇인가요?"
  • "투명 배경이 필요할 때만 사진에 PNG를 사용합니다."

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

  • "LQIPS는 고품질 이미지를 빠르게 로드하지 않고도 방문자의 참여를 유도할 수 있는 훌륭한 기술입니다."

성능

  • "최근에 이미지에 성능 문제가 발생했습니다. 사용자가 사이트에서 아래로 스크롤하면 썸네일이 포함된 카드 60개가 그다음으로 표시됩니다. 동일한 도메인에서 6개의 연결 제한으로 인해 사용자가 계속 아래로 스크롤하면 다음 AJAX 요청뿐만 아니라 미리보기 이미지도 차단되고 있었습니다."
  • "HTTP/2를 사용하고 싶지만 고객 대부분은 IE11을 사용합니다. 따라서 현재 다른 도메인에서 도메인 샤딩 / AJAX JSON 데이터 요청을 로드하는 방법을 모색하고 있습니다."

크기 조정

  • "본질적으로 불편을 겪으셨다니 죄송합니다. 높이/너비를 활용하는 것이 더 좋을 것 같습니다."
  • "더 적은 크기를 생성하는 방법을 찾고 있습니다. 현재 약 12입니다."
  • "이미지의 동적 크기 조절은 JavaScript 없이는 정말 어렵고 불가능합니다."
  • "responsivebreakpoints.com과 같은 도구가 web.dev에 적합합니다. :)

고화질 및 고해상도 이미지

  • 'DPI 품질을 유지하면서 압축 이미지를 다운로드하는 방법'
  • "저희는 문서 관리 회사입니다. 당사의 앱은 수백만 개의 고해상도 스캔 이미지(보통 TIFF 또는 PDF)를 처리합니다."
  • "번거로운 일입니다. 고해상도 img 파일은 인쇄 형식에 필요하며 웹에 최적화되어야 합니다. 웹용 이미지의 크기를 줄이는 것은 번거로운 일이지만, 작성자가 인쇄판에 게시할 이미지의 가벼운 파일만 제공하면 금방 사로 잡을 수 있습니다. 이후 예술작품이 포함된 원고 제출 요건에 관한 여러 가지 메시지가 혼합되어 제공됩니다. 그런 다음 이러한 재료를 처리하는 복잡한 워크플로를 만듭니다."

브라우저 기능

  • "[기본 제공] 기능으로 브라우저에서 자동 반응형 src 자르기 기능은 매우 유용합니다. 모든 이미지를 4가지 크기로 자르고 모든 마크업을 작성하는 데 시간이 오래 걸리기 때문입니다. 큰 사진 한 장을 업로드하고 간단한 사진 태그를 작성하면 브라우저가 여러 src 속성을 자동으로 생성하므로 좋은 지형지물이 될 수 있습니다."
  • "개인적으로 저는 적응형 이미지/사진 태그의 아트 디렉션과 함께 사용할 때 CSS에서 반응형 이미지 (최대 너비: 100%, 높이 자동 또는 높이: 너비: 100%, 높이 자동)를 설정할 때 페이지 리플로우를 방지하기가 어렵습니다. 가장 좋은 방법은 고정된 이미지 비율에 '네거티브 패딩 해킹'을 사용한 다음 이미지를 이 비율 상자 내에 배치하는 것입니다. 더 나은 브라우저 지원/반응형 이미지 처리가 있으면 정말 큰 도움이 될 것입니다!"
  • "첫 번째 프레임만 가져와 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에 입력할 때 까다로운 부분인 경우가 많습니다. 이미지에는 모든 크기, 형식을 사용할 수 있으며, 경우에 따라 이상적인 이미지 형식과 크기의 원본 이미지를 사용할 수 없습니다."
  • "Google 시스템은 자체 시스템이 자동으로 관리 기능을 추가하므로 해상도에 영향을 미치지 않고 자동으로 문제가 발생하지 않는 한 이미지를 유지하기가 어렵습니다. 또한 모바일과 데스크톱에서 이미지가 올바르게 표시되지 않습니다.'
  • "저는 사람들이 사이트 (WordPress)를 최적화하도록 돕고 있습니다. 이미지의 가장 큰 문제는 WebP를 생성하려면 CDN이나 플러그인에 의존해야 한다는 점입니다. srcset/picture는 테마 개발자가 올바르게 코딩해야 합니다. 대부분의 지연 로드 플러그인은 느리게 로드되어 좋지 않은 UX를 야기합니다. 백그라운드 이미지는 지연 로드하기 어렵습니다."

비용/이익

  • "새로운 방식은 효과적이지만 사이트의 개발 시간을 늘립니다."
  • "srcset 및 WebP와 같은 새로운 표준에 대한 준수 부재는 많은 Fortune 500대 기업에서 느리게 채택했습니다. 이 상황을 보고 많은 회사들은 현재 웹사이트에 불필요하게 개발되는 비용이라는 변화를 거부하고 있습니다. 최종 사용자 (UX)가 성능 향상에 대해 광범위하게 논의하거나 보고하지 않습니다. 오히려 웹의 이미지를 저장하기가 조금 더 어려워집니다."
  • "다양한 크기와 버전을 만들고 관리하는 데 비용이 많이 듭니다."
  • "서버의 공간을 많이 차지해요."

검색엔진 최적화

  • "허용되는 이미지 품질과 파일 크기 사이에서 균형을 잡기가 어렵습니다. 한편으로는 검색엔진 최적화를 위해 빠른 로딩을 원하지만 한편으로는 품질이 낮은 이미지는 UI/UX를 떨어뜨립니다."

웹에서 이미지의 역할

  • "웹에는 검색 결과가 너무 많습니다. 작성된 콘텐츠를 보완하지 않는 쓸모없는 이미지는 사용하지 마세요."
  • "웹에 이미지가 없고 ASCII 아트로 셀카를 공유했던 때를 아직 기억하시나요?"

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

  • [한 참가자가 이 설문조사에 대한 응답으로 블로그 게시물을 작성함]
  • "요건은 끊임없이 변화하는 것 같습니다. 웹 개발자는 애초에 이미지를 저장하는 데 시간이 오래 걸리기 때문에 매우 실망하게 됩니다. Google은 최선을 다해 최적화하고 사이트를 확인한 다음 몇 달 후에 이미지를 더 압축할 수 있거나 다른 형식을 사용해야 한다고 결정했습니다. 이로 인해 고객에게 최선의 솔루션을 제공할 수 없게 되었고, 그 대신 고객과 우리 모두에게 비용이 많이 듭니다. 소규모 비즈니스 고객 중 일부는 요구사항을 준수하기 위해 이미지를 계속 수정하고 다시 절약할 예산이 없습니다. 관리 패키지 내에서 이 작업을 수행할 예산이 없습니다. 기기마다 다른 이미지 크기를 호출하도록 코드를 작성하는 데도 시간이 오래 걸립니다. 오랜 기간 동안 일관되게 유지되는 이미지를 저장하는 시스템을 마련하면 좋을 것입니다."
  • "네, Lighthouse에서 '요청 수를 낮게 유지하고 파일 크기를 작게 유지'가 잘못 온 것 같습니다. 사이트가 HTTP1.x를 통해 게재되는 경우에는 물론입니다. 하지만 사이트가 HTTP2를 통해 게재되는 경우, 동일한 호스트 이름에서 발생하는 경우 요청 수는 덜 중요하거나 문제가 되지도 않습니다. 라이트 웹사이트가 있지만 동일한 호스트 이름에서 HTTP2를 통해 총 35개 정도의 작은 WebP 파일 30개를 로드합니다. Lighthouse는 이를 'Keep Request Counts Low and File Sizes Small(요청 수를 낮게 유지하고 파일 크기를 작게 유지)' 문제로 보고하지만, 초고속이고 동일한 호스트 이름에 HTTP2가 있기 때문에 요청 수가 문제가 되지 않습니다. 파일은 이미 작습니다 (대부분 1KB에서 2KB 이하). 스프라이트를 로드할 수 있지만 그러면 더 많은 CSS 컴퓨팅을 수행해야 합니다. 따라서 Lighthouse에서 '요청 수를 낮게, 파일 크기를 작게 유지' 보고서를 업데이트하여 동일한 호스트 이름에 대한 HTTP2를 고려하시기 바랍니다."
  • "사람들이 이미지를 압축하는 것을 기억하는 것은 어려웠습니다."
  • "교차 브라우저 동작은 여전히 예측할 수 없으므로 가장 간단한 솔루션이 가장 안전한 경우가 많습니다."