집 > 기사 > 웹 프론트엔드 > CSS의 스프라이트 이미지에 대한 자세한 소개

CSS의 스프라이트 이미지에 대한 자세한 소개

黄舟원래의: 2017-10-26 10:06:522373검색

CSS Sprite CSS Sprite라고도 불리는 CSS Sprite는 CSS 이미지 병합 기술입니다. 이 방법은 작은 아이콘과 배경 이미지를 하나의 이미지로 병합한 다음 CSS 배경 위치 지정을 사용하여 그림의 원하는 부분을 표시하는 것입니다. 표시됩니다. CSS Sprites 기술은 중국의 일부 사람들에 의해 CSS Sprite라고 불립니다. 실제로 웹 페이지의 일부 배경 이미지를 하나의 이미지 파일로 통합한 다음 CSS "배경 이미지", "배경 반복" 및 "배경 위치"를 사용합니다. 배경 위치 지정의 경우, background-position은 숫자를 사용하여 배경 이미지를 정확하게 배치할 수 있습니다. CSS 스프라이트 이미지의 기본 원리는 웹 사이트에 사용되는 일부 이미지를 단일 이미지로 통합하여 웹 사이트에 대한 HTTP 요청 수를 줄이는 것입니다. . 이미지는 CSS 배경 및 배경 위치 속성을 사용하여 렌더링됩니다. 이는 태그가 태그가 아닌 CSS에서 정의된다는 의미입니다.

CSS 지식 포인트: 배경 이미지backgorund-위치

CSS Sprite 기능:

작은 아이콘에 비해 파일 크기와 서비스 요청을 절약합니다

. 조각난 웹페이지 배경 이미지를 모두 통합하면 조각난 배경 이미지를 여러 번 로드할 필요 없이 이미지에 대한 http 요청 수를 효과적으로 줄일 수 있습니다. 따라서 이를 합리적으로 사용하면 웹 페이지의 로딩 속도를 효과적으로 향상시킬 수 있습니다. 일반적으로 PNG-24 파일 형식으로 저장해야 합니다.

풍부하고 다채로운 색상으로 본체 표면을 디자인할 수 있습니다.

CSS 스프라이트 이미지의 어려움:

각 작은 아이콘의 크기를 미리 결정해야 합니다

작은 아이콘 사이의 거리에 주의하세요조심하고 인내심을 가지세요

PNG-24의 사진 형식: PNG-24는 버를 줄일 수 있습니다.

CSS Sprite의 장점

웹 페이지 이미지를 로드할 때 서버에 대한 요청 수를 줄입니다.

대부분의 배경 이미지와 작은 아이콘을 병합하여 어느 위치에서나 쉽게 사용할 수 있으므로 다른 위치의 요청만 허용됩니다. 하나의 이미지를 호출해야 하므로 서버에 대한 요청 수를 줄이고 서버 부담을 줄이는 동시에 페이지 로딩 속도를 향상시키고 서버 트래픽을 절약합니다.

페이지 로딩 속도 향상

스프라이트 기술의 장점 중 하나는 이미지 로딩 시간(스프라이트가 많을 때 단일 이미지의 로딩 시간)입니다. 필요한 이미지로 구성된 GIF는 모든 이미지를 합친 크기보다 훨씬 작습니다. 단일 GIF에는 연관된 색상표가 하나만 있는 반면, 각 분할 GIF에는 자체 색상표가 있으므로 전체 크기가 늘어납니다. 따라서 단일 JPEG 또는 PNG 스프라이트의 크기는 여러 이미지로 분할된 이미지의 전체 크기보다 작을 가능성이 높습니다.

마우스가 롤오버될 때 일부 버그를 줄입니다.

IE6은 마우스가 롤오버되는 a:hover에 배경 이미지를 적극적으로 미리 로드하지 않습니다. 따라서 여러 그림을 사용하는 경우 마우스를 롤오버할 때 마우스가 흰색으로 깜박입니다. . CSS Sprite를 사용하면 사진 한 장이면 충분하므로 이런 현상은 발생하지 않습니다.

