Hur man optimerar produktbilder: Instruktioner och resurser

Posted 2 år sedan by Anastasia Prokofieva

Produktbilder hjälper till att försegla affären när kunder besöker din webbplats. För att behålla deras intresse måste du ha snygga bilder som laddas snabbt. Du måste med andra ord optimera dina produktbilder.

Du kanske undrar hur man hittar den optimala bildstorleken, hur man komprimerar bilder och hur man optimerar bilder utan att förlora kvalitet.

Vi har dig täckt. I den här artikeln kommer vi in på nitty-gritty av bildoptimering och ta en titt på de tillgängliga verktygen för att få jobbet gjort snabbt och enkelt.

Varför behöver du optimera bilder?

Bilder är en viktig del av varje webbplats. Detta gäller särskilt för en e-handelssida. Bilder påverkar kunder när de funderar på att köpa något. De lägger till webbsidans övergripande design, hjälper kunder att välja en produkt och förbättrar din webbplats SEO.

Du vill till exempel undvika att ladda upp stora filer. De kan sakta ner din sida, vilket påverkar din sökmotorrankning och driver bort potentiella kunder. Ingen vill vänta på att en sida ska laddas när han handlar online. Det är därför du måste optimera dina produktbilder.

Förstå bildens dimensioner och proportioner

Låt oss ta reda på vad du behöver vara uppmärksam på när du optimerar dina bilder.

En bilds storlek och dimensioner är verkligen viktiga. Dessa parametrar påverkar filstorleken och bildens utseende på olika enheter.

Storlek

Nu är eran av hög upplösning och hög hastighet Internet, men det betyder inte att vi inte ska oroa oss för att optimera bilder. Moderna kameror och till och med smartphones kan ta hög upplösning bilder. Du kanske till och med har förberett sådana bilder för din butik.

Men när bilderna är för stora är de inte lämpliga för Internet. De saktar ner laddningshastigheten, särskilt på en telefon. Om du inte vill att dina besökare ska bli otåliga och lämna din butik bör du minska storleken på dina bilder.

En bild har två storlekar:

Bildstorlek är det utrymme som en grafik tar upp på skärmen. Denna storlek mäts i pixlar (px), som är de individuella punkterna som bildar skärmen. Du kan ladda upp bilder i valfri storlek i Ecwid-butiken. De optimeras sedan för att passa bredden på webbläsarfönstret. Trots det är det bäst att minska dina produktbilder till cirka 1000 x 1000 px. Den storleken är tillräckligt stor för att visa produkten och tillräckligt liten för att laddas snabbt.
Filstorlek är det minnesutrymme som bilden tar upp. Denna storlek mäts i byte, typiskt Kilo- (Kb), mega- (Mb) och Gigabyte (Gb). Ju större filstorlek bilden har, desto mer lagringsutrymme kräver den.

Denna produktbilds storlek är 1920×1920 och dess filstorlek är 272 kB

Större filer tar längre tid att ladda. Programvara för filkomprimering utvecklades för att bekämpa detta problem. En bild komprimeras vanligtvis genom att optimera färgdata.

Men stark komprimering försämrar "kvaliteten" på bilder. Det orsakar brus eller en abrupt färgövergång.

För en filstorlek på cirka 1000 px kommer en bra komprimering att ta upp cirka 200 kB.

Låt oss nu lära oss mer om hur du väljer rätt proportioner för dina bilder.

proportioner

Proportionerna för en bild indikerar bredd till höjd förhållande.

Vissa förhållanden är mer tilltalande för ögat än andra. Standarduppsättningen av proportioner ser alltid bra ut. Dessa är 1:1, 4:3, 3:2 och 16:9.

Proportionerna är viktiga eftersom de hjälper till att definiera utseendet på din webbplats. Sträva efter samma proportioner för alla dina produktbilder för att ge ditt skyltfönster ett strukturerat och professionellt utseende.

Hur man väljer bildformat

En annan sak att tänka på för optimal bildbehandling är bildformat. Det är den typ av fil som en bild sparas i.

Det finns många typer av bildformat. Var och en har sina fördelar och nackdelar när det gäller kvalitet, komprimering och support. Du bör välja det format som ger den högsta kvaliteten med den minsta storleken.

De tre vanligaste formaten på webben är JPEG, PNG och GIF. Var och en bör användas på ett specifikt sätt.

Låt oss dela upp formaten:

