8 beeldfouten om te vermijden op uw website
Grote afbeeldingen, galerijen en fotozware ontwerpen zijn een grote trend in webdesign. Om het meeste uit deze esthetiek te halen, wilt u ervoor zorgen dat elke afbeelding op uw website bij het display past en uw merk goed vertegenwoordigt.
Er zijn veel fouten die ontwerpers onderweg maken, van technische problemen tot beeldkwaliteit. Maar u hoeft niet in een van deze vallen te vallen wanneer u met website-afbeeldingen werkt. Hier zullen we kijken naar beeldfouten en hoe deze te corrigeren of helemaal te vermijden. (Als bonus in dit bericht bevatten we een verzameling leuke en geweldige afbeeldingen uit de recente objectencollectie van Death to the Stock Photo.)
Fout: enorme bestanden uploaden
Afbeeldingen op volledige grootte zijn mooi (en noodzakelijk) als het gaat om afdruktaken, maar kunnen problemen opleveren als het op internet aankomt. Grote afbeeldingen worden langzaam geladen; langzame laadtijden zorgen ervoor dat gebruikers uw site verlaten.
Helaas is het een gemakkelijke val om in te trappen. Veel back-endprogramma's staan het uploaden van grote afbeeldingen toe en tenzij u oplet, weet u misschien niet eens dat bestanden op ongelooflijke formaten worden geüpload. Verschillende afbeeldingen in verschillende toepassingen vereisen verschillende beeldspecificaties. Raadpleeg uw merk- of websitegids zodat u weet wat de afmetingen zijn van veelvoorkomende afbeeldingsgebieden op uw site.
Bij het denken aan afbeeldingen is het bestandstype ook van belang. Gebruik alstublieft geen tiff voor het web. De meest voorkomende en bruikbare bestandsindelingen zijn PNG (computergegenereerde afbeeldingen zoals grafieken of logo's of wanneer transparantie nodig is), JPG (foto's) of GIF (animaties).
Oplossing: de eenvoudige oplossing is om afbeeldingen op maat te maken voor de afmeting van het frame waar deze met de juiste webresolutie worden weergegeven. Maar er is iets meer aan de hand. Sla elke afbeelding op voor optimaal gebruik op uw site en voor sociaal delen. (De breedte van een Pinterest-afbeelding is bijvoorbeeld 600 pixels; als u wilt dat de afbeelding kan worden gedeeld, moet deze van dat formaat zijn.)
Fout: vergeten om bij te snijden
Terwijl het gebruik van enorme bestanden een site kan vertragen, kan dat ook met schermvullende afbeeldingen die verborgen zijn op het scherm. Bijsnijden helpt bij het onder de aandacht brengen van de beelden die u gebruikers wilt laten zien door een gedefinieerd brandpunt te creëren dat er mogelijk niet is met een schermvullende afbeelding.
Gebrek aan bijsnijden van afbeeldingen kan ook een minder dan dynamische stapel beelden creëren die allemaal dezelfde vormen en beeldverhoudingen hebben. Het gebruik van meerdere uitsneden en interessante vormen voor afbeeldingen kan visuele intriges aan een website toevoegen.
Oplossing: snijd afbeeldingen bij tot de juiste grootte of afmeting voordat u ze uploadt, zodat elke afbeelding naar wens wordt gerenderd.
Fout: het vergeten van miniaturen
Er zijn een aantal manieren om de grootte en grootte van miniaturen aan te passen. (Veel ervan zijn afhankelijk van uw backend-mogelijkheden, dus we zullen de verdiensten van elk niet tegenspreken.) Maar u moet er wel aan denken om de kleinste afbeeldingen op uw site bij te werken en op te letten.
Te vaak vergeten ontwerpers dat miniaturen, afbeeldingsvoorbeelden en favicons moeten worden bijgewerkt met wijzigingen in de inhoud van de website.
De andere grote fout? Een slechte afbeelding gebruiken op miniatuurformaat omdat dat zo groot is als het maar kan zijn. Als het beeld slecht is, gebruik het dan gewoon niet. Geen enkele afbeelding is beter dan een slechte afbeelding.
Oplossing: zorg ervoor dat u oude miniaturen of voorvertoningen verwijdert wanneer afbeeldingen veranderen en dat uw favicon actueel is.
Fout: niet-doorzoekbare namen en metagegevens
Digitale camera's slaan veel informatie op in verschillende metavelden die niet naar het web worden vertaald. Strip deze informatie van afbeeldingen en vervang deze door bruikbare gegevens. Zoekmachines kunnen de inhoud van afbeeldingen niet lezen, dus om ze doorzoekbaar te maken, moeten afbeeldingen beschrijvende woorden in de titel, tags en omliggende inhoud bevatten.
Voorbeelden van slechte afbeeldingsnamen:
- picture1.jpg
- DSCN00023.jpg
- bril% en% watch.jpg
Een veel betere afbeeldingsnaam bevat een paar beschrijvende woorden zoals bril-en-horloge-en-plant.jpg. De referentie van de afbeelding voor de afbeelding moet een vergelijkbare beschrijving bevatten, zoals "items op een toonbril, horloge en een plant". (En zorg ervoor dat u woorden correct spelt.)
Oplossing: gebruik sterke naamgevingsconventies voor alle website-afbeeldingen en koppel afbeeldingen met inhoud die betrekking heeft op elk beeld. Afbeeldingsnamen moeten beschrijvende woorden bevatten, gescheiden door koppeltekens.
Fout: onjuist schalen of strekken
Niets ziet er zo vreemd uit als een persoon met een uitgerekt gezicht of een afbeelding die niet goed is geschaald. Het uitrekken of niet-proportioneel schalen van afbeeldingen (wat vooral vaak voorkomt wanneer een thema of een back-endverandering plaatsvindt) is een nee-nee. Elke afbeelding moet worden geschaald met een verhouding van 1 op 1, verticaal en horizontaal. Al het andere schaadt de integriteit van de foto.
Oplossing: let goed op alle schaalverhoudingen en controleer uw site regelmatig.
Fout: geen planning voor meerdere apparaatformaten
Responsieve ontwerpkaders hebben enkele implicaties voor afbeeldingen. De verandering in vorm of grootte van apparaat naar apparaat of door oriëntatie maakt het belangrijk om te dicteren hoe afbeeldingen op verschillende apparaten worden weergegeven.
Een van de meest gebruikelijke werkwijzen is het gebruik van mediaquery's om deze wijzigingen per apparaat te plannen. De CSS maakt het mogelijk om specifieke stijlen toe te passen op afbeeldingen op basis van schermafmetingen en helpt afbeeldingen goed weer te geven zonder het ontwerp te "breken".
Oplossing: gebruik mediaquery's voor responsieve frameworks en test de weergave van afbeeldingen op een aantal apparaten.
Fout: het negeren van retina-schermen
Er was een tijd niet zo lang geleden dat een standaard afbeelding van 600 pixels breed bij 72 ppi alles was wat je nodig had voor een website. Maar schermen verbeteren in een mate waarin dat gewoon niet meer het geval is.
Afhankelijk van uw framework kan elke afbeelding meerdere afbeeldingen bevatten die zijn opgeslagen voor verschillende schermformaten en resoluties, inclusief retina-displays. (De resolutie van retina-schermen kan per apparaat verschillen, maar is aanzienlijk hoger dan bij standaardschermen.)
Oplossing: neem bestanden en mediaquery's op die specifiek zijn bedoeld voor retina-displays. (CSS-Tricks kunnen helpen.)
Fout: overmatig gebruik of generieke kunst
Voorraadfotografie kan een geweldige snelle oplossing zijn, maar kan tot enkele onbedoelde gevolgen leiden. Foto's die op te veel websites worden gebruikt of die gewoon een generieke uitstraling hebben, zullen geen beeld opleveren dat een verbinding met gebruikers tot stand brengt. (U wilt toch niet dat uw website eruit ziet als elke andere website?)
Als u van plan bent stockfotografie te gebruiken, overweeg dan afbeeldingen die u kunt bewerken of waarmee u op interessante manieren kunt werken. Vermijd afbeeldingen die lijken op dingen die je op andere plaatsen hebt gezien (bekijk de afbeeldingen voor alle concurrenten of vergelijkbare sites).
Oplossing: overweeg een fotograaf in te huren om een geweldig afbeeldingsbestand te maken dat specifiek is voor uw website. Voeg visuals toe die betrekking hebben op uw bedrijf of merk en die uw site op de juiste manier weergeven.
Gevolgtrekking
Het selecteren en maken van afbeeldingen voor een websiteproject kan een van de leukste onderdelen van het ontwerpproces zijn. Wees voorzichtig met elke afbeelding en pixel om ervoor te zorgen dat uw site goed werkt en afbeeldingen bevat die gebruikers zullen aanspreken.
Heb je tips of trucs als het gaat om het gebruik van afbeeldingen voor websiteprojecten? We willen graag weten wat ze zijn. Deel ze in de reacties.