CSS 스프라이트 이미지 부족

CSS 스프라이트의 가장 큰 문제는 메모리 사용량입니다.

스프라이트 이미지를 아주 세심하게 구성하지 않으면 쓸데없는 공백을 많이 사용하게 됩니다. 한 가지 예는 WHIT TV 웹사이트에서 가져온 것입니다. 이는 1299×15,000픽셀 PNG 이미지입니다. 또한 매우 잘 압축되어 있습니다. 실제 다운로드 크기는 약 26K에 불과하지만 브라우저는 압축된 이미지 데이터를 렌더링하지 않습니다. 이 이미지를 다운로드하고 압축을 풀면 약 75MB(1299 * 15000 * 4)의 메모리를 차지하게 됩니다. 이 이미지가 알파 투명도를 사용하지 않으면 1299 * 15000 * 3으로 최적화되지만 렌더링 속도가 저하됩니다. 그럼에도 불구하고 우리는 55MB를 이야기하고 있습니다. 이 이미지의 대부분은 실제로 비어 있으며 아무 것도 없고 유용한 내용도 없습니다. WHIT 홈 페이지를 로드하기만 하면 해당 이미지 하나 때문에 브라우저의 메모리 사용량이 최소 75MB 이상으로 증가합니다. (PS: 안타깝게도 최근 웹사이트가 개정되어 기사에 언급된 사진이 더 이상 존재하지 않습니다.)

브라우저의 확대/축소 기능에 영향을 미칩니다.

CSS Sprite를 사용하는 페이지가 일부 브라우저에서 제공하는 전체 페이지를 사용하는 경우 확대/축소할 때 기능이 확대되면 브라우저는 이러한 이미지 가장자리의 동작을 수정하기 위해 몇 가지 추가 작업을 수행해야 합니다. 기본적으로 Sprite의 인접한 이미지가 "표시"되는 것을 방지하기 위한 것입니다. 이는 작은 이미지에는 문제가 되지 않지만 큰 이미지에는 성능 저하가 발생합니다.

퍼즐 유지관리가 번거롭습니다

너무 많은 사진을 합치려면 인내심이 필요합니다. 동시에, 이 이미지를 서로 영향을 주지 않고 어떻게 사용할 수 있을지 항상 고민해야 합니다. 크고 얇은 이미지와 넓고 짧은 이미지를 조합하는 것은 쉽지 않습니다. Sprite에서 그림을 수정하려면 전체 그림을 수정해야 하므로 작업량이 확실히 늘어납니다.

CSS 작성을 어렵게 만듭니다

CSS Sprite가 너무 복잡하면 CSS 코드의 양과 난이도가 크게 증가하여 유지 관리 및 수정이 어려워집니다.

CSS Sprite에서 호출한 그림은 인쇄할 수 없습니다.

CSS Sprite에서 호출한 그림은 @media에 특별히 인쇄 문을 추가하지 않으면 인쇄할 수 없습니다.

Sprites의 잘못된 사용은 접근성에 영향을 미칩니다.

일부 새로운 개발자는 HTTP 요청 수를 절약하기 위해 모든 이미지를 배경 이미지로 처리합니다(이것이 CSS Sprites가 항상 강조한 이점입니다). 중요한 정보. 그 결과 접근성이 부족하고 HTML의 제목과 대체 항목의 잠재적 이점이 감소되는 웹사이트가 탄생했습니다.

따라서 CSS 스프라이트 자체에는 아무런 문제가 없으며 접근성 문제를 일으키지 않습니다(실제로 올바르게 사용하면 접근성이 향상됩니다). 그러나 옳든 그르든 스프라이트를 과도하게 사용하면 접근성과 생산성 모두를 위한 웹 페이지 구축 프로세스를 방해할 수 있습니다.

