Menyer utan många bilder
Om du vill skriva en rollover-meny utan för många bilder kan du titta på ex-vis
Eric Meyer's demo av CSS rollovers. Just den här varianten kräver inga bilder alls. Jag har använt en enklare variant av samma princip för att markera vilken länk man håller muspekaren över på min
klubbs sida.
Cachehantering
För att se till att en fil hämtas från cache så ofta som möjligt behöver du för det mesta bara se till att den anropas med samma filnamn varje gång, inklusive parametrar. 1.gif?p=123 är inte samma fil som 1.gif?p=234, åtminstone inte enligt webläsarens cachehantering.
Utöver det kan du kontrollera vilken livslängd servern gett filen genom att öppna din webläsares cache. (I IE är det under Verktyg -> Internet-alternativ -> Inställningar -> Visa filer.) Titta vad som står i kolumnen "Förfaller". Om servern ger en onödigt kort livslängd, eller en tid som redan passerats när bilden skickades kan du kolla med din serveradmin hur du ändrar det (vissa sätter förfallodatum en timme tillbaka i tiden för att tvinga webläsaren att alltid be om en färsk kopia).
Filer som genereras av scriptkod får ofta en kort livslängd, och även om de sätts till att ha lång livslängd så kan webläsaren bli lurad av att tiden då filen skapades hela tiden sätts till aktuellt datum och klockslag. Om filen byter utseende väldigt sällan, se till att den inte får nytt "skapat-datum" varje gång ett anrop efter den görs. Till exempel kan du generera den en gång om dagen med ett "cron-jobb" och spara den som en statisk fil. OBS! Testa sitens hastighet först och känn efter om du vill lägga ner det jobb det kan krävas för att sätta upp sådant, det är inte trivialt och behövs för det mesta inte!
Att slå ihop bilder
Jämför tiden för att ladda de här två sidorna med en bild av en katt:
En bild |
Upphackad. Om du vill se det igen, tryck Ctrl+F5 för att ladda om alla delar av sidan utan att använda din cache. För en användare i Kanada (där hans server står) skulle det inte alls märkas lika stor skillnad.
Du behöver inte slå ihop alla bilder som ligger bredvid varandra, det måste avgöras från fall till fall om man tjänar på det. Om du vill kunna använda ett sidhuvud med en plats för rubrik på flera sidor så är det vettigt att låta rubriken vara ett "hål" i bilden, och kapa upp den runtom. Framförallt tycker jag det ser oprofessionellt ut att göra för stora imagemaps, och om man inkluderar text i bildblocken blir sidan svårläst för synskadade. Dessutom blir de som saknar bredband ledsna om man lägger in text i en bild för att kunna slå ihop bilder på varsin sida om den. Om texten kommer för sig kan de börja läsa direkt.
99kronor är ett exempel på några som gått för långt med att slå ihop bilder, om man tittar på deras förstasida.
Manufrog har också mycket av sin förstasida i två jpeg-filer på 75 + 128 kB, men där stör det lite mindre eftersom inramningen är bättre och viss navigering är text. För båda sidorna gäller att om de hade haft samma design uppdelad på 20-30 småbilder (av samma totala storlek) hade den sammanlagda nedladdningstiden blivit märkbart längre (men de först nedladdade bitarna och texten hade kanske visats snabbare, sådant kan också vara värt en del beroende på designen).
För ett exempel på en som hackar upp en bild onödigt mycket, titta t ex på
det här demot. Om du har ungefär likadan uppkoppling som jag så laddas de sex delbilderna i "Antique Vessels - History"-rutan mycket snabbt var för sig, men man ser ändå att de kommer en eller ett par i taget. "History"-biten kan man ju vilja ha som en utbytbar del, men de andra delarna skulle kunna slås ihop. Om man fortfarande vill ha dem i en tabell blir det åtminstone fyra bildbitar istället för sex, om man slår ihop cellerna i antingen den vänstra kolumnen eller den övre och undre raden. Man kan även använda CSS för att lägga en textruta med "History" i flytande framför en hel fyrkantig bild.
Jag hittade ett
exempel där designern gör som jag menar... tre tabellceller bredvid varandra skulle innehålla tre delar av samma bild av några personer. De kommer alltid att visas bredvid varandra. Då slår hon ihop de tabellcellerna och gör en stor bild istället för tre små (designern av det förra exemplet skulle gjort en per ruta). Se rad ett, kolumn tre, fyra och fem.
Fotoalbum
Ett bra exempel på en sida med många småbilder som oftast ändå inte bör slås ihop är ett fotoalbum med thumbnails. Jag sökte och hittade det här
exemplet. Hela sidan är på 422 kB och borde med bredband kunna hämtas på ett par sekunder. Hur snabb uppkoppling du än har tar det dock förmodligen över en halv minut att få ned hela sidan, då webläsaren måste be om 255 olika filer. Om du har IE-s statusrad påslagen kan du se längst ner till vänster hur den räknar ner antalet objekt i sidan som återstår.
Just med fotoalbum gör det ju dock inte så mycket, eftersom man kan titta på de första thumbnailsen medan de kommande laddas. Om man skulle slå ihop dem till en bild och göra länkarna som en imagemap vore det också mycket jobbigare att lägga till eller ta bort bilder.
Jag hoppas exemplen förklarar lite bättre vad jag menade.
/Anders Dovervik,
Stockholms Judoklubb