응답 성있는 목적으로 이미지 크기 조정의 성능 문제를 해결하는 방법은 무엇입니까?

Question

일부 이미지의 경우 페이지 크기에 따라 이미지의 크기를 조정하여 반응이 좋도록하는 것이 좋습니다.

<img class="img_scale" src="img.png" alt"this img doesn't have width and height 
definition"> 

CSS : 이미지가 빌보드 배경 이미지 아니거나하지 유연한 상자에 경우

.img_scale{width:100%; height:100%; margin:0 auto; height:auto !important;} 

이 솔루션은 .. 완벽하게 작동 그래서 내가 jQuery를 사용하는 대신에 이미지를 확장하고 싶습니다 플러그인.

그러나 이미지 크기를 조정하면 다시 칠하고 많은 성능 문제가 발생한다고 종종 말합니다.

무엇을합니까? 이미지 스케일링의 성능 문제를 극복 할 수있는 솔루션이 있습니까?

Answer 1

체크 아웃 this article from Smashing Magazine. 저자는 고려해야 할 모든 것에 대해 아주 자세하게 설명하고 가능한 해결책을 제시합니다.

Answer 2

"성능 문제"가 무엇인지에 따라 달라질 수 있습니다. 브라우저에서 크기를 조정하거나 문제를 다시 처리하는 데 시간이 걸릴 염려가있는 경우 이미지에서 max-width : 100 %를 사용하고 Foundations Framework 또는 부트 스트랩과 같은 반응 프레임 워크를 사용하여 이미지 컨테이너의 너비를 설정하는 것이 좋습니다.

느린 모바일 네트워크를 통해 모바일 장치로 이미지를 다운로드하는 데 시간이 걸릴 염려가있는 경우 이미지가 확대되거나 잘 리기 전에 이미지의 크기를 조정하거나 잘라야합니다. 클라이언트 브라우저에서이 작업을 수행하는 것은 너무 늦습니다. 이 작업을 즉시 수행하거나 img.src를 중단 점을 기반으로하는 여러 크기의 이미지 중 하나로 대체 할 수 있습니다.

즉석에서 반응 형 이미지를 확대 또는 자르려면 Pixtulate과 같은 서비스를 사용할 수 있습니다. 그들은 자동으로 컨테이너의 크기를 감지하고, 서버에 크기를 보내고, 페이지로드가 완료되기 전에 이미지 서버 측의 크기를 실시간으로 재 지정하는 JavaScript를 제공합니다.