웹 사이트 배경 이미지 반복 - 크기 대 속도
https://stackoverflow.com/questions/1530299
-
20-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
누군가가 배경 이미지로 테스트를했는지 궁금합니다. 우리는 일반적으로 적어도 한 방향 (x 또는 y 또는 둘 다)으로 반복되는 배경을 만듭니다.
예시
X 방향으로 반복되는 그라디언트 배경이 있다고 가정 해 봅시다. 그라디언트 높이는 400px입니다. 우리는 몇 가지 가능성이 있습니다. 가능한 한 작은 이미지 (1 픽셀 너비 및 400 픽셀 높이)를 만들거나 400 픽셀 높이의 더 큰 이미지를 만들 수 있습니다.
관찰
그라디언트는 400 픽셀 높이이기 때문에 256 개의 적응 형 색상 만 저장할 수 있기 때문에 GIF 형식을 선택하지 않을 것입니다. 어쩌면 우리의 그라디언트가 미묘하다면, 그다지 많지 않기 때문에, 아마도 우리는 아마도 이미지를 24 비트 PNG 이미지로 저장하여 완전한 그라디언트 세부 사항을 보존 할 것입니다.
양도 논법
반복 될 1 × 400 px 크기의 이미지를 만들면 N 수평으로 또는 100 × 400 PX 크기의 이미지를 만들어 브라우저에서 렌더링 속도를 높이고 이미지 파일 크기가 더 큰 이미지를 생성해야합니다.
그래서. 이미지 크기 대 렌더링 속도? 어느 쪽이이기나요? 누구든지 이것을 테스트하는 데 관심이 있습니까? 브라우저 렌더링 속도와 가능한 작은 이미지와 관련하여 Redraw 깜박임 ...
해결책
더 큰 타일을 브라우저의 캐시에 넣을 수 있기 때문에 렌더링 속도는 병목 현상입니다.
나는 실제로 주요 브라우저에서 이것을 시도했으며 적어도 일부는 매우 작은 타일에서 눈에 띄게 느려졌습니다.
따라서 비트 맵 크기를 늘리면 우스운 큰 파일 크기, 나는 확실히 그것과 함께 갈 것입니다. 직접 테스트하고보십시오. (여전히 많은 사람들이 그것에 붙어 있기 때문에 IE6을 포함해야합니다).
비트 맵 크기와 파일 크기 사이의 균형이 잘 맞을 수 있지만 일반적으로 50x400, 100x400, 200x400 및 400x400 픽셀을 시도해보십시오.
다른 팁
너비가 1px 인 백그라운드 이미지가 있고 반복되는 경우 브라우저의 렌더링 성능에 큰 차이가있을 수 있음을 알았습니다. 약간 더 큰 치수를 가진 배경 이미지를 갖는 것이 좋습니다. 따라서 너비가 100px의 이미지는 브라우저에서 훨씬 더 잘 작동합니다. 이것은 웹 사이트의 드래그 가능한 레이어에서 반복 된 배경 이미지를 사용할 때 특히 작동합니다. 드래그-성능은 종종 반복되는 배경 이미지로 꽤 나쁘다.
여분의 몇 줄을 보내는 비용으로 (1-2 만 예제) .8K -1.6KB (8 비트로 도망 갈 수있는 경우) 2.4KB -4.0KB를 위해. 24 비트
2 픽셀 열이 더 많음을 의미합니다. 배경을 블리팅하는 데 필요한 반복은 최대 1.6KB (8 비트) 또는 4KB (24 비트)의 경우 1/3으로 절단됩니다.
1 개의 여분의 열조차도 요소 너비의 절반까지 필요한 블리팅을 절반으로 반으로합니다.
배경이 56.6k 모뎀에 대해 1 초 이내에 완료되면 충분히 간주합니다.
만약에 이미지의 작은 치수는 렌더링에 부정적인 영향을 미칩니다. 나는 괜찮은 브라우저가 타일링하기 전에 몇 번 내부적으로 이미지를 블립 할 것이라고 확신합니다.
즉, 나는 1 픽셀 이미지 크기를 사용하지 않는 경향이 있으므로 크기를 조정하지 않고 이미지를 명확하게 볼 수 있습니다. PNG 압축은 대부분의 상황에서 파일 크기에 거의 비용이 많이 드는 비용으로이를 처리하기에 충분합니다.
렌더링 엔진이 타일링을하는 대신 이미지 다운로드 인 병목 현상에 돈을 넣었으므로 1 픽셀 와이드 옵션으로 가십시오.
또한 24 비트 PNG는 채널 당 8 비트 (빨간색, 녹색 및 파란색) 만 얻기 때문에 중복됩니다.
나는 일반적으로 사이에 들어가는 것을 선호합니다. 1pixel 너비는 아마도 그라디언트가 조금 불분명 해 보일 것입니다. 그러나 5pixel 너비와 같은 일을 할 수있어 페이지를 가로 질러 일관성과 명확성을 유지하기에 충분한 그라디언트에 충분한 공간을 제공합니다. 그러나 나는 당신이 할 수 있다고 제안 할 것입니다. 단일 이미지에 더 많은 패턴과 이미지를 추가 한 다음 배경 위치를 사용합니다 (CSS 스프라이트) 50KB의 단일 이미지를 다운로드하기 때문에 배치하려면 브라우저가 서버에 대한 요청이 줄어들 기 때문에 50KB 이미지에 대한 시간이 줄어 듭니다.
나는 이것을 벤치마킹하지 않았지만 대부분의 최신 컴퓨터에서는 렌더링이 문제가되지 않는 반면, 이미지 다운로드 시간을 항상 저장하고 싶다고 확신합니다. 나는 종종 1px 유형의 그래픽을 사용합니다.
