Alla som förlitar sig på visuellt innehåll i marknadsföring på nätet känner till problemet att foton av hög kvalitet orsakar ofta mycket långa laddningstider.
Komprimering av bilder är därför extremt användbart eftersom ju mindre bildfilerna är, desto snabbare laddas din webbplats. Och ju snabbare din webbplats laddas, desto mer sannolikt är dina besökare (förhoppningsvis) att hitta det de letar efter. Dessutom är laddningstiden en rankningsfaktor för sökmotorer.
Men kvalitet och hastighet utesluter inte varandra.
Om du är uppmärksam på rätt filformat och alltid oroar dig för komprimering kan du njuta av båda.
Läs vidare och ta reda på hur det bästa sättet är att formatera och komprimera dina bilder för att förbättra laddningstiden för din webbsida.
Table of Contents
De vanligaste filformaten för bilder i bloggen
Erfarenheten lär oss att det inte finns något perfekt filformat för webbgrafik, utan beror alltid på motivet. Följande tre format har nu etablerat sig, men används ännu inte av varje webbplatsoperatör enligt deras styrkor.
JP(E )G: För foton med många detaljer och många färger
Formatet för Joint Photographic Experts Group representerar 16,8 miljoner färger och är den mest använda i nätverket. Men filstorlekarna är ibland enorma (åtminstone med maximal bildkvalitet) och komprimeringen går förlorad. För oss bloggare är det inte alltid det bästa valet, absolut inte för bilder med hårda kanter eller innehållande text, det är mer lämpat för fotografier.
PNG: För grafik med stora solida färger och transparens
Portabel nätverksgrafik komprimerar mycket bra (24-bitars såväl som 8-bitars möjligt) och kan till och med representera transparens. PNG är det idealiska formatet för grafik med få färger, såsom logotyper, illustrationer eller diagram.
GIF: För rörliga bilder och animationer
Graphics Interchange Format kan bara visa 256 färger, men samtidigt är det bara en som kan spela animationer. Med den nya trenden med “cinemagraphs” upplever nu GIF, som tidigare var ökänt för sin låga kvalitet, en pånyttfödelse.
Min rekommendation: JPG för foton, PNG för grafik och GIF för film.
Förresten: Jag ser ofta pixlade profilbilder på Facebook eller Twitter. Detta är också ofta relaterat till filformatet. Om du har samma problem, prova ett alternativ. PNG fungerar bäst enligt mig för både profil- och omslagsbilder.
När du har organiserat dina filformat “korrekt” är det dags att optimera. För vi kan till och med få ut mer av resultatet av professionell grafikmjukvara!
Förutom en utökad exportfunktion från Photoshop kan du använda komprimeringsverktyg för att komprimera bilder för användning på din hemsida.
TinyPNG
Som namnen antyder kan du använda den för att redigera dina PNG-filer samt komprimera JPG filer utan kvalitetsförlust.
Verktyget fungerar också utmärkt med transparenta bilder via, till exempel Photoshop, till exempel, bara kan spara rent i en 24-bitars PNG. TinyPNG:s algoritmer minskar dock storleken till 8 bitar – utan någon märkbar kvalitetsskillnad – och minskar därmed storleken på bildfilen med upp till 70 %.
Verktyget fungerar utan registrering och utan att behöva förklara det. Bara ladda upp och ladda ner.
Att accelerera webbplatser är extremt viktigt. Snabbare webbplatser ger nöjda användare. PageSpeed blir en rankningssignal.
Det finns naturligtvis andra bildkomprimeringsverktyg på webben, såsom Compressor.io, JPEGmini eller PunyPNG, men jag har haft den bästa upplevelsen så långt med det verktyg som beskrivs ovan – både när det gäller drift och resultat
Slutligen, notera att färgläget också spelar en viktig roll i filstorleken: På webben använder vi bara RGB-färgrymden, jämfört med CYMK i tryckproduktion. För färg – tre i en, fyra i den andra – är 8 bitar möjliga i CMYK-färgrymden, dvs totalt 32 bitar, vilket gör att filstorleken ibland är en tredjedel större.