Multimedia tutorial - Using images on the Web

Detta dokument beskriver i detalj under vilka förhållanden man använder bilder och text, hur man kan påskynda nedladdningen av bilder samt hur man väljer ett lämpligt bildformat.

När man använder bilder

För de flesta bilder kan en bild vara bättre än tusen ord. Men det är viktigt att notera att ingen bryr sig om de som snackar för mycket. Först och främst, och mest viktigt, är att använda dokumentets grafik som ett visualiseringsverktyg och inte som obefogat dekoration. De bör stödja innehållet i texten och hjälpa läsarna att navigera i dokumentet. Användning av bilder kan göra dokumentets innehåll tydligare och kan också lägga till kommentarer eller exempel. Bilderna, diagram, kurvor, kartor och illustrationer som stödjer innehållet är naturliga och bra val. Till exempel är produktbilder en mycket viktig del av onlinekataloger och inköpsguider. Ikoner och tecken med länkfunktioner, inklusive animerade bilder, kan också vara mycket effektiva visuella vägledare för innehåll eller externa resurser. Om en bild inte spelar någon av de ovan nämnda rollerna i dokumentet, bör den kastas bort!

När du överväger att lägga till bilder i dokumentet, en annan viktig övervägning är den tidsfördröjning som kan uppstå vid överföring av dokumentet via nätverket, särskilt via en modemin. En vanlig dokument kan innehålla max 10-15 kilobytes, medan en bild kan vara så stor som flera hundra kilobytes. Dessutom är den totala nedladdningstiden för ett dokument inte bara summan av alla delar, utan också tar hänsyn till fördröjningen orsakad av nätverksbelastningen.

