이미지를 메인으로 사용하는 섹션이 있어요. 문제는 이미지가 휴대폰, 태블릿, 데스크톱에서 1MB로 너무 크다는 것입니다. 이미지가 너무 커서 걱정이네요.
이미지를 메인 섹션의 배경으로 사용할 때의 모범 사례를 알고 싶습니다.
여러분의 친절한 제안과 의견에 감사드립니다.
P粉1639513362023-09-20 12:29:17
사실 1MB 크기의 히어로 배너 이미지는 너무 큽니다. 웹페이지의 히어로 섹션은 일반적으로 사용자가 보는 첫 번째 시각적 요소입니다. 큰 이미지로 인해 사용자는 웹 사이트 콘텐츠를 보지 못한 채 오랜 시간을 기다리게 되고 빠르게 떠날 것입니다.
따라서 이러한 이미지를 최적화하는 것은 성능과 미적 측면 모두에 중요합니다. 히어로 이미지는 100KB 미만이어야 합니다.
TinyPNG는 훌륭한 도구입니다. https://tinypng.com
반응형 이미지를 사용하여 다양한 종횡비에 적응할 수도 있습니다. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
으아악Next.js를 사용하는 경우 이미지 구성 요소 https://nextjs.org/docs/pages/api-reference/comComponents/image를 사용할 수 있습니다.
마지막으로 Lighthouse를 사용하여 웹 페이지 성능을 테스트할 수 있습니다. https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk