색상을 기반으로 CSS 스프라이트를 만듭니다.

Question

페이지에 표시하고 싶은 큰 썸네일 세트가 있습니다 (200 개 이상). CSS 스프라이트를 사용하여 HTTP 요청을 최소화하기 위해로드하고 싶습니다. 나는 그들 모두를 하나의 거대한 파일에 넣는 것이 나쁜 생각이라고 생각하지만, 약 6 개의 40-50 썸네일 파일로 나누는 것은 잘 작동해야합니다.

모든 썸네일은 상당히 낮은 색상 (품질 낙하없이 256 색으로 축소 될 수 있음)이지만 총계에서 모든 썸네일은 훨씬 더 많은 색상을 커버합니다.

그렇다면 색상을 기반으로 그룹화하는 쉬운 방법이 있습니까? 나중에 Imagemagick 또는 온라인 스프라이트 도구와 함께 스티치 할 수 있기 때문에 각 파일 그룹을 별도의 폴더에 넣는 것은 괜찮습니다. 그러나 그 모든 것을 하나로 (CSS와 함께)하는 것도 좋을 것입니다.

업데이트 : 색상 별 그룹화 이유 :
아이디어는 더 많은 대역폭을 절약하는 것입니다. 대부분 10 개의 파란색 썸네일, 10 녹색 및 10 개의 빨간색이 있다면 3 개의 이미지로 결합하여 각각 256 개의 색상으로 줄일 수 있습니다. 썸네일을 혼합하면 256 색으로 줄이면 이미지가 품질이 떨어집니다.

Answer 1

글쎄, 나는 하나의 "색조"의 손으로 샘플을 잡고 첫 번째 N 이미지를 찍어 만든 몽타주와 비교하여 약간의 테스트를 수행했습니다. 몇 킬로 바이트의 차이 만 있었는데, 내가 찾은 후 약 30 바이트로 감소했습니다. pngcrush. Fanastic 도구!

요컨대, 내 크랙 팟 아이디어는 반증되었습니다. :피

Answer 2

첫째, 나는 너무 걱정하지 않고 24 비트 PNG로 절약하는 것이 좋습니다. 이 작업을 수행하여 이미지가 훨씬 커지는 것처럼 보이지만 썸네일이 작 으면 현재 HTTP 헤더와 함께 사용중인 많은 양의 대역폭이있을 수 있습니다. 이미지를 더 좋아 보이게하십시오.

그러나 프로세스를 자동화하려면 평균 색상을 사용해 볼 수 있습니다 (이에 가까운 작업을 수행하는 한 가지 방법은 1x1로 크기를 조정 한 다음 해당 픽셀의 RGB 색상을 보는 것입니다). 이미지 당 색상이 있으면 HSV로 변환하고 색조별로 정렬하십시오. 그런 다음 해당 정렬 순서에 따라 묶을 수 있습니다. 실제로 이것을 시도하지는 않았지만 수용 가능한 결과를 얻을 수 있습니다.

번들로 잡는 이미지 수를 조정하면 출력 품질에도 영향을 미칩니다. 파일 당 30 개의 이미지를 넣을 때 짜증이 나면 25를 시도하고 얼마나 많은 차이가 있는지 확인하십시오. 실제로 파일 수에 대해 생각하는 것이 더 똑똑 할 수 있습니다 ...

• 모두 단일 파일에 넣으십시오.
• 색상이 충분하지 않기 때문에 나쁘게 보입니까?
• 추가 파일 하나를 추가하고 모든 파일에서 똑같이 분할하십시오. GOTO 2 단계.

Answer 3

이제 이것은 이론적 인 블라버링에 지나지 않지만 애니메이션 GIF는 프레임 당 뚜렷한 색상 팔레트를 지원한다는 것을 이해합니다. 이론적으로, 각 이미지를 애니메이션의 별도의 프레임 (대부분의 프레임을 투명하게 유지)에 배치하고 프레임 사이의 일시 중지 시간을 1ms로 설정할 수 있습니다. 애니메이션을 한 번만 통과하도록 설정하면 (잠재적으로) 이미지 당 256 색으로 감소 된 효과적인 CSS 스프라이트를 가질 수 있습니다.

내가 말했듯이, 이론적 인 멍청이.