Endre størrelse på grafikk og bilder til iPad og iPhone - dummies

Å endre størrelsen på webbilder til visning på iPad og iPhone er viktig av to grunner: Bildene må være små nok til å vises godt på en dataskjerm og til Last ned raskt til en brukers datamaskin. Jo mindre bildet er, desto raskere vil det laste ned.

Selv om du kan endre visningsstørrelsen på et bilde på en nettside ved å endre innstillingene for høyde og bredde i Dreamweaver eller andre webredigeringsprogrammer, får du mye bedre resultater hvis du i stedet endrer den fysiske størrelsen på bildet i en redigeringsprogram program som Photoshop.

Når du endrer et bilde høyde og bredde i HTML-koden, instruerer du bare en nettleser for å vise bildet i en annen størrelse. Dessverre gjør nettlesere ikke en god jobb med å endre størrelse på bilder fordi nettlesere ikke endrer selve bildet, men bare tvinge det til å passe inn i det tildelte rommet når nettleseren laster siden.

Hvis du angir at bildet skal vises større enn dets faktiske størrelse, vil bildet sannsynligvis bli uklar eller forvrengt fordi bildet ikke inneholder nok piksler for alle detaljer å se bra ut i en større størrelse. Hvis du angir koden for å vise bildet mindre enn det er, ser bildet sannsynligvis ut, og brukerne må laste ned et større bilde enn nødvendig.

For å redusere bildeets størrelse for bruk på nettet, krever du to trinn. Først reduserer du oppløsningen til et bilde, som endrer antall piksler i bildet. Når du jobber med bilder på nettet, vil du redusere oppløsningen til 72 piksler per tomme (ppi).

For det andre reduserer du bildens fysiske størrelse ved å redusere dimensjonene. Du ønsker å formatere bildene dine slik at de passer godt i et nettleservindu og å jobbe innenfor utformingen av nettstedet ditt.

Følg disse trinnene for å senke oppløsningen og redusere størrelsen på et bilde i Photoshop (i Photoshop Elements eller Fireworks, følger du en lignende prosess, selv om de spesifikke trinnene kan variere):

1 Med en Bilde åpent i Photoshop, velg Bilde → Endre størrelse.

Dialogboksen Bildestørrelse åpnes.

Hvis du ikke vil at originalbildet ditt skal miste kvalitet (eller du bare vil spille det trygt), ta en kopi av bildet ditt og endre størrelsen på kopien for nettstedet ditt.

2 For å endre oppløsningen til bildet, fjerner du først merket for Resample Image nederst i dialogboksen Bildestørrelse.

For best resultat, fjern alltid avmerkingen for Resample Image når du endrer oppløsningen. For best å forberede bilder på nettet, må du endre oppløsningen til 72 ppi slik at de lastes ned raskere.

3Klikk og dra for å merke nummeret i oppløsningsfeltet og erstatt det ved å skrive inn nummer 72.

Dimensjonene bredde og høyde endres automatisk.

4Klikk for å velge avmerkingsboksen Resample Image.

Avmerkingsboksen Resample Image er ikke valgt, du kan ikke endre Pixel-dimensjonene, så det må kontrolleres når du endrer bildestørrelsen.

5Ingi en høyde og bredde for bildet i feltene Høyde og Bredde.

Hvis begrensningsboksen Begrensede forhold nederst i dialogboksen er valgt (som det er i dette eksempelet), påvirker eventuelle endringer du gjør i høyden automatisk bredden (og omvendt) for å sikre at bildeforholdene forblir konstant. Hvis du vil endre bildet og ikke opprettholde proporsjonene, kan du deaktivere denne boksen.

Når du endrer et bilde i Photoshop i området Pixel Dimensions, kan du angi den nye størrelsen i piksler eller som en prosentandel av originalstørrelsen.

Bilder av kunstnere Amy Baur og Brian Boldon, fra inplainsight art.

6Klikk på OK for å endre størrelsen på bildet.

Hvis du vil returnere bildet til forrige størrelse, velger du Rediger → Angre. Vær oppmerksom på at når du lagrer bildet, blir endringene permanent.