CSS Sprites 기술의 최적화와 관련하여 우리는 얼마나 할 수 있고 요청 수를 얼마나 줄일 수 있습니까? 이는 일방적으로 이루어질 수 없으며 모든 것은 XHTML, CSS 및 CSS Sprites 이미지 간의 협력에 달려 있습니다. 지금까지는 절대적인 최적화 방법이 없습니다. 이것이 제가 프로젝트에서 CSS Sprites 이미지와 XHTML 사이의 관계를 자주 측정하는 이유입니다. 다음은 이미지 자르기 및 XHTML 구현의 몇 가지 방법입니다. 이미지 최적화.
이미지 최적화
애니메이션이 아닌 GIF의 경우 동일한 효과를 얻을 수 있고 파일 크기를 10%-30% 절약할 수 있으므로 PNG8을 사용하는 것이 좋습니다.
Fireworks와 비교하여 Photoshop은 동일한 품질의 PNG 이미지를 내보내지만 크기가 약간 더 큽니다. Fireworks에서는 이에 상응하는 압축 최적화를 수행했지만 최상의 압축을 달성하지는 못했습니다.
내가 아는 디자인 소프트웨어는 PNG 이미지 처리 시 최적의 압축을 달성하지 못하며, 이미지 크기에는 여전히 일정량의 압축 공간이 있습니다. 왜곡 없는 압축 최적화를 달성하기 위해 아래에 소개된 "이미지 최적화 도구"를 사용해 볼 수 있습니다.
이미지 용량 및 크기 측면에서 크기는 100K 이내(국가별 최적의 SIZE 요구 사항에 더 부합)를 유지하고, 크기는 800px(최적 크기)을 권장합니다. (권위 있는 인사로부터 배운 내용이라 자세한 내용은 확인할 방법이 없습니다)
CSS Sprites 이미지 자르기 기법
CSS Sprites 이미지 순서와 결합된 이미지는 위에서 아래로, 왼쪽에서 오른쪽으로 추가됩니다. 배경 위치는 일반적으로 숫자의 조합을 사용하여 위치를 지정하므로 유지 관리로 인해 발생하는 불필요한 문제를 줄일 수 있습니다.
CSS Sprites 이미지에서는 파일 크기가 커지고 파일 크기가 커지므로 일정한 간격을 유지하는 것은 권장되지 않습니다.
CSS 스프라이트에서는 가깝거나 동일한 색상을 결합하면 색상 수가 줄어들 수 있습니다. 색상 수가 적은 이미지의 파일 크기는 상대적으로 작기 때문입니다.
동일한 크기의 CSS 스프라이트 이미지에는 큰 간격이 있으며, 이로 인해 대부분의 경우 크기가 어느 정도 증가하므로 CSS 스프라이트 이미지에는 간격이 없어야 합니다.
동일한 크기의 CSS Sprite 이미지 중에서 세로로 배열된 이미지는 가로로 배열된 이미지보다 파일 크기가 더 큽니다. 데모
CSS Sprites 이미지에서 가로로 정렬된 이미지는 세로로 정렬된 이미지보다 파일 크기가 더 큽니다. 데모
이미지 균등 병합: CSS Sprites 이미지를 적용할 때 공간을 절약하고 볼륨을 줄이기 위해 동일한 이미지를 적절하게 병합합니다. 데모
병합할 필요가 없는 이미지 구별: 현재 사용자가 하나의 상태나 레벨만 표시하기로 결정한 경우 다른 레벨이나 상태의 이미지를 병합할 필요가 없습니다. 데모
골든 커팅 위치: CSS Sprites 이미지의 오른쪽 또는 왼쪽의 가장 유연한 위치는 아이콘을 텍스트 앞에 배치하기에 가장 적합한 위치이므로 다른 CSS Sprites 이미지의 방해를 받지 않으며, 특정 선 너비를 예약할 필요가 없습니다.