Stora bilder, gallerier och foto-tunga mönster är en stor trend i webbdesign. För att få ut det mesta av detta estetiska, vill du se till att varje bild på din webbplats passar på skärmen och representerar ditt varumärke väl.
Det finns många misstag som konstruktörer gör på vägen, från tekniska problem till bildkvalitet. Men du behöver inte falla i ett av dessa fällor när du arbetar med webbsidor. Här kommer vi att titta på bildfejl och hur man åtgärdar eller undviker dem helt och hållet. (Som en bonus i detta inlägg, presenterar vi en samling roliga och bra bilder från Död till Stock Photos senaste objektsamling.)
Misstag: Uppladdning av enorma filer
Bilder i full storlek är vackra (och nödvändiga) när det gäller utskriftsjobb, men kan få problem om det gäller webben. Stora bilder laddas långsamt; långsamma belastningstider gör det möjligt för användarna att överge din webbplats.
Tyvärr är det en lätt fälla att falla in i. Många backend-program tillåter uppladdning av stora bilder och om du inte uppmärksammar kanske du inte ens vet att filer laddas upp i otroliga storlekar. Olika bilder i olika användningsområden kräver olika bildspecifikationer. Se ditt varumärkes- eller webbplatsguide så att du vet vad dimensionerna för vanliga bildområden på din webbplats är.
När du tänker på bilder, är filtyp också viktigt. Använd inte en tiff för webben. De vanligaste och användbar filformaten är PNG (datorgenererade bilder som diagram eller logotyper eller när öppenhet är nödvändig), JPG (bilder) eller GIF (animeringar).
Lösning: Den enkla lösningen är att dimensionera bilder för dimensionen av ramen där den kommer att visas med en riktig webbupplösning. Men det är lite mer till det. Spara varje bild för optimal användning på din webbplats och för social delning. (Bredden på en Pinterest-bild är till exempel 600 pixlar, om du vill att bilden ska delas ska den vara den storleken.)
Misstag: Glöm inte att beskära
Medan du använder stora filer kan du mosa en sida ner, så kan du använda helbilds bilder som är dolda på skärmen. Beskärning hjälper till att visa de visuella bilderna som du vill att användarna ska se genom att skapa en definierad kontaktpunkt som kanske inte finns där med en bild i full bild.
Brist på bildskärning kan också skapa en mindre än dynamisk bildstack som alla har samma former och bildförhållanden. Att använda flera grödor och intressanta former för bilder kan lägga till visuell intrig till en webbplats.
Lösning: Beskär bilder till lämplig storlek eller dimension före uppladdning så att varje bild görs som önskat.
Misstag: Glöm inte om miniatyrer
Det finns ett antal sätt att hantera miniatyrstorlek och resizing. (Många är beroende av dina backend-möjligheter, så vi kommer inte att argumentera för varje förtjänst). Men du måste komma ihåg att uppdatera och uppmärksamma de minsta bilderna på din webbplats.
För ofta glömmer designers att miniatyrbilder, förhandsvisningar av bild och favicons måste uppdateras med ändringar av webbplatsinnehåll.
Det andra stora misstaget? Använda en dålig bild på miniatyrstorleken eftersom det är så stort som det kan vara. Om bilden är dålig, använd inte den. Ingen bild är bättre än en dålig bild.
Lösning: Se till att ta bort gamla miniatyrer eller förhandsgranskningar när bilder ändras och att ditt favicon är aktuellt.
Misstag: Oansökbara namn och metadata
Digitalkameror sparar mycket information i olika metafält som inte översätter till webben. Ta bort denna information från bilder och byt den till användbar data. Sökmotorer kan inte läsa innehållet i bilder, så för att göra dem sökbara bilder måste inkludera beskrivande ord i titeln, alt-taggar och omgivande innehåll.
Exempel på dåliga bildnamn:
- Picture1.jpg
- DSCN00023.jpg
- glasögon% och% watch.jpg
Ett mycket bättre bildnamn innehåller några beskrivande ord som glasögon-och-titta-och-planta.jpg. Alt-tagreferensen för bilden ska innehålla en liknande beskrivning, som? Objekt på en motglas, klocka och en växt.? (Och se till att stava ord korrekt.)
Lösning: Använd starka namngivningskonventioner för alla webbsidor och para bilder med innehåll som rör varje visuellt. Bildnamn ska innehålla beskrivande ord åtskilda av bindestreck.
Misstag: Felaktig skalning eller sträckning
Inget ser mer konstigt ut som en person med ett utdraget ansikte eller en bild som är felaktigt skalad. Sträckning eller icke-proportionell skalning av bilder (vilket kan vara särskilt vanligt när ett tema eller en bakre ändändring inträffar) är ett nej-nr. Varje bild måste skalas med ett förhållande 1 till 1, vertikalt och horisontellt. Allt annat skadar integriteten på fotot.
Lösning: Titta noga på alla skaleringsproportioner och granska din webbplats regelbundet.
Misstag: Planerar inte för flera enhetstorlekar
Responsiva konstruktionsramar har några konsekvenser för bilder. Förändringen i form eller storlek från enhet till enhet eller orientering gör det viktigt att diktera hur bilder ska göras över enheter.
En av de vanligaste metoderna är att använda mediafrågor för att planera för dessa ändringar per enhet. CSS tillåter specifika stilar att appliceras på bilder baserade på skärmdimensioner och hjälper bilder att rinna bra utan att bryta? designen.
Lösning: Använd mediafrågor för lyhörda ramar och testbildsreferens på ett antal enheter.
Misstag: Ignorera näthinnans skärmar
Det var en tid inte så länge sen, där en standardbild på 600 pixlar vid 72 ppi var allt du behövde för en webbplats. Men skärmarna förbättras i takt där det bara inte är fallet längre.
Beroende på dina ramar kan varje bild faktiskt inkludera flera bilder som sparats för olika skärmstorlekar och upplösningar, inklusive retina-skärmar. (Upplösningen av näthinnans displayer kan variera beroende på enhet men är betydligt högre än standarddisplayer.)
Lösning: Inkludera filer och mediafrågor som är specifikt för näthinnan. (CSS-Tricks kan hjälpa till.)
Misstag: Overused eller Generic Art
Arkivfotografering kan vara en bra snabb fix men kan leda till några oavsiktliga konsekvenser. Bilder som används på alltför många webbplatser eller som bara har ett generiskt utseende och känsla för dem kommer inte att skapa en bild som etablerar en anslutning till användarna. (Du vill inte att din webbplats ska se ut som alla andra där ute?)
Om du planerar att använda stock photography, överväga bilder som du kan redigera eller arbeta med på intressanta sätt. Undvik bilder som ser ut som saker du har sett på andra ställen (kolla in bilderna för alla konkurrenter eller liknande webbplatser).
Lösning: Överväg att anställa en fotograf för att skapa en bra bildfil specifikt för din webbplats. Inkludera visuella bilder som är relaterade till ditt företag eller varumärke och reflektera din webbplats på rätt sätt.
Slutsats
Att välja och skapa bilder för ett webbprojekt kan vara en av de roligaste delarna av designprocessen. Var försiktig med alla bilder och pixlar för att säkerställa att din webbplats fungerar bra och innehåller bilder som kommer att engagera användare.
Har du några tips eller tricks när det gäller att använda bilder för webbprojekt? Vi skulle gärna veta vad de är. Dela dem i kommentarerna.