84669인 학습
152542인 학습
20005인 학습
5487인 학습
7821인 학습
359900인 학습
3350인 학습
180660인 학습
48569인 학습
18603인 학습
40936인 학습
1549인 학습
1183인 학습
32909인 학습
이미지를 메인으로 사용하는 섹션이 있어요. 문제는 이미지가 휴대폰, 태블릿, 데스크톱에서 1MB로 너무 크다는 것입니다. 이미지가 너무 커서 걱정이네요.
이미지를 메인 섹션의 배경으로 사용할 때의 모범 사례를 알고 싶습니다.
여러분의 친절한 제안과 의견에 감사드립니다.
사실 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
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
사실 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