페이지로드 시간을 개선하기 위해 큰 이미지의 파일 크기를 줄이려면 어떻게해야합니까?

Question

내 웹 사이트의 홈 페이지에 다음 이미지/슬라이드가 있습니다.

홈 페이지 : https://www.atlasestateagents.co.uk/

이미지 :

https://www.atlasestateagents.co.uk/img/Liverpool-Slide.png

https://www.atlasestateagents.co.uk/img/Landlord-Slide.png

https://www.atlasestateagents.co.uk/img/Vendor-Slide.png

일부 온라인 검색 엔진 최적화 도구를 사용하는 데 나는 그들이 상당히 페이지로드에 추가하는 볼 수 있습니다 분명히 부정적인 affec을 가질 수있는 시간 SEO 성능.

사이트가 부트 스트랩 프레임 워크를 사용하고 화면 크기에 따라 위/아래로 확장되므로 이미지의 크기가 커야합니다.

파일 크기 및/또는로드 시간을 줄이기 위해 할 수있는 일이 있습니까? 이미지를 최적화하는 파일 형식 인 경우

Answer 1

파일 형식

첫 번째 및 간단한 것은 고려. 특정 이미지 파일 형식은 특정 이미지에 더 적합합니다. 예를 들어, JPG는 사진 이미지에 가장 적합합니다. 반면에 PNG는 색상이 거의없는 단순한 이미지 나 투명도를 사용하는 이미지에 가장 적합합니다. 24 비트 PNG는 사진 요소와 간단한 그래픽을 모두 포함하는 이미지에 가장 적합합니다. 8 비트 PNG는 256 색 미만의 이미지에서 파일 크기를 더욱 줄일 수 있습니다.

스프라이트 및 프리 로더

로딩 시간을 감소시키기위한 유용한 방법은 더 큰 화상의 일부를 표시하는 코드이다 CSS CSS 스프라이트의 사용이다. 이 기술은 흔히 버튼의 마우스 오버 상태에 사용됩니다. 예를 들어, 스프라이트를 사용하면 이미지의 한 부분을 사이트의 단추로 표시하고 사용자가 마우스를 올릴 때마다 이미지와 다른 이미지를 단추로 표시 할 수 있습니다.

스프라이트는 대화 형 메뉴 및 단추에 자주 사용되지만 단일 이미지 파일에서 여러 사이트 이미지를 표시하는 데에도 사용할 수 있습니다. 이렇게하려면 브라우저가 예를 들어 3 개 또는 4 개의 이미지 대신 하나의 이미지 만 다운로드하면됩니다.

스프라이트 외에 이미지는 JavaScript, jQuery, Ajax 또는 CSS를 사용하여 미리로드 할 수 있습니다. 이미지가 사전로드되면 브라우저는 이미지를 다운로드하거나 미리로드 한 다음 사용자가 액세스 할 때 이미지를 즉시 표시합니다. 미리로드하면 이미지가 많은 웹 사이트, 특히 사진 갤러리가있는 사이트의로드 시간을 크게 줄일 수 있습니다. 이미지로드 시간을 단축하는 대신 이미지 때로는

가장 좋은 방법의 CSS를 사용

전혀 이미지를 사용하지 않는 것입니다. CSS 개선으로 인해 브라우저는 순수 CSS를 사용하여 특정 "이미지"를 렌더링 할 수있었습니다. 이제 CSS를 사용하여 둥근 사각형, 그라디언트, 그림자 및 투명한 이미지를 생성 할 수 있습니다. CSS를 사용하여 이미지를 교체하기 전에 모든 브라우저가 이러한 기술을 항상 지원하지는 않으므로 브라우저 호환성을 신중하게 고려해야합니다.

이미지를 사용할 때 이미지 최적화 및로드 시간 단축에 대한 좋은 제안을 제안합니다.

http://www.getsnappy.com/web-optimization/improving-page-load-times.html

http://www.monitis.com/blog/2011/05/29/30-tips-to-optimize-htmlcssimages-for-smooth-web-experience

http://www.practicalecommerce.com/articles/3354-Optimizing-Images-to-Reduce-Load-Times

Do Images Load Faster in HTML or CSS?