GIF (Graphics Interchange Format) kan lagra komprimerad data utan kvalitetsförlust med högst 256 färger. Formatet stöder vanligtvis animationer. Länge var GIF det vanligaste formatet på Internet... tills PNG kom.
PNG (Portable Network Graphics) använder förlustfri komprimering och lagrar ett obegränsat antal färger.
JPEG (Joint Photographic Experts Group, namnet på utvecklaren) är det mest typiska formatet för att lagra foton och andra bilder. JPEG-algoritmen kan använda både förlustfri och förlustfri komprimering (mer om det senare.) Ju större filstorlek, desto mindre förlust.

Vilket format ska du välja? Om du har en animerad bild, det är enkelt – GIF är formatet du letar efter. Men hur är det med JPEG och PNG?

JPEG- och PNG-filer är lika, men de har också avgörande skillnader. JPEG-filer är mindre i storlek eftersom de använder en komprimeringsprocess som tar bort vissa data. PNG, å andra sidan, stöder transparenta bakgrunder och är bättre för grafisk design.

Den allmänna regeln är att använda JPG för fotografier och bilder som inte har en genomskinlig bakgrund. När det gäller PNG är det bättre att använda dem för grafik, filer med genomskinlig bakgrund och andra bilder där klarhet och färgstarkhet är viktigt. Så för produktbilder är det vettigt att föredra JPEG framför PNG.

Denna produktbild är i JPEG-format

Hur man komprimerar bilder utan att förlora kvalitet

Komprimering hjälper till att minska storleken på en bild. Ju lägre kvalitet, desto högre komprimering och desto mindre filstorlek.

Det finns två typer av komprimering:

Förlorad kompression minskar storleken på en fil genom att ta bort överflödiga data. Men när du komprimerar en fil på detta sätt kan det försämra bildkvaliteten avsevärt.
Lossless kompression är en teknik som håller kvaliteten på en fil hög. Det kommer dock inte att minska filstorleken så mycket som komprimering med förlust. Om du behöver minska filstorleken utan att märkbart påverka kvaliteten är det bättre att välja förlustfri komprimering.

Läs vidare för att lära dig om onlineverktyg som du kan använda för att komprimera en bild utan kvalitetsförlust.

Hur man optimerar bilder för webben: Verktygsöversikt

Vill du ta reda på hur man optimerar bilder för en webbplats? Tur för dig, du använder onlineverktyg för att optimera dina bilder automatiskt utan att spendera timmar på att titta på Photoshop-tutorials.

Följande webbplatser kan automatisera optimering åt dig:

Hur man optimerar bildstorlek: 4 enkla verktyg

Om du letar efter en filstorleksreducering, kolla in någon av följande tjänster. De är antingen gratis eller har gratis provperioder:

TinyJPG: det minskar filstorleken på JPEG-bilder. Enligt deras sida kan den minska den med mer än 70%!
TinyPNG: samma bildkompressor men för PNG-filer.
Squoosh: en webbapp för bildkomprimering som minskar bildstorleken genom många format.
Jpeg Mini: en fotokompressor för JPEG-filer. Den har mer avancerade funktioner som är användbara för fotografer, inklusive att exportera bilder direkt från Lightroom och Photoshop.
ImageOptim: en bildoptimerare för Mac-enheter. Du måste ladda ner den för att kunna använda den.

Optimera bilder med JPEGmini

Om du driver en Ecwid-butik kan du använda SEO-hastighet och bildoptimerare app från Ecwid App Market. Appen tillåter ett klick produktbildsoptimering och komprimering som bidrar till snabbare laddningstider för produktsidor.

Hur man optimerar bilder för WordPress

Om du har en WordPress-webbplats kan du använda en bildoptimerare och komprimeringsplugins. De hjälper dig att automatiskt optimera bilder på WordPress-webbplatser, vilket möjliggör bättre hastighet och prestanda.

Förresten, om du letar efter ett e-handelsplugin för din WordPress-webbplats, kolla in det här Ecwid by Lightspeed plugin. Det låter dig enkelt lägga till en onlinebutik på din WordPress-webbplats. När det har installerats skapar pluginet automatiskt en butikssida där dina kunder kan handla på din webbplats.

EWWW Image Optimizer
EWWW Image Optimizer är en av de bästa WordPress-plugins för att komprimera bilder och optimera bilder på din webbplats. Hela processen med att optimera bilder är automatiserad. Detta inkluderar komprimering av bilder och skalning för att passa sidan och enheten i rätt storlek. Plugin är prenumerationsbaserad men det erbjuder en 7-dagars gratis provperiod.

