Guide till att publicera bilder på nätet
28 Nov 2016
Guide till att publicera bilder på webben
Den här artikeln riktar sig till dig som administrerar och publicerar bildmaterial på nätet, men inte nödvändigtvis har erfarenhet av webbdesign eller utveckling.
Artikeln innehåller råd om hur man hittar rätt bilder, vilket format som är bra att använda samt vad man bör göra innan man laddar upp en bild på webben.
Längre laddningstider och onödigt stora bilder får besökare att lämna webbsidor i förtid, and kan också orsaka extra kostnader för besökare som måste betala för den data de förbrukar. Att publicera bilder på nätet är inte så enkelt som att googla, ladda ner en bild och publicera.
Hitta rätt material
Alla bilder som finns på Internet är inte gratis för alla att använda hur som helst. Om du vill använda en bild som du inte äger rättigheterna eller licens till, börja med att fråga ägaren om lov. Om ägaren inte beviljar publicering, går det att köpa bilder och licenser för att använda dem från en mängd olika leverantörer. Dessa erbjuder allt från fotografier till illustrationer och grafiska designelement.
Det finns också ett mindre antal distributörer som erbjuder gratis bilder med licenser som tillåter fri användning av bilderna. Testa t.ex. Wikipedia commons, unsplash eller att använda filtreringsalternativen på flickr för att hitta bilder som det är tillåtet att använda gratis. Webbsidan ”I Am CC” listar användare på Instagram som licenserat sina bilder under creative commons.
Höjd, bredd och densitet
Skärmstorlekar
Besökare kan besöka din webbsida via alltifrån mobiltelefoner och läsplattor till laptops, desktops och till och med via TVn. En bild som passar bra på en väldigt liten skärm kanske måste förstoras för att göra samma intryck på en större skärm. Men att skicka samma stora bild till alla enheter leder till att användare med mobiler och surfplattor tvingas ladda ner onödigt mycket data, eftersom en stor bild ofta också är tyngre när det kommer till filstorlek (som mäts i bytes).
En vanlig lösning på problemet är att skicka olika bilder till användarna, baserat på bredden eller proportionerna på den skärm de för tillfället använder för att besöka sidan. Tillvägagångssättet är en del i att göra en webbsida är responsiv, vilket innebär att webbsidans layout anpassar sig dynamiskt efter skärmen den visas på.
Skärmupplösning
Förutom storlek i bredd och höjd har skärmar också en upplösning. Högupplösta skärmar, eller ”retina” skärmar som Apple kallar sina högupplösta skärmar, innehåller fler pixlar per inch än vanliga skärmar. Följden är att dessa skärmar kan visa ännu tydligare och klarare grafik.
Eftersom antalet pixlar per inch har ökat, måste kvaliteten på bilderna också ökas för att man ska kunna dra nytta av de extra pixlarna. På samma sätt som man kan skicka bilder av olika storlek till skärmar av olika format, går det att bara skicka bilder med högre kvalitet (m.a.o. större och tyngre) till högupplösta skärmar.
I takt med att utvecklingen går framåt, har antalet pixlar per inch i högupplösta skärmar ökat. En del skärmar har tre gånger eller fler pixlar jämfört med antalet pixlar i en vanlig skärm. Att fortsätta öka bildstorleken för att kompensera för upplösningar som är så höga är inte att rekommendera eftersom bilderna på grund av deras stora format helt enkelt blir för tunga. En lösning på problemet är att använda det vektorbaserade bildformatet SVG (Scalable Vector Graphics) för enklare bilder. Mer om SVG bilder och andra filtyper i nästa avsnitt.
Filtyper
SVG
SVG är ett vektorbaserat filformat vilket innebär att bilderna kommer att ha samma utseende oberoende av skärmupplösningen.
SVG bilder används oftast för bilder med enklare motiv, som logotyper eller ikoner. En SVG bild är en fil som består av kod för former och banor som utgör bilden. Eftersom innehållet i SVG filen måste gå att uttrycka programmeringsmässigt som former och banor kan inte fotografier eller komplicerade illustrationer med skuggor sparas som SVG.
Då SVG bilder består av kod, används de också (tillsammans med JS, CSS och HTML) för att skapa animationer på webben.
Tips
Tänk på att SVG bilder inte stödjs i Internet Explorer 8 eller tidigare versioner av Internet Explorer. Det innebär att bilderna inte syns på webbsidan, och i vissa fall även att resten av sidan inte återges korrekt. Om du behöver stödja Internet Exporer 8, behövs ett system för att hantera och ersätta SVG bilderna med ett annat filformat.
JPEG
Använd det här formatet till fotografier eller andra bilder som har många olika färger, skuggor och inte behöver vara genomskinliga någonstans.* Det här är oftast formatet som är att föredra när det kommer till fotografier som inte behöver ha extra hög bildkvalitet. Om du använder ett mer avancerat bildbehandlingsprogram, finns det möjligheter att ange vilket till kvalitet du vill att bilden ska sparas som. Försök att använda så låg kvalitet som möjligt utan att bilden ser dålig ut, eftersom det leder till den lägsta filstorleken.
*Genomskinliga områden fylls i med vitt.
PNG
Använd det här formatet till bilder som behöver ha hög kvalitét, har ett mindre antal färger eller som måste vara genomskinliga någonstans. Generellt blir PNG bilder tyngre sett till filstorlek jämfört med samma bild sparad i JPEG format, dock har de oftast bättre bildkvalitet.
GIF
GIF formatet används mest för mindre och enklare bilder med färre färger istället för SVG, och för att introducera animationer på enklast möjliga sätt. Loopande minivideos i form av blinkande memes är typexempel på animerade GIF bilder på nätet. Även om GIF bilder stöder genomskinlighet, hanterar de inte semi-opacitet. Detta blir tydligt om bilden innehåller exempelvis graduella skuggor.
WebP
WebP är ett relativt nytt bildformat utvecklat av Google specifikt för bilder som publiceras på webben. WebP bilder har en mindre filstorlek jämfört med JPEG bilder, och kan innehålla genomskinliga områden precis som PNG bilder. Nackdelen är att formatet inte stödjs i alla moderna webbläsare. För närvarande finns det bara stöd för formatet i Chrome, Opera och Android browsers. Om och när formatet går att använda även i övriga webbläsare skulle det mycket väl kunna bli det bästa valet för bilder på nätet.
För att kunna använda webP filer i produktion idag, måste man ha ett system för att skicka bilder med andra filformat till webbläsare som inte stöder webP.
Tunga webbsidor är långsamma
Även om du inte är en utvecklare är du fortfarande ansvarig för materialet som du publicerar på nätet. Att lägga upp bilder som är större och tyngre än de behöver vara, leder till att straffa dina besökare eftersom webbsidan laddar långsammare i onödan.
För användare som har mobilabonnemang där de betalar för hur mycket data de använder, kan webbsidors tyngd innebära märkbara skillnader. Att ha en webbsida som kostar mer att besöka jämfört med andra sidor kan upplevas som ett hinder för vissa besökare. För att få en uppfattning om hur mycket din webbsida kostar att besöka baserat på mobilabonnemang i olika länder, besök sidan ”What does my website cost”.
Banta bilderna
Det finns flera sätt att “banta” bilder. Det första uppenbara steget är att bestämma hur stora bilden verkligen behöver vara sett till bredd och höjd i pixlar. Att ladda upp en bild som är två eller tre gånger större än utrymmet den kommer att uppta på skärmen leder oundvikligen till längre laddningstider och ökar risken för att besökare lämnar sidan**.
Om du laddar upp extra stora bilder för att tillgodose högupplösta skärmar, bör det finnas en lösning för att hantera responsiva bilder på plats.
I de fall det finns en stabil lösning för att hantera bilder integrerat i ditt CMS, är chanserna goda att du kan ladda upp stora bilder som sedan blir beskurna, skalas om och sedan automatiskt infogas i den fördefinierade responsiva bildlösningen. I det ideala fallet tas även skärmupplösning med i beräkningen, vilket innebär att det kanske t.o.m. krävs en stor, högkvalitativ bild att utgå ifrån för att skapa alla de olika varianterna.
Men även om det finns en bra responsiv lösning inbyggt i ditt CMS, är det alltid en god idé att försäkra sig om att bilderna som publiceras är komprimerade. Detta kan i vissa fall göras automatiskt via plugins till ditt CMS, men även göras redan innan bilderna laddas upp.
**När människor tvingas vänta, tröttnar de och går därifrån.
Komprimerade bilder väger mindre
När en bild komprimeras förändras bildens data för att minska filstorleken. En del kompressions tekniker offrar bildkvalitet, medan andra optimerar bildens data utan att förändra hur den ser ut för blotta ögat.
Under ytan på dessa optimeringsverktyg pågår en massa tekniska operationer***, men det slutgiltiga målet är att producera en bild som är påtagligt mindre i filstorlek, men fortfarande ser bra ut.
***Olika hög grad och typ av komprimering påverkar bildkvaliteten olika mycket
Det finns många verktyg för bildkompression. Några gratis alternativ är:
- Compressor.io – online verktyg som stöder JPEG, PNG, GIF och SVG. Erbjuder två sortes komprimering: lossless (oförändrad bildkvalitet) och lossy (reducerad bildkvalitet). Uppladdningar i batch för närvarande inte möjligt.
- TinyPNG.com – online verktyg som stöder PNG och JPEG. Uppladdningar i batch är begränsade till 20 bilder, med en maxgräns på 5 MB per bild. Erbjuder lossy komprimering.
- Optimizilla.com – online verktyg som stöder PNG och JPEG. Uppladdningar i batch är begränsade till 20 bilder.
- Kraken.io – kommersiellt verktyg som också erbjuder en gratis webb version. Gratisversionen har en storleksbegränsning om 1 MB per fil.
- PNG Gauntlet – mjukvara för Windows, Mac och Linux. Stöder PNG, och kan också konvertera andra filformat till PNG.
- FILEminimizer Pictures – mjukvara för Windows. Stöder JPEG, GIF, PNG men även BMP, TIFF och EMF. Har rykte om att vara speciellt bra på att komprimera JPEGfiler.
- Imageoptim – mjukvara för Mac. Stöder GIF, JPEG, PNG.
– Checklista –
innan du publicerar bilder på nätet
- Kontrollera att du har rättighet att använda bilden
- Välj lämplig bildstorlek. Anpassa bildstorleken efter hur mycket plats som bilden ska uppta på webbsidan.
- Välj ett lämpligt bildformat baserat på bildens motiv.
- Komprimera bilden innan du publicerar den.
