이미지의 CSS 크기 조정은 여전히 ​​나쁜 생각입니까?

원본 이미지의 실제 이미지가 아닌 이미지에 너비 / 높이 속성을 사용하는 것은 항상 나쁜 생각입니다. 그것은 불완전한 이미지 또는 다운로드 크기를 필요 이상으로 의미 할 수 있습니다.

그러나 이것이 여전히 문제입니까? 업 사이징 사진을 제안하지는 않지만 다운 사이징은 원본과 크기가 크게 다르지 않으면 문제가되지 않습니다.

예를 들어 600x400의 사진이 있고 너비가 400px입니다. 대부분의 최신 브라우저는 이미지를 축소하고 렌더링이 여전히 괜찮은 것처럼 보입니다.

자, 이것에 대한 모든 사람들의 견해는 무엇입니까?

스케일링에 대해 걱정하지 마십시오 (대부분의 브라우저는 스케일링 된 이미지를 내 경험에 따라 잘 보이게 만듭니다). 최종 사용자에게 보낸 페이로드의 크기에 대해 걱정하십시오.

물론, 사용하려는 의도없이 전송하는 여분의 픽셀에 대해 양쪽 끝에 약간의 대역폭 만 낭비한다고 주장 할 수 있지만 시간 비용도 있습니다.

필요한 크기보다 큰 크기로 전송하는 모든 이미지에 대해 사용자의 페이지로드에 약간의 지연이 발생합니다. 몇 개의 이미지 만있는 웹 사이트의 경우 이는 문제가되지 않지만 많은 지원 자산이있는 사이트의 경우 지연 이 현저하게 시작되고 지연으로 인해 비용이 발생합니다 .

또한, 작은 대역폭 비용과 관련하여 사이트의 트래픽이 증가함에 따라 작은 대역폭 비용도 발생합니다.

따라서 회사 비용을 절약하고 30 초 동안 이미지 크기를 직접 조정해야합니다! :)

항상 그렇듯이 벤치마킹을 수행하지만 앱이 실제로 인기가 있거나 중요하지 않은 한 너비를 자주 변경 해야하는 상황에 있다면 600에서 400으로 크기를 줄이는 것에 대해 걱정하지 않아도됩니다. 일회성 convert -geometry 400x photo1.jpg photo2.jpg이라면 확실히 실행 하지만 빠르게 반복하는 앱이라면 성능 영역 내에서도 걱정해야 할 더 중요한 사항이 있습니다. 예를 들어 레이턴시; 예를 들어 이미지를 선제 적으로로드합니다.

이미지 크기는 큰 이미지 크기가 느리게로드 (모바일 광대역)되어 트리플 렌더링에 영향을 미치며 렌더링하는 데 시간이 오래 걸리고 (저급 하드웨어) 한 번 렌더링되면 고해상도에서 완전히 보이지 않는 모바일 장치에서 중요 할 수 있습니다. 어쨌든.

반응 형 이미지를 살펴볼 수도 있습니다. 예를 들어 서버에서 이미지를 자동으로 크기를 줄인 다음 캐싱하는 등 많은 작업이 수행되었습니다.

문제는 페이로드입니다. 브라우저가 렌더링하는 크기는 거의 모든 크기 (더 작은 크기의 대화)입니다.

대용량 사이트의 경우 단일 바이트 만 중요합니다. 원치 않는 데이터를 보내지 않으려 고합니다.

나쁜 생각으로 말하면, 너비 / 높이를 몇 픽셀 씩 조정하거나 10 또는 20 픽셀 일 수는 있습니다. 그러나 큰 이미지를 축소판으로 축소하는 경우 매우 나쁜 생각입니다. :)