Komprimera JPEG & PNG
Komprimera JPEG & PNG är ett plugin skapat av teamet bakom de tjänster vi redan har nämns — TinyPNG och TinyJPG. Den komprimerar automatiskt bilder vid uppladdning. Du kan också massoptimera äldre bilder. Med ett gratis konto kan du optimera 500 bilder varje månad.

reSmush.it
reSmush.it är ett gratis plugin för WordPress-bildkomprimering för filer upp till 5MB. Du kan automatiskt optimera bilder vid uppladdning, massoptimera äldre bilder och utesluta vissa bilder från optimeraren.

Fler automatiska bildoptimeringsverktyg

Men vad händer om du inte har en WordPress-webbplats? Att manuellt optimera ett stort antal bilder är definitivt tidskrävande. Lyckligtvis finns det flera onlineverktyg tillgängliga för att automatiskt minska filstorlekarna till förbättra sidans hastighet.

ImageRecycle
ImageRecycle stöder olika bildformat, såsom JPEG, PNG, GIF och till och med PDF-filer.

Verktyget kan avgöra vilka bilder på din webbplats som behöver optimeras utifrån bildstorlek och dimension. Ange bara din webbadress så skickar ImageRecycle dig en kostnadsfri rapport via e-post. De har också en gratis provperiod så att du kan se deras optimeringsverktyg i aktion.

ImageKit.io
ImageKit.io är inte en vanlig bildkompressor utan ett bild-CDN (content delivery network). Den optimerar, ändrar storlek och skickar bilder genom sitt globala nätverk av servrar. Du kan registrera dig för en för evigt gratis plan.

Verktyg för redigering av produktbilder

Om du inte har något emot att redigera bilder själv och inte är rädd för lite gör-det-själv, kan du hitta verktyg för fotoredigering till hjälp. Här är några av dem:

Photoshop
Photoshop erbjuder en gratis online redaktör för grundläggande bildmanipulering (som att beskära eller ändra storlek på bilder). Det låter dig också ta bort bakgrund från bilder och finjustera dina foton med olika inställningar som kontrast, ljusstyrka, mättnad, värme eller skärpa.

Online Photoshop Editor har designmallar som du kan använda

GIMP
GIMP är ett gratisprogram lämpligt för Windows, Mac och Linux. Den erbjuder allt du behöver för professionell grafik och fotografier, inklusive verktyg för lager och masker, färgkorrigering, retuschering och målning. GIMP stöder alla större bildfilformat.

PicMonkey
PicMonkey är en onlineredigerare med ett enkelt gränssnitt och alla grundläggande funktioner, som att beskära, rotera, kontrollera skärpan, arbeta med färg och välja foton med upplösning. Den tillhandahåller mallar för att skapa bilder för annonser, sociala inlägg, logotyper, infografik och mer. Den har en 7-dagars gratis provperiod.

Pixlr
Pixlr erbjuder en gratis onlineredigerare och designresurser för nybörjare och proffs. Den har verktyg för färg, ritning och fotoredigering. Med Pixlr arbetar du med lager och använder olika effekter och filter. Om du är intresserad kan du Test-drive en premiumplan gratis i 30 dagar.

Mer om bildoptimering

Stora bilder kan sakta ner din webbplats, så det är viktigt att optimera dem för webben. Att hitta rätt bildformat för dina bilder genom att ändra storlek och komprimera kan göra underverk för hastigheten på din webbplats.

Och nu vet du de goda nyheterna: optimering är superlätt att göra! Du kan också komma tillbaka och referera till den här artikeln när du behöver.

Om du är en mer avancerad användare och ivrig efter att lära dig mer om hur du optimerar bilder för SEO rekommenderar vi att du tittar på den här videon från Google. Den går igenom några avancerade tips om hur du optimerar dina bilder för en webbplats. Se den här:

Oavsett hur erfaren du är som e-handelsägare, glöm aldrig bildoptimering. Även de enklaste verktygen kan göra dina bilder lämpliga för webben. Genom att optimera dina bilder kan du drastiskt påverka dina kunders köpupplevelse. Se till att dina produktbilder är både vackra och snabba att ladda!

Om du bara är i början av din e-handelsresa och behöver skapa en onlinebutik, kolla in Ecwid från Lightspeed. Det låter dig skapa en gratis onlinebutik själv, inga kodnings- eller designkunskaper behövs. Perfekt om du behöver börja sälja online så snart som möjligt!

Om författaren

Anastasia Prokofieva är en innehållsskribent på Ecwid. Hon skriver om marknadsföring och marknadsföring online för att göra entreprenörers vardag enklare och mer givande. Hon har också en soft spot för katter, choklad och att göra kombucha hemma.