Stora bilder är ett stort problem! De mosa ner sidan laddningstider och sluka upp enorma mängder sidutrymme, signalera till Google att din sida är långsam, bruten, och bör undvikas. Detta kan skicka din webbplats till ingen mans land: sida två. Usch!
för att hjälpa dig att undvika att gå vilse i vildmarken, jag har kommit med några bästa praxis tips för att ändra storlek på bilder., Här hittar du riktlinjer för bildstorlek tillsammans med råd för bildanvändning och optimering.
4 Frågor att fråga dig själv om Bildstorlek
- hur bred är min hemsida? Webbplatsbredder varierar, så om du vill lägga till stora bilder, Vill du veta hur bred ditt innehåll område är., Det har varit många gånger när vi talar med företagare som är missnöjda med hur långsamt deras hemsida laddas, bara för att finna att de lagt till en 5-megabyte bild på en webbplats som bara är 3 megs—talk about load lag!
- hur många kolumner finns på sidan där innehållet kommer att visas? Om din webbplats är en enda kolumn design, har du cirka 980 pixlar att arbeta med. Men om du har två kolumner, vill du hålla bilden inte större än 640 pixlar. På så sätt kommer det inte äta upp sidan och värdefulla fastigheter för innehåll.,
- är bilden fokus för innehållet, eller är det en förbättring? När du har skapat (eller delar) en infografisk, kommer bilden att vara fokus på sidan. I det här fallet är det helt acceptabelt att lämna bilden stor, så att den kan sprawl över sidan. Men om det bara är en bild som är avsedd att lägga till visuellt intresse, behåll bilden liten, ca 200 till 250 pixlar bred. Du vill ha det tillräckligt litet så att det inte tar upp hela kolumnen, med tillräckligt med utrymme för text att linda runt den.
- hur ser bilden ut på en mobil enhet?, Precis som med stationära webbplatsstorlekar kan storleken på en mobil webbplats variera. På grund av detta måste du anpassa din bildstorlek till din webbplats. För att avgöra om dina bilder är för stora för din mobila webbplats, plocka upp telefonen och öppna sidan med din bild. Du vet direkt om det är för stort eftersom det kan påverka laddningstiden, och det kommer att ta upp hela sidan. Om så är fallet, gå tillbaka, krympa och titta igen. Utvärdera också om bilden är nödvändig för innehållet. Om det inte är det kan det vara bäst att lämna ut det, vilket gör det skriftliga innehållet på sidan lättare att läsa.,
fastställande Proportion distorsion
nedan har vi en fallstudie om hur bilder visas på mobila enheter. Till vänster är en 5000-pixel bred bild. Det saktar inte bara sidladdningstiden, men du kan se hur den sträcker sig och försöker klämma in i mobilvyn. Till höger ändrades bilden till 250 pixlar och sattes att visas med 100% bredd på vilken enhet som helst, så det ser bra ut både på ett skrivbord och på den mobila versionen här.,
-
ett exempel på en för stor bild på en mobil enhet. Var är innehållet?! -
här har samma bild klippts ned till storlek. Nu finns det utrymme att visa både innehåll och bild.
Pro Tips: placera som regel aldrig en stor bild överst på ditt innehåll., Detta kommer att distrahera läsaren, vilket gör honom mer benägna att sluta rulla och gå vidare…kanske till din konkurrent!
krympning (en bra sak i det här fallet!)
innan du börjar krympa ner din bild, se till att du sparar originalet. Detta gör att du kan komma tillbaka till det, om du av misstag gör det för litet. Medan du alltid kan krympa en bild ner, är det omöjligt att förstora den när den är krympt. Vad du kommer att sluta med är en kornig, pixlig bild. Inte bra!
så om din bild börjar på 2000 pixlar, minska den till 500., Ta en titt, se till att du inte har gjort det för liten; sedan, om nödvändigt, krympa igen. Du letar efter den perfekta balansen mellan pixelstorlek och bildkvalitet: vilken användning är en dinky-bild som ingen kan se?
en anteckning till kunder i Foster Web Marketing: om du vill ha mer detaljerade instruktioner, kolla in våra steg-för-steg-instruktioner om att lägga till, Optimera och ändra storlek på bilder. Hitta den här informationen och mer i användarforumet i DSS. Eller ring mig! Jag går gärna igenom processen.,
andra Bildöverväganden
När bilderna görs på rätt sätt kan de bidra till att öka din sökrankning. För att optimera dina bilder på rätt sätt rekommenderar vi att du:
- byter namn på filen. Oavsett om du använder en lagerbild eller din egen originalbild måste du tänka innan du namnger filen. Istället för” image4″, prova något mer beskrivande, till exempel ”bilkrasch Dallas.”
- Lägg till en ALT-tagg. Denna korta text (i allmänhet under 20 tecken, eller cirka tre ord) kommer att användas för att hjälpa synskadade och Google bots att förstå vad bilden är.,
- inkludera en bildtext. Bildtexter är bland de mest lästa innehållet på en webbplats, så glöm inte att lägga till en intressant, relevant bildtext.
- kontrollera om det är relevant. Bilder hjälper till att engagera läsaren och kan lägga till djup till skriftligt innehåll. Men att lägga till bilder för att lägga till bilder är slöseri med tid.
för att gräva djupare i hur man får ut mer av varje bild du lägger upp, var noga med att läsa vår artikel, låsa upp SEO-potentialen på din webbplats.
om du hittade den här artikeln till hjälp, var noga med att dela den på Facebook eller var som helst du tror att den kommer att nå de flesta företagare., Tillsammans kan vi bidra till att förhindra långsamma lasttider!
