8 bildefeil du må unngå på nettstedet ditt
Store bilder, gallerier og fototunge design er en stor trend innen webdesign. For å få mest mulig ut av denne estetikken, vil du sørge for at hvert bilde på nettstedet ditt passer til skjermen og representerer merkevaren din godt.
Det er mange feil som designere gjør underveis, fra tekniske problemer til bildekvalitet. Men du trenger ikke å falle i en av disse fellene når du jobber med bilder på nettstedet. Her vil vi se på bildefeil og hvordan du kan rette eller unngå dem helt. (Som en bonus i dette innlegget inneholder vi en samling morsomme og flotte bilder fra Death to the Stock Photo's siste gjenstandssamling.)
Feil: laste opp store filer
Bilder i full størrelse er vakre (og nødvendige) når det gjelder utskriftsjobber, men kan føre til problemer når det kommer til nettet. Store bilder lastes sakte; treg belastningstid fører til at brukere forlater nettstedet ditt.
Dessverre er det en enkel felle å falle i. Mange backend-programmer lar deg laste opp store bilder, og med mindre du er oppmerksom, vil du kanskje ikke engang vite at filer blir lastet opp i utrolige størrelser. Ulike bilder i forskjellige bruksområder krever forskjellige bildespesifikasjoner. Se merkevaren din eller nettstedguiden slik at du vet hva dimensjonene til vanlige bildeområder på nettstedet ditt er.
Når du tenker på bilder, er filtypen også viktig. Ikke bruk en tiff på nettet. De vanligste og brukbare filformatene er PNG (datamaskingenererte bilder som diagrammer eller logoer eller når transparens er nødvendig), JPG (bilder) eller GIF (animasjoner).
Løsning: Den enkle løsningen er å formatere bilder etter dimensjonen på rammen der den vil vises med en riktig nettoppløsning. Men det er litt mer til det. Lagre hvert bilde for optimal bruk på nettstedet ditt og for sosial deling. (Bredden på et Pinterest-bilde er for eksempel 600 piksler; hvis du vil at bildet skal deles, skal det være den størrelsen.)
Feil: glemmer å beskjære
Selv om du bruker enorme filer, kan det ødelegge et nettsted, og det kan også brukes fullbildede bilder som er skjult på skjermen. Beskjæring hjelper til med å vise frem det visuelle du vil at brukerne skal se ved å lage et definert brennpunkt som kanskje ikke er der med et bilde i full ramme.
Mangel på beskjæring av bilder kan også skape en mindre enn dynamisk bunke med bilder som alle har de samme formene og sideforholdene. Hvis du bruker flere avlinger og interessante figurer for bilder, kan du legge til visuelle intriger på et nettsted.
Løsning: Beskjær bilder i riktig størrelse eller dimensjon før du laster opp slik at hvert bilde blir som ønsket.
Feil: Glem om miniatyrbilder
Det er flere måter å håndtere størrelse på og endre størrelse på. (Mange av disse avhenger av backend-egenskapene dine, så vi vil ikke argumentere for fordelene ved hver.) Men du må huske å oppdatere og ta hensyn til de minste bildene på nettstedet.
For ofte glemmer designere at miniatyrbilder, forhåndsvisning av bilder og favoritter må oppdateres med endringer i innholdet på nettstedet.
Den andre store feilen? Å bruke et dårlig bilde i miniatyrstørrelse fordi det er så stort som det kan være. Hvis bildet er dårlig, bare ikke bruk det. Ingen bilder er bedre enn et dårlig bilde.
Løsning: Sørg for å fjerne gamle miniatyrbilder eller forhåndsvisninger når bilder endres og at favoritten din er aktuell.
Mistake: Unsearchable Names and Meta Data
Digitalkameraer sparer mye informasjon i forskjellige metafelt som ikke kan oversettes til nettet. Fjern denne informasjonen fra bilder og bytt den for brukbare data. Søkemotorer kan ikke lese innholdet i bilder, så for å gjøre dem søkbare bilder må inneholde beskrivende ord i tittelen, taggene og det omkringliggende innholdet.
Eksempler på dårlige bildenavn:
- picture1.jpg
- DSCN00023.jpg
- briller% og% watch.jpg
Et mye bedre bilde navn inneholder noen få beskrivende ord som glass og se-og-plante.jpg. Thetagreferansen for bildet skal inneholde en lignende beskrivelse, for eksempel "elementer på et motbriller, klokke og en plante." (Og sørg for å stave ord riktig.)
Løsning: Bruk sterke navnekonvensjoner for alle bilder på nettstedet og parvis bilder med innhold som er relatert til hvert visuelt. Bildenavn skal inneholde beskrivende ord atskilt med bindestrek.
Feil: Feil skalering eller strekking
Ingenting ser mer rart ut at en person med et strukket ansikt eller et bilde som er feil skalert. Strekking eller ikke-proporsjonal skalering av bilder (noe som kan være spesielt vanlig når et tema eller bakenden endres) er et nei-nei. Hvert bilde må skaleres med et forhold på 1 til 1, vertikalt og horisontalt. Alt annet skader bildets integritet.
Løsning: Se nøye på alle skaleringsforhold, og kontroller nettstedet ditt med jevne mellomrom.
Feil: planlegger ikke for flere enhetsstørrelser
Responsive designrammer har noen implikasjoner for bilder. Endringen i form eller størrelse fra enhet til enhet eller etter retning gjør det viktig å diktere hvordan bilder vil gjengis på tvers av enheter.
En av de vanligste fremgangsmåtene er å bruke mediesøk for å planlegge for disse endringene etter enhet. CSS gjør det mulig å bruke spesifikke stiler på bilder basert på skjermdimensjoner og hjelper bilder med å gjengis godt uten å “bryte” designet.
Løsning: Bruk mediesøk for responsive rammer og testbildegjengivelse på en rekke enheter.
Feil: Ignorerer netthinneskjermer
Det var en tid for ikke så lenge siden der et standardbilde på 600 piksler bredt på 72 ppi var alt du trenger for et nettsted. Men skjermer forbedrer seg med en hastighet der det bare ikke er tilfelle mer.
Avhengig av rammeverket ditt, kan hvert bilde faktisk inneholde flere bilder som er lagret for forskjellige skjermstørrelser og oppløsninger, inkludert retina-skjermer. (Oppløsningen på retina-skjermer kan variere fra enhet til enhet, men er betydelig høyere enn standardskjermer.)
Løsning: Inkluder filer og mediesøk som er spesifikt for netthinneskjerm. (CSS-triks kan hjelpe.)
Feil: Overbruk eller generisk kunst
Arkivfotografering kan være en god quick fix, men kan føre til noen utilsiktede konsekvenser. Bilder som brukes på for mange nettsteder eller som bare har et generisk utseende og preg for dem, vil ikke skape et visuelt bilde som skaper en forbindelse til brukere. (Du vil ikke at nettstedet ditt skal se ut som alle andre der ute?)
Hvis du planlegger å bruke arkivfotografering, kan du vurdere bilder som du kan redigere eller jobbe med på interessante måter. Unngå bilder som ser ut som ting du har sett andre steder (sjekk ut bildene for alle konkurrenter eller lignende nettsteder).
Løsning: Vurder å ansette en fotograf for å lage en flott bildefil som er spesifikk for nettstedet ditt. Ta med bilder som er relatert til firmaet eller merkevaren din og gjenspeiler nettstedet ditt på riktig måte.
Konklusjon
Å velge og lage bilder for et nettstedsprosjekt kan være en av de morsomste delene av designprosessen. Vær forsiktig med hvert bilde og piksel for å sikre at nettstedet ditt fungerer bra og inkluderer bilder som vil engasjere brukere.
Har du noen tips eller triks når det gjelder bruk av bilder til nettstedsprosjekter? Vi vil gjerne vite hva de er. Del dem i kommentarene.