Baserat på anslutningshastigheten (det vill säga bandbredden,bandwidthOfta används bps eller b/s för att representera detta och det finns också en risk för nätverksblockering som kan försena anslutningen, för att ladda ner en enskild dokument som innehåller en 100 KB bild, kan det vara bäst att göra detta klockan ett eller två på natten när de flesta människor sover, med en 57.6 Kbps modemin kan det ta ungefär 15 sekunder att slutföra nedladdningen, och det kan också ta över 10 minuter att ladda ner med en 9600 bps modemin vid lunchtid. Har du fått这幅画？

Självklart, användningen av bilder och annat multimedie kommer att driva internetleverantörer att ständigt sträva efter snabbare, bättre och mer robusta sätt att leverera webbinnehåll. Snart kommer 56 Kbps-modemanslutningar att försvinna från historien, precis som 9600 bps-modem (precis som 9600 bps-modem), och ersättas av nya teknologier som kabelmodem och ADSL. Faktiskt kommer de flesta anslutningar snart att överstiga 1 Mbps-hastigheten.

Med minskande kostnader ökar användningen av nätverket, vilket leder till blockeringar. Om du försöker komma åt en överbelastad server, kommer det inte att vara möjligt att komma åt den, oavsett hur snabb din nätverksanslutning är.

När använda text

Texten är inte föråldrad. För vissa användare är text det enda tillgängliga delarna av deras dokument. Vi rekommenderar att dokument i de flesta fall bör vara tillgängliga för alla, inklusive de som inte kan se bilder eller de som har inaktiverat webbläsarens automatiska nedladdning av bildfunktioner för att förbättra prestandan på nätverksanslutningen. Även om behovet av att lägga till bilder i dokumentet kan vara mycket starkt, kan det ibland vara mer meningsfullt att använda ren text.

Dokument som konverterats från andra format till webbsidor innehåller sällan inbäddade bilder, och referenser och annat allvarligt innehåll är vanligtvis helt tillgängligt i ren textform.

När hastigheten är mycket viktig, bör du skapa rent textdokument. Om du vet att användare kan försöka få tag på ditt dokument, bör du undvika att använda bilder i dokumentet för att anpassa dig till dessa användares behov. I extrema fall kan du erbjuda en huvudsida (ledningssida) där användare har möjlighet att välja mellan två kopia av ditt verk: en med bilder och en utan bilder (flera populära webbläsare har specialikoner för bilder, som lämnar utrymme för att ladda ner bilder, och dessa platshållare kan förstöra dokumentets layout och till och med göra det omöjligt att läsa).

Om du vill att ditt dokument ska vara lätt att hitta av de många indextjänster på webben, är text den bästa formen - endast stödjer bilder, inte dekorationer och onödiga grafik. Men dessa sökmotorer ignorerar ofta bildernas existens. Om huvuddelen av innehållet på sidan tillhandahålls genom bilder, kommer det att finnas mycket liten information om ditt dokument i online-webbkataloger.

Försäkra snabbare nedladdning av bilder

Förutom att noggrant välja innehållet som ska inkluderas i dokumentet, finns det många sätt att förbättra lasten och fördröjningen som orsakas av bilder:

Håll det enkelt

En fullskärms 24-bit färggrafik tar upp större delen av nätverksbandbredden, även om den har minskats i storlek genom standardformat (t.ex. GIF eller JPEG). Därför är det bäst att använda olika bildhanteringsverktyg för att optimera bildstorleken och minska antalet färger till minsta antal pixlar. Enkelhet i din ritning, undvik landskapsfotografier och undvik stora tomma bakgrunder, onödiga ramar och andra utrymmeskrävande element. Undvik också brusningseffekter (blandning av två närliggande färger för att få en tredje färg), vilket drastiskt minskar bildens komprimerbarhet. I stället använd så mycket som möjligt lika stora områden av konsekvent färg, eftersom de är lätt att komprimera i format som GIF eller JPEG.

Återanvänd bilder

Detta är särskilt tillämpligt för ikoner och GIF-animationer. De flesta webbläsare cachar de insamlade dokumentkomponenterna i lokalt lagringsutrymme, vilket gör att de kan hämtas snabbare och använda mindre nätverksanslutning. För små GIF-animationer bör man försöka förbereda varje följdande bild så att endast de delar som förändras i animationen uppdateras, istället för att uppdatera hela bilden (detta kan också accelerera visningen av animationen själv).

Dela upp stora dokument

Detta är en allmän princip för att inkludera bilder. Många små dokumentdelar organiseras tillsammans med hyperlänkar (naturligtvis använda dem!) och effektiva innehållsförteckningar, vilket gör det lättare för användaren att acceptera. Generellt sett föredrar människor att bläddra mellan flera sidor i stället för att slösande vänta på att ladda ner en stor dokumentfil (detta liknar TV-kanalssyndrom något). Ett bra råd är att hålla varje dokument till ungefär 50 KB, så att även läsare med långsammaste anslutningen inte blir trötta.

Isolera stora grafik när det behövs

Tillhandahåll en länk för mycket stora bilder, som kan vara en förminskad bild, så att läsaren kan bestämma om de vill ladda ner hela bilden och när de vill göra det. Dessutom, eftersom sådana bilder inte blandas med andra element i dokumentet som inline-bilder, är de lätt att identifiera och lagra i lokalt lagringsutrymme för framtida användning.

Specificera bildens storlek

Slutligen, ett annat sätt att förbättra prestanda är att inkludera höjden och bredden av bildens rektangulära kant i dess etikett. Genom att specificera dessa mått kan man spara några extra steg, så att en webbläsare med utökade funktioner inte behöver ladda ner, kontrollera och beräkna bildens storlek i dokumentet. Men detta har också en nackdel. Om användaren stänger av funktionen för automatisk nedladdning av bilder, kommer webbläsaren fortfarande att visa det reserverade utrymmet med de specificerade måtten. Detta ger vanligtvis läsaren en tom ram, även om det fortfarande inte finns en lösning på detta problem, uppmuntrar vi ändå att använda dessa måttsättningar eftersom vi uppmuntrar alla beteenden som förbättrar nätverksprestandan.

JPEG eller GIF?

If the source of the image or your tool software tends to favor a certain format, you may only be able to use one of JPEG or GIF images. Now, both of these formats are widely supported by browsers, so there will be no problem with whether users can browse them.

However, we still recommend that you use certain tools to create or convert these two formats to make full use of their respective functions. For example, you can apply the transparency feature of GIF to icons and small decorative symbols. And use JPEG to compress larger color-rich images to speed up download speed.

<img> tag

The <img> tag allows the inclusion or insertion of graphic images in the current document flow of the document. For more detailed information about this tag, please refer to: