Hvordan du angir bildestørrelse i HTML5 - dummies

Webdesignere bruker bilder til å levere viktig informasjon, direkte sidebeskrivelse og bidra til generelt utseende på en nettside. Imidlertid må du bruke bilder på riktig måte, eller risikere å redusere effektiviteten.

Bruk høyde- og breddeattributtene med elementet

for å la nettleseren vite hvor høyt og bredt et bilde er (standardenheten er piksler eller px):

Messing

De fleste nettlesere laster ned HTML og tekst tilknyttet en side før de laster ned sidegrafikken. I stedet for å la brukerne vente på at hele siden skal lastes ned, viser browsere vanligvis teksten først og fyller i grafikk etter hvert som de blir tilgjengelige.

Hvis du forteller nettleseren hvor stor en grafikk er, kan nettleseren reservere et sted for det på sidevisningen. Dette øker prosessen med å fylle grafikk - og andre ting - på nettsiden.

Du kan sjekke bredden og høyden på et bilde i piksler i et hvilket som helst bildebehandlingsprogram eller i bildevisningene som er innebygd i Windows og Mac OS. (Du kan kanskje bare se egenskapene til bildet i Windows eller Mac OS for å se dets høyde og bredde.)

En annen god bruk av høyde- og breddeattributtene er å lage fargede linjer på en side ved å bruke bare et lite farget torg. For eksempel legger denne markeringen til en 10-x-10-px blå boks til en nettside:

Bruk høyde- og breddeattributene

for å angi bildehøyde og bredde. Dermed bruker du disse verdiene til å lage en 10-x-10-px blå boks i et nettleservindu (vist øverst i figuren), selv om det opprinnelige bildet er 600 x 600 piksler.

Generelt er det trygt å redusere bildedimensjonene ved hjelp av disse attributter, selv om du alltid vil sjekke resultatene nøye under testingen. Med et hvilket som helst aspektfølsomt bilde, vil du opprettholde aspektforholdet ved å dele de opprinnelige dimensjonene med en felles verdi.

Denne figuren viser også bokser med dimensjoner på 20 x 20 og 50 x 50 px. Her er endringene i verdiene for høyde og bredde i markeringen for å produsere de andre to boksene:

Med denne teknikken kan du slå et enkelt bilde som den blå boksen (kun 2. 39K i størrelse) til en rekke linjer og jevne bokser:

• Denne teknikken kan sikre at alle delere og andre grenseelementer på siden din bruker samme farge fordi de er alle basert på samme grafikk.

• Hvis du bestemmer deg for at du vil endre alle dine blå linjer til grønt, endrer du bare bildet. Hver linje du opprettet endrer farger.

Når du angir bildeets høyde og bredde som er forskjellig fra bildeets faktiske høyde og bredde, stoler du på nettleseren for å skalere bildedisplayet.Dette trikset fungerer bra for enkeltfargebilder (for eksempel den blå boksen), men det fungerer ikke bra for bilder med flere farger eller bilder som inneholder faktiske bilder.

Nettleseren størrelse ikke bilder godt, og du kommer opp med et forvrengt bilde. Denne figuren viser hvor dårlig en nettleser håndterer ved å forstørre et trompetbilde når markeringen multipliserer bildehøyden med fire og bredden av to (merk likheten til en flygelhorn!):

Messing

Hvis du trenger flere størrelser for samme bilde - som for en logo eller navigasjonsknapp - bruk et stort bilde som master for grafikken og lag mindre versjoner. Dette trikset gir deg bedre kontroll over det endelige utseendet på hvert bilde.