나는 여러 섹션에서 배경으로 그림을 사용하는 웹 페이지가 있습니다. 그것은 큰 것 (약 1200x1200)입니다. 그러나 내가 넣은 곳마다 몇 가지 크기가 있습니다. 예를 들어 바닥 글의 크기는 1000x1000이고 웹 페이지 중간의 한 섹션에는 200x300 크기, 머리글에는 1100x1100 크기가 있습니다.성능면에서 무엇이 더 좋습니까? 크기가있는 여러 장의 사진이 공간에 맞게 조정됩니까?
내 질문은 : 성능에 더 좋은 점은 무엇입니까? 해당 치수로 여러 사진을 만들어야합니까? 해당 장소에 더 가까워 야합니다. 브라우저에 힘쓰십시오.
여러 개의 이미지를 만들면 페이지 로딩 속도가 크게 지연되므로 브라우저가 이전에로드 한 이미지를 다시 처리하기 때문에 브라우저에서 처리하는 것이 가장 좋습니다.
하지만 기본 이미지에 비례하는 이미지에만 적용됩니다. 1200x1200 정사각형 이미지를 200x300 직사각형 크기로 조정하면 이상하게 보일 것입니다.
또 다른 것은 어떤 종류의 사진을 사용하나요? 한 색상의 그라디언트 또는 배경이라면 브라우저가 작업을 수행하도록 할 필요가 없습니다. 그러나 그것이 나무 나 인간과 같은 무언가의 그림이라면 크기를 조절하면 이상한 결과가 나옵니다.
이미지가 작고 제품 이미지와 같이 이미지가 많으면 이미지를 사전 크기 조정하고 적절한 해상도를 제공하는 것이 좋습니다. 그 이유는 간단합니다. 작은 축소판 만 필요할 때 많은 제품 이미지를 다운로드하고 렌더링하는 속도가 느립니다.
이미지는 비교적 크고 가까이 있습니다. 1200, 1100 및 1000 평방의 이미지 하나와 작은 이미지. 이 경우에는 하나의 큰 이미지를 사용하고 브라우저가 해당 캐시를 재사용하도록하는 것이 더 좋을 것이라고 생각합니다. 아마도 개인 200x300이 지원할 것입니다.
이미지를 압축 해제하는 속도가 때때로 요인이 될 수 있지만 전송 시간 및 페이지 오류로 인해 왜소기가되는 경우가 있습니다.
하지만 도움이됩니다. 대부분의 렌더링 시간은 이미지의 압축을 풀 때 사용됩니다. 확장 성은 상대적으로 빠릅니다. 공유 이미지가 동일한 비 압축 데이터 ("원시 이미지")를 재사용 할 수 있습니다. 세부 사항은 꽤 복잡하고 일상적으로 제어 할 수 없지만 시도하면 해를 끼치 지 않습니다. 렌더 시간을 절약 할 수 없더라도 최소한 메모리 캐시가 가득 차는 기회는 줄어 듭니다.
다른 브라우저는 이미지의 축척을 조정할 수 있습니다. differently, 및 그 위에 few control이 있습니다. 결과가 받아 들여지지 않으면 많은 선택의 여지가 없지만 적어도 시도해 보았습니다.
하나 이상의 이미지를 사용했는지 여부에 관계없이 이미지를 최적화하려면 mozjpeg을 사용해보십시오. Photoshop 또는 다른 일반적인 도구보다 동일한 품질의 작은 크기를 얻을 수 있습니다.
조언과 웹 페이지 제안을 해주셔서 감사합니다! 나는 그것을 호출하기 위해 또 다른 것을 사용했다 : http://resizeimage.net/ 최적화를 위해, 지금 나는 이것을 사용하여 그것을 추천하고 비교한다. – user4212648
@ user4212648 mozjpeg는 매우 특수화 된 도구입니다. 그것은 한 가지 일을 잘하지만 잘합니다. 추가 단계가 필요 하겠지만 이미지 크기에서 나는 [setup] (https://github.com/Sheep-y/tools/tree/master/mozjpeg)할만한 가치가 있다고 느낍니다. – Sheepy
하나의 큰 이미지가 항상 좋습니다.
작은 이미지가 많으면 브라우저가 많은 요청을해야합니다. 이로 인해 많은 네트워크 오버 헤드가 발생할 수 있습니다. 따라서 모든 이미지가 포함 된 하나의 큰 이미지 &을 사용하면 Image Sprites을 사용하여 이미지의 일부를 표시 할 수 있습니다. 그리고 을 사용하여 이미지를 최적화 할 수있는 @Sheepy을 제안했습니다.
이 답변에 누가 부정적인 반응을 보였습니까? –
누군가가 나를 싫어하는 것처럼 보입니다. D –
나는하지 않았다. 정말 감사 투어 답변, 정말 고마워요! – user4212648