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Ă„
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
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 șÚÁÏĂĆ-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
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
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:
- : det minskar filstorleken pÄ JPEG-bilder. Enligt deras sida kan den minska den med mer Àn 70%!
- : samma bildkompressor men för PNG-filer.
- : en webbapp för bildkomprimering som minskar bildstorleken genom mÄnga format.
- : 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.
- : 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 șÚÁÏĂĆ-butik kan du anvĂ€nda SEO-hastighet och bildoptimerare app frĂ„n șÚÁÏĂĆ App Market. Appen tillĂ„ter
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 . 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
À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
Komprimera JPEG & PNG
Àr ett plugin skapat av teamet bakom de tjÀnster vi redan har
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
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
À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 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
À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
À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
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
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 șÚÁÏĂĆ 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!
