로드시 이미지 압축

Question

궁금한 점은 페이지 내의 이미지 크기를 줄여 페이지 로딩 속도를 향상시킬 수 있습니까?

예를 들어 현재 100x100에 맞춰야하는 큰 이미지 (1200x1200)가 있습니다. 이것이 jQuery를 통해 가능하거나 수동으로 수행해야합니까?

감사합니다.

Answer 1

서버에서 이미지 크기를 변경 한 다음 해당 작은 이미지를 참조하도록 페이지 HTML 또는 javascript를 변경해야합니다. jQuery는 브라우저에서 실행되므로 서버에서 1200x1200 이미지를 가져올 수없고 다운로드되기 전에 어떻게 든 100x100로 만들 수 있습니다.

그러나 이미지를 서버에서 더 작은 크기로 변경하면 페이지로드 시간이 크게 향상됩니다.

Answer 2

네, 확실히 페이지로드 속도가 빨라집니다.

그리고 서버에서 이미지 크기를 조정하는 것이 더 좋습니다.

참조 :

Should I generate each thumbnail dynamically every time it is requested, or store them on image upload?

Answer 3

당신은 WideImage 라이브러리를 사용하여 이미지를 서버 측의 크기를 조정합니다. 이 같은 지시에 는 :

WideImage::load($path) 
    ->resize(100, 100) 
    ->output("jpg"); 

당신은 당신의 이미지를로드 메모리 크기를 조정하고 원하는 형식으로 데이터를 반환합니다.

Answer 4

궁금한 점은 페이지 내의 이미지 크기를 줄여 페이지 로딩 속도를 향상시킬 수 있습니까? 이것은 jQuery를 통해 가능할 수 있습니까?

아니요. 이렇게하면 브라우저가 네트워크를 통해 큰 이미지를 다운로드 한 다음 크기를 줄이기 위해 처리해야합니다.

속도를 높이려면 서버를 떠나기 전에 이미지를 작게 만들어야합니다.

이렇게 수동으로 할 필요는 없습니다. 이미지 크기 조정은 프로그래밍 방식으로 수행 할 수 있습니다.