Fr\u00e5n och med januari 2019 finns det \u00f6ver 1,94 miljarder webbplatser. Det \u00e4r mycket konkurrens. Vad \u00e4r ett bra s\u00e4tt att sticka ut? Fantastiska bilder. Synen dominerar faktiskt alla andra sinnen n\u00e4r det g\u00e4ller att interagera och absorbera information.<\/strong><\/p>\n H\u00e4r \u00e4r tre snabba fakta som hj\u00e4lper dig att f\u00f6rst\u00e5 hur viktiga bilder \u00e4r f\u00f6r m\u00e4nniskor (och SEO):<\/p>\n Med majoriteten av s\u00f6kvolymen som kommer fr\u00e5n telefoner, och i kombination med att m\u00e4nniskors uppm\u00e4rksamhetsintervall har minskat till \u00e5tta sekunder, \u00e4r det viktigt att webbplatser kan erbjuda en snabb anv\u00e4ndarupplevelse, utan slitningar och trevlig.<\/p>\n Bildoptimering \u00e4r en viktig del av detta pussel.<\/p>\n Det h\u00e4r \u00e4r n\u00e5gra tips som vem som helst kan ans\u00f6ka om f\u00f6r vilken typ av webbplats som helst (\u00e4ven WordPress), s\u00e5 att du inte bara \u00e4r utl\u00e4mnad till dina utvecklare och designers.<\/p>\n H\u00e4r \u00e4r en tabell som Google delade f\u00f6r att hj\u00e4lpa dig f\u00f6rst\u00e5 pixel-till-byte-f\u00f6rh\u00e5llandet. Kort sagt, du f\u00e5r en uppfattning om hur tung en bild kan vara baserat p\u00e5 dess dimensioner.<\/p>\n K\u00e4lla: Google.<\/p>\n Google n\u00e4mnde ocks\u00e5 att det tar fyra byte minne f\u00f6r att leverera en pixel. F\u00f6rest\u00e4ll dig om du hade flera bilder p\u00e5 en webbplats med 800 X 800 pixlar. v\u00e5r sida skulle ta \u00e5tminstone n\u00e5got runt 625 kBps. Eller i enklare termer, f\u00f6rest\u00e4ll dig en elefant som deltar i ett kaninlopp.<\/p>\n Jag skulle f\u00f6resl\u00e5 att du anv\u00e4nder en kombination av b\u00e5da klokt. Ett idealiskt f\u00f6rh\u00e5llande kan vara 40 % vektorbilder och 60 % rasterbilder.<\/p>\n SVG \u00e4r det enda och b\u00e4sta alternativet f\u00f6r vektorbilder. P\u00e5 grund av dess platta bilder drar du ocks\u00e5 nytta av h\u00f6g kvalitet som \u00e4r l\u00e4tt skalbar.<\/p>\n K\u00e4lla: W3Techs<\/p>\n Obs: Uppgifterna i diagrammet ovan \u00e4r fr\u00e5n 15 maj 2019.<\/p>\n Med ett moln fullt av enheter \u00e4r det uppenbart varf\u00f6r folk blir f\u00f6rvirrade \u00f6ver idealiska bildstorlekar.<\/p>\n Observera att bildstorlek och bildfilstorlek \u00e4r tv\u00e5 olika saker. H\u00e4r kommer vi att f\u00f6rklara hur du kan f\u00e5 den ideala bildstorleken (\u00e4ven kallad bildm\u00e5tt).<\/p>\n Som en del av bilddimensioner kommer vi \u00e4ven att titta p\u00e5 bildf\u00f6rh\u00e5llanden.<\/p>\n Bildf\u00f6rh\u00e5llande anger bredden och h\u00f6jden p\u00e5 en bild och skrivs i “x:y”-format.<\/p>\n Kommer du ih\u00e5g n\u00e4r du f\u00f6rs\u00f6kte skala en bild och bokstavligen bl\u00e5ste den ur proportion? Det \u00e4r precis vad det r\u00e4ddar dig fr\u00e5n. Att referera till bildf\u00f6rh\u00e5llandet medan du besk\u00e4r eller \u00e4ndra storlek p\u00e5 bilder hj\u00e4lper dig att bibeh\u00e5lla bearbetbarheten och sk\u00f6nheten i bilddimensionerna.<\/p>\n Du kan kolla in den h\u00e4r bilden som Shutterstock skapade f\u00f6r att lista n\u00e5gra vanliga bildf\u00f6rh\u00e5llanden.<\/p>\n Bild- och tabelldatak\u00e4lla: Shutterstock<\/p>\n Med h\u00e4nvisning till tabellen ovan \u00e4r det b\u00e4ttre att fokusera p\u00e5 bildf\u00f6rh\u00e5llandet 1:1 och 4:3 som \u00e4r l\u00e4mpliga f\u00f6r sociala medier, mobilsk\u00e4rmar, fotografering och utskrift.<\/p>\n Du kan ha dina egna dimensionsmallar baserade p\u00e5 det inneh\u00e5llshanteringssystem (CMS) du anv\u00e4nder.<\/p>\n Enligt Squarespace \u00e4r den mest idealiska storleken f\u00f6r bildoptimering i ett CMS 1500 och 2500 pixlar.<\/p>\n H\u00e4r \u00e4r ett snabbt och enkelt svar f\u00f6r att identifiera de vanligaste bildstorlekarna p\u00e5 webben.<\/p>\n Fr\u00e5n personlig observation kan jag f\u00f6resl\u00e5 att du anv\u00e4nder 1080 X 1080 pixlar och 1500 X 2500 pixlar.<\/p>\n Om du \u00e4r f\u00f6r lat f\u00f6r att g\u00e5 igenom alla dessa detaljer kan du ocks\u00e5 prova att skala bilden fr\u00e5n h\u00f6rnpilen samtidigt som du h\u00e5ller ned “Skift”-tangenten. Fungerar f\u00f6r vissa plattformar.<\/p>\n S\u00f6kmotorer har \u00f6gonl\u00f6sa hj\u00e4rnor, s\u00e5 om du inte namnger dina bilder korrekt kommer de inte att kunna “l\u00e4sa” dina bilder och ranka dig d\u00e4refter. Det \u00e4r h\u00e4r dina s\u00f6kord kommer in i bilden. Som jag n\u00e4mnde ovan, om du namnger dina bilder bra kan du f\u00f6rb\u00e4ttra din s\u00f6kordst\u00e4thet och rankingchanser.<\/p>\n L\u00e5t oss f\u00f6rklara detta med ett exempel:<\/p>\n Namnge dina bilder med sm\u00e5 bokst\u00e4ver med streck emellan och l\u00e4mna inte mellanslag. Som du har sett anv\u00e4nde jag nyckelordet “bildoptimering” i exemplet “fem tips f\u00f6r bildoptimering”. Du kommer att bli f\u00f6rv\u00e5nad \u00f6ver hur mycket det hj\u00e4lper i rankningen.<\/p>\n Du kan ocks\u00e5 anv\u00e4nda f\u00f6ljande f\u00f6r att f\u00f6rb\u00e4ttra s\u00f6kordsanv\u00e4ndningen i ditt webbplatsinneh\u00e5ll:<\/p>\n Plus, om du har en e-handelssida kan du till och med anv\u00e4nda strukturerad data f\u00f6r att ge s\u00f6kmotorn mer specifik information om f\u00e4rg, typ, storlek och fler av dina produkter.<\/p>\n Att komprimera en fil \u00e4r m\u00f6jligen den enklaste men mest avg\u00f6rande delen av bildoptimering eftersom det \u00e4r direkt relaterat till webbplatsens laddningstid. Punkt ett till fyra f\u00f6rbereder dig f\u00f6r det h\u00e4r sista steget av bildoptimering.<\/p>\n En filstorlek under 70kb \u00e4r vad du b\u00f6r sikta p\u00e5. F\u00f6r stora filer n\u00e4ra 300 kb \u00e4r det b\u00e4sta du kan uppn\u00e5 en filstorlek p\u00e5 100 kb. Om du g\u00f6r det f\u00f6rhindrar du att dina bilder tar extra millisekunder att ladda, samtidigt som du f\u00e5r f\u00f6rlustbringande komprimerade bilder som inte kompromissar med visuell kvalitet.<\/p>\n Allt du beh\u00f6ver g\u00f6ra \u00e4r att placera dessa filer p\u00e5 en filkomprimeringssida och du \u00e4r klar. H\u00e4r \u00e4r n\u00e5gra bra och gratis onlineverktyg f\u00f6r bildfilskomprimering:<\/p>\n Du kan anv\u00e4nda alla dessa bildoptimeringstips och fortfarande vara fast med en webbplats som laddas p\u00e5 13 sekunder eller \u00e4nnu v\u00e4rre. Det \u00e4r d\u00e5 du kanske vill fr\u00e5ga dig sj\u00e4lv:<\/p>\n Webbplatsens inneh\u00e5ll, b\u00e5de visuellt och skriftligt, har en sammanfl\u00e4tad relation som stimulerar k\u00e4nslor och inspirerar m\u00e4nniskor att engagera sig mer i din produkt eller tj\u00e4nst. M\u00e4nniskor (eller \u00e5tminstone jag) bed\u00f6mer ett f\u00f6retag efter dess webbplats, s\u00e5 ber\u00e4tta g\u00e4rna vad den senaste fantastiska webbplatsen du bes\u00f6kte var. Eller vad har du gjort f\u00f6r att optimera bilden?<\/p>\n \n
<\/span>Vad kan bildoptimering g\u00f6ra f\u00f6r mina anv\u00e4ndare (och f\u00f6r SEO)? <\/strong><\/span><\/h2>\n
\n
<\/span>Grundl\u00e4ggande bildoptimeringstips <\/strong><\/span><\/h2>\n
<\/span>1. V\u00e4lj r\u00e4tt bildtyp: vektor eller raster?<\/strong><\/span><\/h2>\n
\n
![\"Google-diagram](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/10\/1633412473_897_Todo-lo-que-necesita-saber-para-tener-exito.png\")
<\/p>\n<\/span>Slutsats<\/strong><\/span><\/h4>\n
<\/span>2. V\u00e4lj det b\u00e4sta bildformatet: SVG, JPG, PNG eller GIF?<\/strong><\/span><\/h2>\n
<\/span>B\u00e4sta formatet f\u00f6r vektorbilder: <\/strong><\/span><\/h3>\n
<\/span>De b\u00e4sta formaten f\u00f6r rasterbilder:<\/strong><\/span><\/h3>\n
\n
<\/span>H\u00e4r \u00e4r en tabell som kan hj\u00e4lpa dig att svara p\u00e5 vilket bildformat som \u00e4r b\u00e4st att anv\u00e4nda.<\/span><\/h4>\n
![\"Diagram](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/10\/1633412473_611_Todo-lo-que-necesita-saber-para-tener-exito.png\")
<\/p>\n<\/span>3. \u00c4ndra storlek p\u00e5 bilder<\/strong><\/span><\/h2>\n
<\/span>Vad \u00e4r ett bildf\u00f6rh\u00e5llande?<\/strong><\/span><\/h3>\n
<\/span>F\u00f6r att det \u00e4r viktigt?<\/strong><\/span><\/h3>\n
![\"](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/10\/Todo-lo-que-necesita-saber-para-tener-exito.jpg\")
<\/p>\n\n\n
\n bildf\u00f6rh\u00e5llande<\/td>\n Typiska m\u00e5tt (tum)<\/td>\n Typiska m\u00e5tt (pixlar)<\/td>\n Idealisk f\u00f6r<\/td>\n<\/tr>\n \n elva<\/td>\n 8×8<\/td>\n 1080×1080<\/td>\n Profilfoton p\u00e5 sociala medier och sk\u00e4rmar p\u00e5 mobila enheter<\/td>\n<\/tr>\n \n 3:2<\/td>\n 6×4<\/td>\n 1080×720<\/td>\n Fotografi och tryck<\/td>\n<\/tr>\n \n 4:3<\/td>\n 8×6<\/td>\n 1024 x 768 pixlar<\/td>\n TV, bildsk\u00e4rmar och digitalkameror.<\/td>\n<\/tr>\n \n 16:9<\/td>\n 1920 x 1080 och 1280 x 720<\/td>\n <\/td>\n Presentationer, bildsk\u00e4rmar och widescreen-tv<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n ![\"Diagram](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/10\/1633412473_832_Todo-lo-que-necesita-saber-para-tener-exito.jpg\")
K\u00e4lla: Shutterstock<\/p>\n<\/span>Slutsats<\/strong><\/span><\/h4>\n
<\/span>4. Namnge bilder: b\u00e4sta praxis<\/strong><\/span><\/h2>\n
\n
<\/span>Kusin<\/strong><\/span><\/h3>\n
\n
<\/span>5. Komprimera bytestorleken p\u00e5 bildfiler<\/strong><\/span><\/h2>\n
<\/span>Tv\u00e5 levande exempel p\u00e5 hur mycket laddningstid din slutresultat kan kosta:<\/span><\/h4>\n
\n
<\/span>Vilken \u00e4r den ideala bildfilstorleken?<\/strong><\/span><\/h3>\n
<\/span>Hur kan du minska filstorleken p\u00e5 en bild?<\/strong><\/span><\/h3>\n
\n
<\/span>Bonustips<\/strong><\/span><\/h3>\n
\n
<\/span>Avslutande anteckningar<\/strong><\/span><\/h2>\n
\n