Is Your Image Web-Ready?

Vårt mål når du plasserer bilder på en nettside, er å gjøre filen så liten som mulig uten at bildekvaliteten reduseres. I denne artikkelen vil vi gå gjennom trinnene for å gjøre bildet ditt web-klar med web-savvy funksjoner i Photoshop.

Det er fristende å bare lagre filen som en jpg eller gif bruke Fil / Lagre som alternativ i Photoshop og kaller bildet web-klar. Imidlertid funnet hvis vi gjør det på denne måten, vi savner å dra nytte av image-krympende verktøyene bare innenfor Photoshops "Save for web"-dialogboksen. Disse funksjonene la oss fininnstille lagring av bildet, noe som resulterer i enda mindre filstørrelse uten at bildekvaliteten reduseres.

Før diskuterer fremgangsmåten for å lagre et bilde på nettet, la oss se på de to mest brukte formater: JPEG og GIF. JPEG gir et bredere spekter av farger, mens GIF er best brukt for å farge og repeterende fargebilder. Jeg bruke JPEG for fotografier og GIF for strektegninger, logoer, og noen illustrasjoner. Jeg kan også bruke PNG-formatet hvis jeg trenger en høykvalitets bilde og lagre det som en JPEG-fil med ønsket kvalitet resulterer i en fil som er for stor. (ie. tar for lang tid å laste ned)

La oss gå gjennom trinnene for å gjøre bildet ditt web-ready.

Set Oppløsning og Bildestørrelse
Før du lagrer filen, jeg har alltid satt oppløsningen til 72 (standard oppløsning for skjermer) og jeg sette størrelsen på bildet til den størrelsen jeg vil at bildet skal være på nettsiden. Begge disse alternativene er satt i bildestørrelsen dialogboksen. Velg Image> Image Size.

Bildestørrelse dialogboksvelgeren

Save for Web and Devices
Lagre for Web and Devices funksjon i Fil-menyen i Photoshop tillater oss å finjustere lagring prosess for å gi oss best mulig filstørrelse. Dette alternativet lar oss også visuelt sammenligne forskjellige innstillinger før du lagrer filen.

Etter å velge Fil> Lagre for Web and Devices, følgende dialogboks kommer opp:

Save for Web and Devices dialogboksvelgeren

I dette vinduet velger du 4-opp øverst i vinduet. Dette gir oss 3 forskjellige visuelle av bildet (i tillegg til den opprinnelige) ved forskjellige innstillinger. La oss ta en nærmere titt på denne dialogboksen.

Øverst til venstre på skjermen er verktøyene. Det eneste verktøyet jeg kan bruke er zoom-verktøyet. Det fungerer på samme måte som zoom-verktøyet i Photoshop. Senteret panelet presenterer visuelle representasjoner av bildet ved forskjellige innstillinger. Den høyre er der vi setter ulike alternativer for en av de bildene i midten panelet. De blå byksende boks rundt ett av bildene er det valgte bildet.

Før du gjør noen endringer jeg ser på filen info under hvert bilde.

Bildeinformasjon

Denne info forteller meg filformatet (JPEG), størrelsen på filen, og hvor lang tid det vil ta å laste ned på en bestemt hastighet. (Høyreklikk på hastigheten info for å velge en annen dataoverføre fart.) Vi er mest interessert i størrelsen på filen.

Til høyre for denne info er "kvalitet" parameter - jo lavere kvalitet, jo høyere komprimering. Som kvaliteten synker, synker den visuelle representasjonen også. Vi kan miste detalj. Eller kan bildet begynne å se uklar. Vårt mål er å bruke det laveste kvalitet uten at visuell representasjon av bildet.

Innstilling Filformat og kvalitet

Høyre Panel Justeringer

Filformatet (JPEG, GIF, osv.) og kvaliteten kan endres øverst i høyre panel. Det er andre parametre også, men vi vil fokusere på disse to. I sentrum panelet, velger du bildet som ligger nærmest den ønskede filen størrelse og er fremdeles beholder sin visuelle integritet. Dette gjør det det aktive bildet. Eventuelle endringer vi gjør i høyre panel, vil bli brukt på dette bildet.

Klikk pilen til høyre i kvaliteten feltet for å åpne kvaliteten skyveknappen. Få ned kvaliteten til det er den minste filstørrelsen mulig og ønsket kvalitet er fortsatt intakt. Hvis du vil visuelt sammenligne ulike alternativer ved siden av hverandre, foreta tilsvarende justeringer i de to andre bildene.

Når bildet er på den minste filstørrelsen mulig med den ønskede visuelle integritet, velger du bildet for å gjøre den til den aktive bildet og klikk på Lagre. Dette åpner Save Optimized dialogboksen. Naviger til hvor du vil lagre filen. Kontroller at Save As Type valget er satt til bare bilder. Klikk Lagre.

Lagre kun bilder

Når filen er lagret, bildet er klar til å brukes på websiden din. Du kan være trygg på at du har den minste filstørrelse, uten at bildekvaliteten. Ditt bilde er nå web-klar.