매우 그래픽이 많이 드는 사이트를 만들 필요가 있습니다. (찢어진 종이 배경과 질감이있는 그래픽 위에 그림자가 생김) 파일 크기를 줄이는 방법 중 하나는 모든 배경 요소를 하나의 PNG로 떨어 뜨리는 것입니다. 문제는이 파일이 현재 180k입니다. 여러 GIF와 한 쌍의 PNG로 나누면 70k에 더 가깝습니다.스프라이트/PNG 그래픽이 많은 사이트, 오 마이!
정말 중요한가요? 요즘 파일 크기가 "너무 큽니다"는 무엇입니까? 파일이 180 또는 70k인지 누구든지 알 수 있습니까?
사용자가 사이트에 빠르게 액세스 할 수있는 경우 (예 : 인트라넷) 180k는 거의 문제가되지 않습니다. 반면에 사이트가 유머 감각이 약한 일반 고령자에 의해 사용된다면 아마 문제가 될 것입니다. 사용자가 GPRS를 사용하지만 끝없는 인내심을 가지고 있다면 아마 문제가되지 않을 것입니다. 사이트가로드 시간을 기다리는 인내심을 가지고있는 사람에게 백만 달러를 제공하면 전송 속도는 문제가되지 않습니다. 등등.
내가 말하는 것은 실제로 요구 사항과 제약에 달려 있습니다. 이것은 당신이 그것을 가까이에서 얻을 수 있기 전에 당신이 알아야 할 (그리고 우리에게 더 많은 도움이되도록) 많은 것들을 요구합니다.
매우 - 유효 - 답변 -하지만-단순히-나던-하십시오 - 누군가를 위해 그 성가신 downvotes을 방지하기 위해, 여기 내 대답 :
180K 표준 ADSL 모뎀의 전송 속도로 나눈 = 180KB/100KB/s = 1.8s = 참을 수 있음.
더 작은 이미지를 사용하려면 이 아닌이 있습니까? 당신이 이미 그것을 깨뜨린 것처럼 들리므로, 더 작고 빠른 방법으로 가보지 않겠습니까?
순수 상대주의 관점에서 볼 때, 70k는 다운로드 시간의 38 % 만 차지합니다 (약). 트래픽이 많거나 빠른로드 시간을 원하면 모든 비트가 도움이됩니다.
모든 별도의 이미지를 요청하는 데 걸리는 시간과 큰 이미지를 다운로드하는 데 걸리는 시간을 비교해야합니다. HTTP 요청에 문제가 있습니다.
Google의 Firefox 확장 프로그램 인 Pagespeed을 사용하여 몇 가지 테스트를 실행하여 큰 png 또는 별도의 테스트가 큰 차이가 있는지 확인하는 것이 좋습니다.
내가 생각할 수있는 한 가지 장점은 HTTP 요청 수가 줄어들뿐 아니라 모든 그래픽이 다운로드 될 때마다 점진적으로 사이트가 한꺼번에로드된다는 것입니다. 그러나 결론은 Henrik이 말한대로 요구 사항에 따라 달라집니다.
여러 이미지로 분할한다는 것은 서버를 검색하기위한 추가 연결, 각 연결 지연 및 요청 및 응답 헤더의 추가 크기를 의미한다는 것을 알고 계실 것입니다.
브라우저는 각 서버 (브라우저 버전에 따라 다름)에 대한 활성 연결 수를 제한하므로 단일 이미지를 가져 오는 것보다 시간이 오래 걸릴 수 있습니다. 제한을 해제하는 일반적인 해결 방법은 별도의 "이미지"서버 또는 동일한 호스트에 매핑되는 DNS 별칭을 사용하는 것입니다.
애니메이션을 필요로하지 않는 한 항상 GIF 이상의 PNG를 사용하는 것이 좋습니다.
먼저 이미지가 비활성화 된 상태 (alt 태그, 너비 및 높이 설정, 올바른 색상 사용)로 사이트가 잘 보이는지 확인한 다음 그룹별로 이미지를 분할하십시오. 가능한 경우 모든 버튼을 하나의 이미지로 그룹화 (css 스프라이트 시트 사용)하고 모든 테두리를 다른 이미지로 그룹화합니다.큰 이미지는 별도의 파일에 보관하십시오 (따라서 사이트 배경, 머리글).
이미지가 많을수록 브라우저가 요청을 병렬화 할 수 있습니다. 그러나 너무 많이 나누면 다른 시간에 다른 이미지가로드되어 사이트의 일부가 튀어 나오게됩니다. 약간의 상쇄 관계가 있지만 프로그래밍의 즐거움입니다. :)
이미지가 표시되기 전에 보이는 것처럼 사용자가 이미지를 다운로드하는 속도를 신경 쓰지 않아도됩니다.
당신은 성가신 upvote를 대신 얻습니다 :-) – ChssPly76