CSS Sprite CSS Sprite라고도 불리는 CSS Sprite는 CSS 이미지 병합 기술입니다. 이 방법은 작은 아이콘과 배경 이미지를 하나의 이미지로 병합한 다음 CSS 배경 위치 지정을 사용하여 해당 부분을 표시하는 것입니다. 표시되어야 하는 이미지입니다. CSS Sprites 기술은 중국의 일부 사람들에 의해 CSS Sprite라고 불립니다. 실제로 웹 페이지의 일부 배경 이미지를 하나의 이미지 파일로 통합한 다음 CSS "배경 이미지", "배경 반복" 및 "배경 위치"를 사용합니다. 배경 위치 조합은 숫자를 사용하여 배경 이미지의 위치를 정확하게 찾을 수 있습니다

CSS 스프라이트 이미지의 기본 원리는 웹 사이트에서 사용되는 일부 이미지를 하나의 이미지로 통합하여 숫자를 줄이는 것입니다. 귀하의 웹사이트에 대한 HTTP 요청의 수입니다. 이미지는 CSS 배경 및 배경 위치 속성을 사용하여 렌더링됩니다. 이는 태그가 태그가 아닌 CSS에서 정의된다는 의미입니다.

CSS 지식 포인트:

배경 이미지

backgorund-위치

CSS 스프라이트 기능:

작은 아이콘에 비해 파일 크기와 서비스 요청 시간을 절약합니다. 조각난 웹페이지 배경 이미지를 모두 통합하면 조각난 배경 이미지를 여러 번 로드할 필요 없이 이미지에 대한 http 요청 수를 효과적으로 줄일 수 있습니다. 따라서 이를 합리적으로 사용하면 웹 페이지의 로딩 속도를 효과적으로 향상시킬 수 있습니다.

일반적으로 PNG-24 파일 형식으로 저장해야 합니다.

풍부하고 다채로운 색상으로 본체 표면을 디자인할 수 있습니다.

CSS 스프라이트 이미지의 어려움:

각 작은 아이콘의 크기를 미리 결정해야 합니다

작은 아이콘 사이의 거리에 주의하세요

조심하고 인내심을 가지세요

PNG-24의 사진 형식: PNG-24는 버를 줄일 수 있습니다.

CSS Sprite의 장점

웹 페이지 이미지를 로드할 때 서버에 대한 요청 수를 줄입니다.

페이지 로딩 속도 향상

마우스가 롤오버될 때 일부 버그를 줄입니다.

CSS Sprite 이미지 부족

CSS Sprite의 가장 큰 문제는 메모리 사용량

스프라이트 이미지를 매우 주의 깊게 구성하지 않으면 쓸모없는 공백이 많이 발생하게 됩니다. 한 가지 예는 WHIT TV 웹사이트에서 가져온 것입니다. 이는 1299×15,000픽셀 PNG 이미지입니다. 또한 매우 잘 압축되어 있습니다. 실제 다운로드 크기는 약 26K에 불과하지만 브라우저는 압축된 이미지 데이터를 렌더링하지 않습니다. 이 이미지를 다운로드하고 압축을 풀면 약 75MB(1299 * 15000 * 4)의 메모리를 차지하게 됩니다. 이 이미지가 알파 투명도를 사용하지 않으면 1299 * 15000 * 3으로 최적화되지만 렌더링 속도가 저하됩니다. 그럼에도 불구하고 우리는 55MB를 이야기하고 있습니다. 이 이미지의 대부분은 실제로 비어 있으며 아무 것도 없고 유용한 내용도 없습니다. WHIT 홈 페이지를 로드하기만 하면 해당 이미지 하나 때문에 브라우저의 메모리 사용량이 최소 75MB 이상으로 증가합니다. (PS: 안타깝게도 최근 웹사이트가 개정되어 기사에 언급된 사진이 더 이상 존재하지 않습니다.)