{"id":27562,"date":"2018-11-21T08:05:27","date_gmt":"2018-11-21T16:05:27","guid":{"rendered":"https:\/\/kinqsta.com\/?p=4337"},"modified":"2023-10-26T07:14:58","modified_gmt":"2023-10-26T07:14:58","slug":"optimerar-bilder-for-webb","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/se\/blog\/optimerar-bilder-for-webb\/","title":{"rendered":"Hur du optimerar bilder f\u00f6r webb och prestanda"},"content":{"rendered":"<p>Lita p\u00e5 oss, du vill inte att Google ska hata din webbplats. Lyckligtvis kan du minska din bilds filstorlek f\u00f6r att f\u00f6rb\u00e4ttra din webbplatsprestanda.<\/p>\n<p>Ett problem med att formatera dem \u00e4r att \u00e4ndringarna ofta minskar deras kvalitet (vilket i sin tur kan f\u00e5 bes\u00f6karen att hata din webbplats). Det \u00e4r inte n\u00e5got d\u00e5ligt s\u00e5 l\u00e4nge du inte g\u00f6r dem fula.<\/p>\n<p>Det finns n\u00e5gra knep och tekniker som g\u00f6r att du kan minska bildens filstorlek och \u00e4nd\u00e5 g\u00f6ra dem tillr\u00e4ckligt fina f\u00f6r att stolt visa dem p\u00e5 din webbplats.<\/p>\n<p>S\u00e5 l\u00e5t oss ta en titt p\u00e5 hur du formaterar dina bilder utan att g\u00f6ra dem fula, liksom hur man <strong>optimerar bilder f\u00f6r webb och prestanda<\/strong>.<\/p>\n\n<div  class=\"featured-snippet\" id=\"featuredSnippet\">\n    <div class=\"featured-snippet__content\">\n        <h2>Vad inneb\u00e4r det att optimera bilder?<\/h2>\n        <div><p>Stora bilder sakta ner dina webbsidor vilket skapar en mindre \u00e4n optimal anv\u00e4ndarupplevelse. Optimering av bilder \u00e4r processen att <strong>minska deras filstorlek<\/strong>, antingen med hj\u00e4lp av ett plugin eller ett skript, vilket i sin tur \u00f6kar sidans laddningstid. Destruktiv och felfri komprimering \u00e4r tv\u00e5 vanliga metoder.<\/p>\n<\/div>\n    <\/div>\n    <div class=\"featured-snippet__footer\">\n        <div class=\"arrow-down\"><\/div>\n        <div class=\"featured-snippet__footer--content row nocol middle-xs between-xs reverse\">\n            <div style=\"margin-left: auto; position: relative; top: -1px\" class=\"row nocol middle-xs\">\n                <div class=\"color--mediumGray\" style=\"font-size: 14px; vertical-align: middle;\">\n                    <svg  class=\"icon icon--logo display--block\" aria-hidden=\"true\" focusable=\"false\"><use xlink:href=\"https:\/\/kinqsta.com\/se\/wp-content\/themes\/kinsta\/dist\/sprite.svg?v=e8af2143e3b8bceb5561b327e81ec085#logo\" \/><\/svg>                <\/div>\n                <div class=\"text--bold color--mediumGray\" style=\"padding-left: 3px;\">Support<\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h3>Kolla in v\u00e5r <a href=\"https:\/\/www.youtube.com\/watch?v=rMKI-fLBTfM\">videoguide<\/a> om hur du optimerar bilder f\u00f6r SEO<\/h3>\n<kinsta-video src=\"https:\/\/www.youtube.com\/watch?v=rMKI-fLBTfM\"><\/kinsta-video>\n<h2><a id=\"benefits-of-formatting-images\"><\/a>F\u00f6rdelarna med att formatera dina bilder<\/h2>\n<p>F\u00f6rst och fr\u00e4mst, varf\u00f6r beh\u00f6ver du formatera dina bilder? Vad \u00e4r f\u00f6rdelarna? Det finns m\u00e5nga f\u00f6rdelar med att optimera dina bilder f\u00f6r prestanda. <a href=\"https:\/\/httparchive.org\/reports\/page-weight\" target=\"_blank\" rel=\"noopener noreferrer\">Enligt HTTP-arkivet<\/a> <strong>utg\u00f6r bilderna i genomsnitt 21 % av den totala webbsidans vikt<\/strong>. S\u00e5 n\u00e4r det g\u00e4ller att <a href=\"https:\/\/kinqsta.com\/se\/lar\/snabba-upp-wordpress\/\">optimera din webbplats<\/a> \u00e4r bilder \u00f6verl\u00e4gset den f\u00f6rsta platsen du b\u00f6r b\u00f6rja!<\/p>\n<p>Det \u00e4r viktigare \u00e4n skript och teckensnitt. Och ironiskt nog \u00e4r ett bra bildoptimeringsarbetsfl\u00f6de en av de enklaste sakerna att genomf\u00f6ra, men av m\u00e5nga webbplats\u00e4gare f\u00f6rbises detta.<\/p>\n<figure id=\"attachment_35961\" aria-describedby=\"caption-attachment-35961\" style=\"width: 1503px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-35961 size-full\" src=\"https:\/\/kinqsta.com\/se\/wp-content\/uploads\/sites\/9\/2018\/11\/genomsnittliga-byte-per-sida.png\" alt=\"Genomsnittliga byte per sida (KB)\" width=\"1503\" height=\"1385\"><figcaption id=\"caption-attachment-35961\" class=\"wp-caption-text\">Genomsnittliga byte per sida (KB)<\/figcaption><\/figure>\n<p>H\u00e4r \u00e4r en titt p\u00e5 de viktigaste f\u00f6rdelarna:<\/p>\n<ul style=\"margin-left: 30px\">\n<li>Det kommer att f\u00f6rb\u00e4ttra sidladdningshastigheten (se v\u00e5r fallstudie nedan f\u00f6r hur mycket det p\u00e5verkar din hastighet). Om din sida tar f\u00f6r l\u00e5ng tid att ladda kan dina bes\u00f6kare tr\u00f6ttna p\u00e5 att v\u00e4nta och g\u00e5 vidare till n\u00e5got annat. F\u00f6r mer information om hur du optimerar sidans laddningstid, se v\u00e5r <a href=\"https:\/\/kinqsta.com\/learn\/page-speed\/\" target=\"_blank\" rel=\"noopener noreferrer\">djupg\u00e5ende sidhastighetsoptimeringsguide<\/a>.<\/li>\n<li>Kombinerat med en <a href=\"https:\/\/kinqsta.com\/se\/blog\/basta-seo-plugin-for-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">bra SEO WordPress plugin<\/a> f\u00f6rb\u00e4ttras din <a href=\"https:\/\/kinqsta.com\/se\/blog\/vad-star-seo-for\/\" target=\"_blank\" rel=\"noopener noreferrer\">SEO<\/a>. Din webbplats rankas h\u00f6gre i <a href=\"https:\/\/kinqsta.com\/se\/blog\/alternativa-sokmotorer\/\">s\u00f6kmotorens<\/a> resultat. Stora filer saktar ner din webbplats och s\u00f6kmotorer hatar l\u00e5ngsamma webbplatser. Google kan ocks\u00e5 genoms\u00f6ka och indexera dina bilder snabbare f\u00f6r Google bilds\u00f6kning. Nyfiken om vilken procentandel av din trafik som kommer fr\u00e5n Google bilds\u00f6kning? Du kan anv\u00e4nda ett <a href=\"https:\/\/kinqsta.com\/se\/blog\/google-analytics-wordpress\/\">Google Analytics WordPress<\/a>-segment f\u00f6r att <a href=\"https:\/\/passion.digital\/blog\/how-to-check-image-traffic-in-ga\/\" target=\"_blank\" rel=\"noopener noreferrer\">kontrollera Googles bilds\u00f6kningstrafik<\/a>.<\/li>\n<li>Att skapa s\u00e4kerhetskopior g\u00e5r snabbare.<\/li>\n<li>Mindre bildfilstorlekar anv\u00e4nder mindre bandbredd. N\u00e4tverk och webbl\u00e4sare kommer att uppskatta detta.<\/li>\n<li>Kr\u00e4ver <a href=\"https:\/\/kinqsta.com\/se\/blog\/diskanvandning-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">mindre lagringsutrymme p\u00e5 servern<\/a> (detta beror p\u00e5 hur m\u00e5nga miniatyrer du optimerar)<\/li>\n<\/ul>\n\n<p>Som Kinsta-kund s\u00e5 kan du dra nytta av bildoptimering kostnadsfritt genom att aktivera automatisk bildoptimering med endast n\u00e5gra klick. Vi kommer att g\u00e5 in p\u00e5 detta mer nedan.<\/p>\n<h2><a id=\"how-to-optimize-images\"><\/a>Hur du optimerar bilder f\u00f6r webb och prestanda<\/h2>\n<p>Det prim\u00e4ra m\u00e5let med att formatera dina bilder \u00e4r att <strong>hitta balansen mellan den l\u00e4gsta filstorleken och en acceptabel kvalitet<\/strong>.<\/p>\n<p>Det finns mer \u00e4n ett s\u00e4tt att utf\u00f6ra n\u00e4stan alla dessa optimeringar. Ett av de mest popul\u00e4ra s\u00e4tten \u00e4r att helt enkelt komprimera dem innan du laddar upp till <a href=\"https:\/\/kinqsta.com\/se\/blog\/vad-ar-wordpress\/\">WordPress<\/a>. Vanligtvis kan detta g\u00f6ras i ett verktyg som Adobe Photoshop eller Affinity Photo. N\u00e5gra av dessa uppgifter kan ocks\u00e5 utf\u00f6ras med plugins, som vi kommer att g\u00e5 in mer p\u00e5 nedan.<\/p>\n\n<p>De tv\u00e5 prim\u00e4ra sakerna att t\u00e4nka p\u00e5 \u00e4r <strong>filformatet<\/strong> och <strong>typen av komprimering<\/strong> du anv\u00e4nder. Genom att v\u00e4lja r\u00e4tt kombination av filformat och kompressionstyp kan du minska din bildstorlek med s\u00e5 mycket som fem g\u00e5nger. Du beh\u00f6ver experimentera med varje bild eller filformat f\u00f6r att se vad som fungerar b\u00e4st.<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"decimal\" selector=\"h3\" count-number=\"5\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<h3>1. V\u00e4lj r\u00e4tt filformat<\/h3>\n<p>Innan du b\u00f6rjar \u00e4ndra dina bilder, se till att du har valt <a href=\"https:\/\/kinqsta.com\/se\/blog\/basta-bildfilstyperna\/\">den b\u00e4sta filtypen<\/a>. Det finns flera typer av filer du kan anv\u00e4nda:<\/p>\n<ul style=\"margin-left: 30px\">\n<li><strong>PNG<\/strong>\u00a0\u2013 producerar bilder av h\u00f6gre kvalitet, men har ocks\u00e5 en st\u00f6rre filstorlek. Skapades som ett felfritt bildformat, \u00e4ven om det ocks\u00e5 kan inneb\u00e4ra f\u00f6rst\u00f6ring.<\/li>\n<li><strong>JPEG<\/strong>\u00a0\u2013 anv\u00e4nder\u00a0<a href=\"https:\/\/kinqsta.com\/se\/blog\/destruktiv-komprimering\/\" target=\"_blank\" rel=\"noopener noreferrer\">destruktiv och felfri optimering<\/a>. Du kan justera kvalitetsniv\u00e5n f\u00f6r en bra balans mellan kvalitet och filstorlek.<\/li>\n<li><strong>GIF<\/strong>\u00a0\u2013 anv\u00e4nder bara 256 f\u00e4rger. Det \u00e4r det b\u00e4sta valet f\u00f6r animerade bilder. Det anv\u00e4nder bara felfri kompression.<\/li>\n<\/ul>\n<p>Det finns flera andra, till exempel JPEG XR och <a href=\"https:\/\/kinqsta.com\/se\/blog\/webp\/\">WebP<\/a>, men de st\u00f6ds inte universellt av <a href=\"https:\/\/kinqsta.com\/se\/marknadsandel-for-webblasare\/\">alla webbl\u00e4sare<\/a>. Helst b\u00f6r du anv\u00e4nda JPEG eller JPG f\u00f6r bilder med mycket f\u00e4rg och PNG f\u00f6r enkla bilder.<\/p>\n<p>(F\u00f6reslagen l\u00e4sning: <a href=\"https:\/\/kinqsta.com\/se\/blog\/jpg-vs-jpeg\/\">JPG vs JPEG: F\u00f6rst\u00e5 det vanligaste bildfilformatet<\/a>)<\/p>\n<h3>2. Kompressionskvalitet vs storlek<\/h3>\n<p>H\u00e4r \u00e4r ett exempel p\u00e5 vad som kan h\u00e4nda om du komprimerar en bild f\u00f6r mycket. Den f\u00f6rsta anv\u00e4nder en mycket l\u00e5g kompressionshastighet, vilket resulterar i h\u00f6gsta kvalitet (men st\u00f6rre filstorlek). Den andra anv\u00e4nder en mycket h\u00f6g kompressionshastighet, vilket resulterar i en mycket l\u00e5gkvalitativ bild (men mindre filstorlek). Obs! Den ursprungliga bilden \u00e4r or\u00f6rd 2,06 MB.<\/p>\n<figure style=\"width: 1717px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/se\/wp-content\/uploads\/sites\/9\/2015\/11\/lag-komprimering-hogkvalitativ.jpg\" alt=\"L\u00e5g komprimering (h\u00f6gkvalitativ)\" width=\"1717\" height=\"1151\"><figcaption class=\"wp-caption-text\">L\u00e5g komprimering (h\u00f6gkvalitativ) JPG &#8211; 590 KB<\/figcaption><\/figure>\n<figure style=\"width: 1717px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/se\/wp-content\/uploads\/sites\/9\/2015\/11\/hog-komprimering-lag-kvalitet.jpg\" alt=\"H\u00f6g komprimering (l\u00e5g kvalitet) JPG - 68 KB\" width=\"1717\" height=\"1151\"><figcaption class=\"wp-caption-text\">H\u00f6g komprimering (l\u00e5g kvalitet) JPG &#8211; 68 KB<\/figcaption><\/figure>\n<p>Som du kan se \u00e4r den f\u00f6rsta bilden ovan 590 KB. Det \u00e4r ganska stort f\u00f6r bara ett foto! Generellt \u00e4r det b\u00e4st om du kan h\u00e5lla en webbsidas totalvikt under 1 eller 2 MB i storlek. 590 KB skulle redan vara en fj\u00e4rdedel av det. Den andra bilden ser uppenbarligen hemsk ut, men s\u00e5 \u00e4r den bara 68 KB. Vad du vill g\u00f6ra \u00e4r att hitta ett bra medium mellan komprimeringshastigheten (kvalitet) och filstorleken.<\/p>\n<p>S\u00e5 vi tog bilden igen med en medelh\u00f6g kompressionshastighet och som du kan se nedan ser kvaliteten nu bra ut, och filstorleken \u00e4r 151 KB, vilket \u00e4r acceptabelt f\u00f6r ett h\u00f6guppl\u00f6st foto. Detta \u00e4r n\u00e4stan 4x mindre \u00e4n det ursprungliga fotot med l\u00e5g komprimering. Vanligtvis b\u00f6r enklare bilder som PNG-filer vara under 100 kB eller mindre f\u00f6r b\u00e4sta prestanda.<\/p>\n<figure style=\"width: 1717px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/se\/wp-content\/uploads\/sites\/9\/2015\/11\/medium-kompression-bra-kvalitet.jpg\" alt=\"Medium kompression (bra kvalitet) JPG - 151 KB\" width=\"1717\" height=\"1151\"><figcaption class=\"wp-caption-text\">Medium kompression (bra kvalitet) JPG &#8211; 151 KB<\/figcaption><\/figure>\n<h3>3. F\u00f6rst\u00e5 f\u00f6rst\u00f6rande vs f\u00f6rlustfri komprimering<\/h3>\n<p>Det \u00e4r ocks\u00e5 viktigt att f\u00f6rst\u00e5 att det finns tv\u00e5 typer av kompression du kan anv\u00e4nda, <a href=\"https:\/\/kinqsta.com\/blog\/lossy-vs-lossless\/\">destruktiv och felfri<\/a>.<\/p>\n<p><strong>Destruktiv:<\/strong>\u00a0det h\u00e4r \u00e4r ett filter som eliminerar data. Detta kommer att f\u00f6rs\u00e4mra bilden, s\u00e5 du m\u00e5ste vara f\u00f6rsiktig med hur mycket du ska minska bilden. Filstorleken kan minskas mycket. Du kan anv\u00e4nda verktyg som Adobe Photoshop, Affinity Photo eller andra bildredigerare f\u00f6r att justera bildens kvalitetsinst\u00e4llningar. Exemplet vi anv\u00e4nde ovan anv\u00e4nder <a href=\"https:\/\/kinqsta.com\/se\/blog\/destruktiv-komprimering\/\">destruktiv kompression<\/a>.<\/p>\n<p><strong>Felfri:<\/strong> det h\u00e4r \u00e4r ett filter som komprimerar data. Detta minskar inte kvaliteten men det kr\u00e4ver att bilderna komprimeras innan de kan \u00e5terges. Du kan utf\u00f6ra en felfri komprimering p\u00e5 datorn med hj\u00e4lp av verktyg som Photoshop, <a href=\"https:\/\/nikkhokkho.sourceforge.io\/static.php?page=FileOptimizer\" target=\"_blank\" rel=\"noopener noreferrer\">FileOptimizer<\/a> eller <a href=\"https:\/\/imageoptim.com\/api\" target=\"_blank\" rel=\"noopener noreferrer\">ImageOptim<\/a>.<\/p>\n<p>Det \u00e4r b\u00e4st att experimentera med kompressionsteknikerna f\u00f6r att se vad som b\u00e4st fungerar f\u00f6r varje bild eller format. Om dina verktyg har valm\u00f6jligheten, se till att du sparar bilden f\u00f6r webben. Detta \u00e4r ett alternativ i m\u00e5nga bildredigerare och ger dig kvalitetsjusteringar s\u00e5 att du kan utf\u00f6ra optimal komprimering. Du kommer att f\u00f6rlora en del av kvaliteten, s\u00e5 f\u00f6rs\u00f6k att hitta det b\u00e4sta resultatet du kan utan att g\u00f6ra bilderna fula.<\/p>\n<h3>4. Bildoptimeringsverktyg och -program<\/h3>\n<p>Det finns m\u00e5nga verktyg och program d\u00e4r ute, b\u00e5de premium och gratis, som du kan anv\u00e4nda f\u00f6r att optimera dina bilder.<\/p>\n<p>Vissa ger dig verktygen f\u00f6r att utf\u00f6ra dina egna optimeringar och andra g\u00f6r jobbet \u00e5t dig. Vi \u00e4r personligen stora fans av <a href=\"https:\/\/affinity.serif.com\/en-us\/photo\/\" target=\"_blank\" rel=\"noopener noreferrer\">Affinity Photo<\/a>, eftersom det \u00e4r billigt och ger dig n\u00e4stan identiska funktioner som Adobe Photoshop.<\/p>\n<figure style=\"width: 2165px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/se\/wp-content\/uploads\/sites\/9\/2015\/11\/affinity-photo.jpg\" alt=\"affinity photo\" width=\"2165\" height=\"1354\"><figcaption class=\"wp-caption-text\">Komprimera bilder in Affinity Photo<\/figcaption><\/figure>\n<p>H\u00e4r \u00e4r ytterligare n\u00e5gra verktyg och program att kika p\u00e5:<\/p>\n<ul style=\"margin-left: 30px\">\n<li><a href=\"https:\/\/www.adobe.com\/products\/photoshop.html\" target=\"_blank\" rel=\"noopener noreferrer\">Adobe Photoshop<\/a><\/li>\n<li><a href=\"https:\/\/www.gimp.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">Gimp<\/a><\/li>\n<li><a href=\"https:\/\/www.getpaint.net\/index.html\" target=\"_blank\" rel=\"noopener noreferrer\">Paint.NET<\/a><\/li>\n<li><a href=\"http:\/\/www.lcdf.org\/gifsicle\/\" target=\"_blank\" rel=\"noopener noreferrer\">GIFsicle<\/a><\/li>\n<li><a href=\"https:\/\/www.jpegmini.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">JPEG Mini<\/a><\/li>\n<li><a href=\"https:\/\/optipng.sourceforge.net\/\" target=\"_blank\" rel=\"noopener noreferrer\">OptiPNG<\/a><\/li>\n<li><a href=\"https:\/\/pngquant.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">pngquant<\/a><\/li>\n<li><a href=\"https:\/\/nikkhokkho.sourceforge.io\/static.php?page=FileOptimizer\" target=\"_blank\" rel=\"noopener noreferrer\">FileOptimizer<\/a><\/li>\n<li><a href=\"https:\/\/imageoptim.com\/api\" target=\"_blank\" rel=\"noopener noreferrer\">ImageOptim<\/a><\/li>\n<li><a href=\"https:\/\/trimage.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">Trimage<\/a><\/li>\n<li><a href=\"https:\/\/imageresizer.com\/image-compressor\" target=\"_blank\" rel=\"noopener noreferrer\">ImageResize.org<\/a><\/li>\n<li><a href=\"https:\/\/kinqsta.com\/docs\/wordpress-hosting\/wordpress-cdn\/kinsta-cdn\/#image-optimization-1\">Kinsta&#8217;s Image Optimization feature<\/a><\/li>\n<\/ul>\n<p>Gl\u00f6m inte att dina metoder f\u00f6r att visa bilder \u00e4r lika viktiga som filstorleken. M\u00e5nga premium-hostar som Kinsta <a href=\"https:\/\/kinqsta.com\/docs\/wordpress-hosting\/wordpress-cdn\/kinsta-cdn\/#kinstas-cdn\">implementerar ett CDN<\/a> f\u00f6r att snabbt leverera bilder och andra filer till anv\u00e4ndare. Kinsta\u2019s <a href=\"https:\/\/kinqsta.com\/se\/blog\/cloudflare-integrering\/\">kostnadsfria Cloudflare-integrering<\/a> skyddar \u00e4ven alla webbplatser p\u00e5 plattformen, vilket g\u00f6r det b\u00e5de snabbt och s\u00e4kert.<\/p>\n<h3 id=\"resizing-images-to-scale\">5. \u00c4ndra storlek p\u00e5 bilder f\u00f6r att skala<\/h3>\n<p>Tidigare var det mycket viktigt att ladda upp bilder i r\u00e4tt skala och inte l\u00e5ta <a href=\"https:\/\/kinqsta.com\/blog\/css-image-styling\/\">CSS<\/a> \u00e4ndra storlek p\u00e5 dem. Men det h\u00e4r \u00e4r inte l\u00e4ngre lika viktigt eftersom WordPress 4.4 nu st\u00f6der <a href=\"https:\/\/make.wordpress.org\/core\/2015\/11\/10\/responsive-images-in-wordpress-4-4\/\" target=\"_blank\" rel=\"noopener noreferrer\">responsiva bilder<\/a>\u00a0(inte nerskalad av CSS).<\/p>\n<p>I grund och botten skapar WordPress automatiskt flera storlekar av varje bild som laddas upp i mediebiblioteket. Genom att inkludera de tillg\u00e4ngliga storlekarna f\u00f6r en bild i ett\u00a0<code>srcset<\/code>-attribut kan webbl\u00e4sare nu v\u00e4lja att h\u00e4mta den l\u00e4mpligaste storleken och ignorera de andra. Se ett exempel p\u00e5 hur din kod faktiskt ser ut nedan.<\/p>\n<div id class=\"wp-caption aligncenter\">\n<figure style=\"width: 1386px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"srcset responsive images example in code\" src=\"https:\/\/kinqsta.com\/se\/wp-content\/uploads\/sites\/9\/2018\/05\/srcset-responsiva-bilder.png\" alt=\"srcset responsiva bilder, exempel i kod\" width=\"1386\" height=\"302\"><figcaption class=\"wp-caption-text\">srcset responsiva bilder, exempel i kod<\/figcaption><\/figure>\n<\/div>\n<p>S\u00e5 med fler och fler HiDPI-sk\u00e4rmar idag kan det vara bra att hitta ett bra medium. S\u00e4g 2x eller 3x din webbplats kolumn eller div-storlek, men fortfarande mindre \u00e4n originalstorleken. Webbl\u00e4saren visar den r\u00e4tta, baserat p\u00e5 enhetens uppl\u00f6sning.<\/p>\n<p>WordPress-mediebiblioteket <a href=\"https:\/\/kinqsta.com\/se\/blog\/sa-regenererar-du-miniatyrer\/\">skapar miniatyrer baserat<\/a> p\u00e5 dina inst\u00e4llningar. Emellertid beh\u00e5lls originalet fortfarande or\u00f6rt. Om du vill \u00e4ndra storlek p\u00e5 dina bilder och spara diskutrymme genom att inte spara originalet kan du anv\u00e4nda en gratis plugin som <a href=\"https:\/\/wordpress.org\/plugins\/imsanity\/\" target=\"_blank\" rel=\"noopener noreferrer\">Imsanity<\/a>.<\/p>\n<figure style=\"width: 1626px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"WordPress media settings\" src=\"https:\/\/kinqsta.com\/se\/wp-content\/uploads\/sites\/9\/2017\/05\/wordpress-mediainstallningar.png\" alt=\"WordPress-mediainst\u00e4llningar\" width=\"1626\" height=\"1314\"><figcaption class=\"wp-caption-text\">WordPress-mediainst\u00e4llningar<\/figcaption><\/figure>\n<p>Imsanity till\u00e5ter dig att st\u00e4lla in en sanitetsgr\u00e4ns s\u00e5 att alla uppladdade bilder kommer att begr\u00e4nsas till en rimlig storlek som fortfarande \u00e4r mer \u00e4n tillr\u00e4ckligt stor f\u00f6r behoven hos en vanlig webbplats.<\/p>\n<p>Imsanity krokar till WordPress direkt efter bilduppladdning, men innan WordPress-behandling sker. S\u00e5 WordPress fungerar exakt likadant p\u00e5 alla s\u00e4tt, f\u00f6rutom att det kommer att vara som om bidragsgivaren hade skalat sin bild till en rimlig storlek innan den laddades upp.<\/p>\n<h4>Rensa mediebiblioteket<\/h4>\n<p>Om du letar efter ett verktyg f\u00f6r att spara utrymme samtidigt som du st\u00e4dar upp ditt mediebibliotek kan du anv\u00e4nda <a href=\"https:\/\/wordpress.org\/plugins\/media-cleaner\/\">Media Cleaner<\/a> f\u00f6r att hitta oanv\u00e4nda mediefiler. Plugin-programmet kommer att skanna alla dina mediefiler och lista oanv\u00e4nda i Media Cleaner-instrumentpanelen s\u00e5 att du kan bl\u00e4ddra igenom och ta bort dem.<\/p>\n<p>Media Cleaner implementerar ett smart skr\u00e4psystem: n\u00e4r filer tas bort flyttas de till papperskorgen. P\u00e5 s\u00e5 s\u00e4tt kan du testa din webbplats ett tag och se till att allt fungerar. Om en fil- eller mediepost saknas kan du enkelt \u00e5terst\u00e4lla den med ett klick eller helt enkelt t\u00f6mma papperskorgen om allt ser bra ut.<\/p>\n<h2><a id=\"image-optimization-wordpress-plugins\"><\/a>Bildoptimerings-plugins du kan anv\u00e4nda<\/h2>\n<p>Med WordPress s\u00e5 beh\u00f6ver du inte g\u00f6ra all formatering eller komprimering f\u00f6r hand. Du kan anv\u00e4nda plugins f\u00f6r att \u00e5tminstone l\u00e5ta en del av arbetet ske automatiskt.<\/p>\n<p>Det finns flera plugins som automatiskt optimerar dina bildfiler n\u00e4r du laddar upp dem. De kommer till och med att optimera bilder som du redan har laddat upp. Detta \u00e4r en praktisk funktion \u2013 speciellt om du redan har en webbplats som \u00e4r fylld med bilder. H\u00e4r \u00e4r en titt p\u00e5 n\u00e5gra av de b\u00e4sta pluginen f\u00f6r att formatera dina bilder f\u00f6r b\u00e4ttre prestanda.<\/p>\n<p>Det \u00e4r dock viktigt att du inte bara f\u00f6rlitar dig p\u00e5 sj\u00e4lva pluginet. Du b\u00f6r exempelvis inte ladda upp bilder p\u00e5 2 MB till ditt WordPress-mediebibliotek. Detta kan resultera i att din webb-hosts diskutrymme \u00e4ts upp riktigt snabbt.<\/p>\n<p>Den b\u00e4sta metoden \u00e4r att snabbt \u00e4ndra storlek p\u00e5 bilden i ett fotoredigeringsverktyg i f\u00f6rv\u00e4g. Ladda sedan upp den och anv\u00e4nd ett av f\u00f6ljande plugins f\u00f6r att minska den ytterligare.<\/p>\n<p>Innan du best\u00e4mmer dig f\u00f6r n\u00e5got av dessa verktyg eller plugins s\u00e5 b\u00f6r du dock kontrollera att din <a href=\"https:\/\/kinqsta.com\/se\/blog\/byrafokuserad-hanterad-hosting\/\">hosting-leverant\u00f6r<\/a> inte erbjuder inbyggda verktyg f\u00f6r att g\u00f6ra jobbet \u00e5t dig. Kinsta\u2019s kunder har exempelvis tillg\u00e5ng till en <a href=\"https:\/\/kinqsta.com\/docs\/wordpress-hosting\/wordpress-cdn\/kinsta-cdn\/#image-optimization-1\">kostnadsfri funktion f\u00f6r bildoptimering<\/a>. Den skapar optimerade kopior av alla WordPress-bilder automatiskt, som lagras kostnadsfritt. Den minsta av de tv\u00e5 bildfilerna serveras sedan med <a href=\"https:\/\/kinqsta.com\/docs\/wordpress-hosting\/wordpress-cdn\/kinsta-cdn\/#kinstas-cdn\">Kinsta\u2019s blixtsnabba CDN<\/a> f\u00f6r att \u00f6ka hastigheten ytterligare. Kunder kan till och med v\u00e4lja mellan f\u00f6rst\u00f6rande och f\u00f6rlustfri komprimering beroende p\u00e5 deras behov.<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"decimal\" selector=\"h3\" count-number=\"7\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<h3 id=\"imagify\">1. Imagify Image Optimizer<\/h3>\n<figure style=\"width: 1349px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/wordpress.org\/plugins\/imagify\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/se\/wp-content\/uploads\/sites\/9\/2015\/11\/imagify-bildtoptimeringsplugin.jpg\" alt=\"Imagify Bildtoptimeringsplugin\" width=\"1349\" height=\"437\"><\/a><figcaption class=\"wp-caption-text\">Imagify Bildtoptimeringsplugin<\/figcaption><\/figure>\n<p><a href=\"https:\/\/wordpress.org\/plugins\/imagify\/\" target=\"_blank\" rel=\"noopener noreferrer\">Imagify<\/a> \u00e4r skapad av samma team som utvecklat WP Rocket, som de flesta av er f\u00f6rmodligen \u00e4r bekanta med. Den \u00e4r WooCommerce, <a href=\"https:\/\/kinqsta.com\/se\/blog\/fotogalleri-pluginen-wordpress\/#nextgen-gallery\">NextGen Gallery<\/a> och WP Retina-kompatibel. Den har ocks\u00e5 en mass-optimeringsfunktion och du kan v\u00e4lja mellan tre olika niv\u00e5er av kompression: normal, aggressiv och ultra. Den har ocks\u00e5 en \u00e5terst\u00e4llningsfunktion, s\u00e5 om du \u00e4r missn\u00f6jd med kvaliteten kan du enkelt \u00e5terst\u00e4lla och komprimera p\u00e5 en niv\u00e5 som b\u00e4ttre passar dina behov. Det finns en gratis och en premium version. Du \u00e4r begr\u00e4nsad till en kvot p\u00e5 25 MB bilder per m\u00e5nad med ett gratis konto.<\/p>\n<p>Att bli av med den ursprungliga bilden och \u00e4ndra storlek p\u00e5 dina st\u00f6rre bilder kan ocks\u00e5 g\u00f6ras med denna plugin.<\/p>\n<figure style=\"width: 1554px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/se\/wp-content\/uploads\/sites\/9\/2017\/05\/andra-storlek-imagify.png\" alt=\"\u00c4ndra storlek p\u00e5 bilder i Imagify\" width=\"1554\" height=\"649\"><figcaption class=\"wp-caption-text\">\u00c4ndra storlek p\u00e5 bilder i Imagify<\/figcaption><\/figure>\n<p>Imagify <strong>komprimerar ocks\u00e5 bilder p\u00e5 sina tredjeparts-servrar<\/strong>, inte din, vilket \u00e4r mycket viktigt n\u00e4r det g\u00e4ller prestanda. Imagify b\u00f6r inte sakta ner din WordPress-webbplats.<\/p>\n<h3 id=\"optimole\">2. Optimole<\/h3>\n<figure id=\"attachment_39491\" aria-describedby=\"caption-attachment-39491\" style=\"width: 1539px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/wordpress.org\/plugins\/optimole-wp\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-39491 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2017\/05\/optimole-1-1.jpg\" alt=\"Optimole\" width=\"1539\" height=\"495\" data-must_clone=\"true\"><\/a><figcaption id=\"caption-attachment-39491\" class=\"wp-caption-text\">Optimole plugin<\/figcaption><\/figure>\n<p><a href=\"https:\/\/wordpress.org\/plugins\/optimole-wp\/\">Optimole<\/a> \u00e4r en bildoptimeringsplugin f\u00f6r WordPress som automatiskt minskar storleken p\u00e5 dina bilder utan att det kr\u00e4vs n\u00e5got arbete fr\u00e5n din sida. Den har en stor f\u00f6rdel n\u00e4r det g\u00e4ller hemsidans laddningshastighet eftersom den \u00e4r helt molnbaserad och aldrig visar bilder som \u00e4r st\u00f6rre \u00e4n de borde vara, med andra ord visar den en perfekt bildstorlek f\u00f6r bes\u00f6karens visningsomr\u00e5de och webbl\u00e4sare.<\/p>\n<p>Dessutom ger denna plugin lazy loading och effektivt bildbyte \u2013 den nedgraderar bildkvaliteten om bes\u00f6karen har en l\u00e5ngsammare internetuppkoppling &#8211; vilket g\u00f6r att den sticker ut fr\u00e5n m\u00e4ngden. Den k\u00e4nner ocks\u00e5 automatiskt av anv\u00e4ndarens webbl\u00e4sare och visar <a href=\"https:\/\/kinqsta.com\/se\/blog\/webp\/\">WebP<\/a> om det st\u00f6ds.<\/p>\n<p>Alla bilder som Optimole komprimerar visas via ett snabbt CDN. Du kan prova Optimole gratis eller uppgradera till premiumplanen om du beh\u00f6ver extra bandbredd och bearbetningsutrymme.<\/p>\n<h3 id=\"optimus\">3. Optimus Image Optimizer<\/h3>\n<figure style=\"width: 1349px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/wordpress.org\/plugins\/optimus\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/se\/wp-content\/uploads\/sites\/9\/2015\/11\/optimus-bildoptimering.jpg\" alt=\"Optimus Bildoptimering\" width=\"1349\" height=\"437\"><\/a><figcaption class=\"wp-caption-text\">Optimus Bildoptimering<\/figcaption><\/figure>\n<p><a href=\"https:\/\/wordpress.org\/plugins\/optimus\/\">Optimus WordPress Image Optimizer<\/a> anv\u00e4nder felfri komprimering f\u00f6r att optimera dina bilder. Felfri inneb\u00e4r att du inte ser n\u00e5gon kvalitetsf\u00f6rlust. Den st\u00f6der WooCommerce och multi-site och har en bra massoptimeringsfunktion f\u00f6r de med redan stora befintliga mediebibliotek. Den \u00e4r ocks\u00e5 kompatibel med WP Retina WordPress plugin. Det finns en gratis och en premiumversion. I premiumversionen betalar du en g\u00e5ng \u00e5rligen och du kan komprimera en obegr\u00e4nsad m\u00e4ngd bilder. Om du kombinerar det med deras Cache Enabler-plugin kan du ocks\u00e5 <a href=\"https:\/\/kinqsta.com\/se\/blog\/webp\/\">dyka ner i WebP-bilder<\/a>, vilket \u00e4r ett nytt l\u00e4ttviktsbildformat fr\u00e5n Google.<\/p>\n<h3 id=\"wp-smush\">4. WP Smush<\/h3>\n<figure style=\"width: 1637px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/wordpress.org\/plugins\/wp-smushit\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/se\/wp-content\/uploads\/sites\/9\/2015\/11\/wp-smush.png\" alt=\"wp smush plugin\" width=\"1637\" height=\"528\"><\/a><figcaption class=\"wp-caption-text\">WP Smush plugin<\/figcaption><\/figure>\n<p><a href=\"https:\/\/wordpress.org\/plugins\/wp-smushit\/\" target=\"_blank\" rel=\"noopener noreferrer\">WP Smush<\/a> har b\u00e5de en gratis och en premiumversion. Den minskar den dolda informationen fr\u00e5n bilderna f\u00f6r att minska storleken utan att minska kvaliteten. Den skannar bilder och minskar dem n\u00e4r du laddar upp dem till din webbplats. Den kan ocks\u00e5 skanna bilder som du redan har laddat upp och minska dem ocks\u00e5. Den komprimerar upp till 50 filer samtidigt. Du kan ocks\u00e5 komprimera manuellt om du vill. Den komprimerar JPEG, GIF och PNG bildtyper. Filstorlekar \u00e4r begr\u00e4nsade till 1 MB.<\/p>\n<ul>\n<li>Den \u00e4r kompatibel med n\u00e5gra av de mest popul\u00e4ra plugin-programmen f\u00f6r mediebibliotek som WP All Import och WPML.<\/li>\n<li>All bildoptimering g\u00f6rs med felfri komprimeringsteknik, vilket ger h\u00f6g bildkvalitet.<\/li>\n<li>Det spelar ingen roll vilken katalog du sparar dina bilder i. Smush hittar dem och komprimerar dem.<\/li>\n<li>Smush har ett alternativ f\u00f6r att automatiskt st\u00e4lla in bredd och h\u00f6jd f\u00f6r alla bilder, s\u00e5 att alla dina bilder blir anpassade till samma proportioner.<\/li>\n<\/ul>\n<h3 id=\"tinypng\">5. TinyPNG (ocks\u00e5 komprimerade JPGs)<\/h3>\n<figure style=\"width: 1639px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/wordpress.org\/plugins\/tiny-compress-images\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/se\/wp-content\/uploads\/sites\/9\/2015\/11\/tinypng.png\" alt=\"tinypng\" width=\"1639\" height=\"528\"><\/a><figcaption class=\"wp-caption-text\">TinyPNG plugin<\/figcaption><\/figure>\n<p><a href=\"https:\/\/wordpress.org\/plugins\/tiny-compress-images\/\" target=\"_blank\" rel=\"noopener noreferrer\">TinyPNG<\/a> anv\u00e4nder TinyJPG och TinyPNG-tj\u00e4nsterna (det kostnadsfria kontot l\u00e5ter dig komprimera cirka 100 bilder per m\u00e5nad) f\u00f6r att optimera dina JPG- och PNG-bilder. Den komprimerar automatiskt nya bilder och mass-komprimerar dina befintliga bilder. Den konverterar CMYK till RBG f\u00f6r att spara utrymme. Den komprimerar JPEG-bilder upp till 60 % och PNG-bilder upp till 80 % utan en synlig f\u00f6rlust i bildkvaliteten. Den har ingen maxstorlek f\u00f6r filstorlek.<\/p>\n<h3 id=\"imagerecycle\">6. ImageRecycle<\/h3>\n<figure style=\"width: 1349px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/wordpress.org\/plugins\/imagerecycle-pdf-image-compression\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/se\/wp-content\/uploads\/sites\/9\/2017\/05\/imagerecycle-pdf-imbildage-optimering.png\" alt=\"ImageRecycle \u2013 Bild &#038; PDF-optimering plugin\" width=\"1349\" height=\"437\"><\/a><figcaption class=\"wp-caption-text\">ImageRecycle \u2013 Bild &#038; PDF-optimering plugin<\/figcaption><\/figure>\n<p><a href=\"https:\/\/wordpress.org\/plugins\/imagerecycle-pdf-image-compression\/\" target=\"_blank\" rel=\"noopener noreferrer\">ImageRecyle<\/a> plugin \u00e4r en automatisk bild- och PDF-optimerare. Denna plugin fokuserar inte bara p\u00e5 bildkomprimering men \u00e4ven p\u00e5 PDF-filer. En v\u00e4ldigt anv\u00e4ndbar funktion \u00e4r m\u00f6jligheten att st\u00e4lla in minsta filstorlek f\u00f6r komprimering. Om du till exempel har bilder som \u00e4r 80 KB i storlek kan du automatiskt utesluta dem fr\u00e5n komprimering. Detta s\u00e4kerst\u00e4ller att bilder och filer aldrig komprimeras f\u00f6r mycket. Den inneh\u00e5ller ocks\u00e5 massoptimering och automatisk bild\u00e5terst\u00e4llning. Obs! De har en gratis 15-dagars provperiod, men det h\u00e4r \u00e4r en premiumservice, och bilder laddas upp och komprimeras med deras servrar. De debiterar inte per m\u00e5nad, utan snarare det totala antalet bilder som komprimeras, fr\u00e5n 10$ f\u00f6r 10 000.<\/p>\n<h3>7. EWWW Image Optimizer<\/h3>\n<figure id=\"attachment_129416\" aria-describedby=\"caption-attachment-129416\" style=\"width: 1200px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-129416 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2017\/05\/ewww-image-optimizer.jpg\" alt=\"EWWW Image Optimizer plugin\" width=\"1200\" height=\"389\"><figcaption id=\"caption-attachment-129416\" class=\"wp-caption-text\">EWWW Image Optimizer<\/figcaption><\/figure>\n<p><a href=\"https:\/\/wordpress.org\/plugins\/ewww-image-optimizer\/\">EWWW Image Optimizer<\/a> hj\u00e4lper dig att g\u00f6ra dina bilder mindre och din webbplats snabbare med mindre kr\u00e5ngel. Det saknas storleksbegr\u00e4nsningar och inkluderas mycket flexibilitet f\u00f6r avancerade anv\u00e4ndare, s\u00e5 du kan anv\u00e4nda standardinst\u00e4llningarna eller anpassa pluginet helt efter eget tycke.<\/p>\n<p>Det kostnadsfria l\u00e4get till\u00e5ter obegr\u00e4nsad <a href=\"https:\/\/kinqsta.com\/se\/blog\/jpg-vs-jpeg\/\">JPG-komprimering<\/a> och WebP-konvertering och \u00e4r perfekt f\u00f6r hobbywebbplatser eller bloggar som precis har k\u00f6rt ig\u00e5ng. Alla EWWW IO-anv\u00e4ndare kan anv\u00e4nda mass-optimering f\u00f6r att komprimera sina befintliga bilder eller anv\u00e4nda rullgardinsmenyn Mediebibliotek f\u00f6r att v\u00e4lja specifika bilder f\u00f6r komprimering. Du kan \u00e4ven skanna ytterligare mappar f\u00f6r att se till att varje enskild bild p\u00e5 din webbplats \u00e4r korrekt optimerad.<\/p>\n<p>EWWW IO l\u00e5ter dig till och med konvertera dina bilder till n\u00e4sta generations format som exempelvis <a href=\"https:\/\/kinqsta.com\/se\/blog\/webp\/\">WebP<\/a>. Du kan \u00e4ven hitta det b\u00e4sta bildformatet f\u00f6r en bild med ett flertal format-alternativ f\u00f6r konvertering.<\/p>\n<p>Premium Compress API l\u00e5ter dig ta komprimeringen till en helt ny niv\u00e5 utan att offra kvalitet och sparar i genomsnitt 50 % utrymme. Det l\u00e5ser \u00e4ven upp PDF-komprimering och inkluderar en bekv\u00e4m 30-dagars s\u00e4kerhetskopiering av bilder. Med tillvalet Easy IO CDN komprimeras bilderna automatiskt, skalas f\u00f6r att passa sidan och enhetsstorleken, lat-laddas och konverteras till n\u00e4sta generations WebP-format.<\/p>\n<h2><a id=\"case-study\"><\/a>Fallstudie f\u00f6r att optimera bilder f\u00f6r webb<\/h2>\n<p>Vi best\u00e4mde oss f\u00f6r att g\u00f6ra v\u00e5r egen lilla fallstudie och test f\u00f6r att visa dig hur mycket optimering av dina bilder p\u00e5 webben kan p\u00e5verka din WordPress-webbplats totala hastighet.<\/p>\n<h3>Okomprimerade JPG<\/h3>\n<p>Vi lade f\u00f6rst upp sex stycken okomprimerade JPG, som alla var \u00f6ver 1 MB i storlek, p\u00e5 v\u00e5r testplats.\u00a0Vi k\u00f6rde sedan fem tester genom Pingdom och tog medeltalet. Som du kan se fr\u00e5n <a href=\"https:\/\/tools.pingdom.com\/#!\/dbKwjQ\/https:\/\/perfmatters.io\/uncompressed-jpg\/\">hastighetsprovet<\/a> nedan var v\u00e5r totala laddningstid 1,55 sekunder och den totala sidstorleken var 14,7 MB.<\/p>\n<figure style=\"width: 1693px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/se\/wp-content\/uploads\/sites\/9\/2015\/11\/hastighetstest-med-okomprimerade-jpg.png\" alt=\"Hastighetstest med okomprimerade\u00a0JPG\" width=\"1693\" height=\"535\"><figcaption class=\"wp-caption-text\">Hastighetstest med okomprimerade\u00a0JPG<\/figcaption><\/figure>\n<h3>Komprimerade JPG<\/h3>\n<p>Vi komprimerade sedan JPG-filerna med hj\u00e4lp av Imagify WordPress-plugin, med &#8221;aggressiv inst\u00e4llning&#8221;.\u00a0Vi k\u00f6rde sedan fem tester genom Pingdom och tog medeltalet. Som du kan se fr\u00e5n <a href=\"https:\/\/tools.pingdom.com\/#!\/eHwxw9\/https:\/\/perfmatters.io\/compressed-jpg\/\">hastighetsprovet<\/a> nedan s\u00e4nktes v\u00e5r totala laddningstid till 476 ms och den totala sidstorleken reducerades till 2,9 MB. V\u00e5ra totala <strong>laddningstider minskade med 54,88 % <\/strong>och<strong> sidstorleken minskade med 80,27 %<\/strong>.<\/p>\n<figure style=\"width: 1686px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/se\/wp-content\/uploads\/sites\/9\/2015\/11\/hastighetsprov-med-komprimerade-jpg.png\" alt=\"Hastighetsprov med komprimerade JPG\" width=\"1686\" height=\"535\"><figcaption class=\"wp-caption-text\">Hastighetsprov med komprimerade JPG<\/figcaption><\/figure>\n<p>Det finns n\u00e4stan ingen annan optimering du kan g\u00f6ra p\u00e5 din webbplats som ger dig \u00f6ver 50 % minskning i laddningstider. Det \u00e4r d\u00e4rf\u00f6r bildoptimering \u00e4r s\u00e5 viktig, processen ovan var helt automatiserad av plugin. Det \u00e4r en hands-off-strategi f\u00f6r en snabbare WordPress-webbplats.<\/p>\n<p>Den enda andra dramatiska optimeringen du kan g\u00f6ra skulle vara att \u00e4ndra dina v\u00e4rdar. M\u00e5nga kunder som flyttar till <a href=\"https:\/\/kinqsta.com\/se\/\" target=\"_blank\" rel=\"noopener noreferrer\">Kinsta<\/a>\u00a0ser \u00f6ver 45 % hastighets\u00f6kning. T\u00e4nk dig att flytta till Kinsta och optimera dina bilder!<\/p>\n<p>Genom att optimera dina bilder, oavsett om det anv\u00e4nder ett bildredigeringsverktyg eller en WordPress-plugin, kan du ocks\u00e5 fixa varningen &#8221;Optimera bilder&#8221; som du f\u00e5r i Google PageSpeed \u200b\u200bInsights (som visas nedan.)<\/p>\n<figure style=\"width: 1898px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/se\/wp-content\/uploads\/sites\/9\/2017\/05\/pagespeed-insights-optimerar-bildvarning.png\" alt=\"PageSpeed \u200b\u200bInsights optimerar bildvarning\" width=\"1898\" height=\"1211\"><figcaption class=\"wp-caption-text\">PageSpeed \u200b\u200bInsights optimerar bildvarning<\/figcaption><\/figure>\n<p>Om du har andra optimeringsvarningar fr\u00e5n snabbtestverktyg, se till att kolla in v\u00e5rt inl\u00e4gg p\u00e5 <a href=\"https:\/\/kinqsta.com\/se\/blog\/google-pagespeed-insights\/\" target=\"_blank\" rel=\"noopener noreferrer\">Google PageSpeed<\/a> och v\u00e5r djupg\u00e5ende <a href=\"https:\/\/kinqsta.com\/se\/blog\/pingdom-hastighetstestverktyg\/\" target=\"_blank\" rel=\"noopener noreferrer\">Pingdom-genomg\u00e5ng<\/a>.<\/p>\n<p><kinsta-video src=\"https:\/\/kinsta.wistia.com\/medias\/qvfucq5kz6?videoFoam=true&#038;videoWidth=640\"><\/kinsta-video><\/p>\n<p><strong>Vi har tagit v\u00e5r kunskap om effektiv webbplatshantering till en ny niv\u00e5 och f\u00f6rvandlat den till en e-bok- och videokurs. <\/strong><strong>Klicka f\u00f6r att ladda ner <a href=\"https:\/\/kinqsta.com\/se\/ebooks\/wordpress\/hantera-flera-wordpress-webbplatser\/?utm_campaign=how-to-speed-up-your-wordpress-site&#038;utm_source=blog-knowledgebase&#038;utm_medium=video\">guiden f\u00f6r att hantera 60+ WordPress-webbplatser<\/a>!<\/strong><\/p>\n<h2><a id=\"using-svgs\"><\/a>Anv\u00e4nda SVG:er: F\u00f6rdelarna som du beh\u00f6ver k\u00e4nna till<\/h2>\n<p>En annan rekommendation \u00e4r att <a href=\"https:\/\/kinqsta.com\/blog\/what-is-an-svg-file\/\">anv\u00e4nda SVG<\/a> tillsammans med dina andra bilder. SVG \u00e4r ett skalbart vektorformat som fungerar bra f\u00f6r logotyper, ikoner, text och enkla bilder. H\u00e4r \u00e4r n\u00e5gra sk\u00e4l till varf\u00f6r:<\/p>\n<ul>\n<li>SVGs kan automatiskt skalas i b\u00e5de webbl\u00e4sare och bildredigeringsverktyg. Detta g\u00f6r det till en webb- och grafisk designers dr\u00f6m!<\/li>\n<li>Google indexerar SVGs, p\u00e5 samma s\u00e4tt som <a href=\"https:\/\/kinqsta.com\/blog\/svg-vs-png\/\">PNG<\/a> och JPG, s\u00e5 du beh\u00f6ver inte oroa dig f\u00f6r SEO.<\/li>\n<li>SVGs \u00e4r traditionellt (inte alltid) mindre i filstorlek \u00e4n PNG eller JPG. Detta kan resultera i snabbare laddningstider.<\/li>\n<\/ul>\n<p>Genki skrev en bra artikel d\u00e4r han j\u00e4mf\u00f6r storleken p\u00e5 <a href=\"https:\/\/web.archive.org\/web\/20200729105713\/http:\/\/genkihagata.com\/blog\/svg-vs-flat-images.html\" target=\"_blank\" rel=\"noopener noreferrer\">SVG vs PNG vs JPEG<\/a>. Nedan f\u00f6ljer n\u00e5gra provtagningar fr\u00e5n hans tester, d\u00e4r han j\u00e4mf\u00f6rde de tre olika bildtyperna.<\/p>\n<h3>JPG (optimerad storlek: 81.4 KB)<\/h3>\n<figure id class=\"wp-caption aligncenter\">\n<p><figure style=\"width: 1280px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/se\/wp-content\/uploads\/sites\/9\/2017\/04\/jpg-bild.jpg\" alt=\"JPG bild\" width=\"1280\" height=\"535\"><figcaption class=\"wp-caption-text\">JPG bild<\/figcaption><\/figure><\/figure>\n<h3>PNG (optimerad storlek: 85.1 KB)<\/h3>\n<figure id class=\"wp-caption aligncenter\">\n<p><figure style=\"width: 1280px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/se\/wp-content\/uploads\/sites\/9\/2017\/04\/png-bild.png\" alt=\"PNG bild\" width=\"1280\" height=\"535\"><figcaption class=\"wp-caption-text\">PNG bild<\/figcaption><\/figure><\/figure>\n<h3>SVG (optimerad storlek: 6.1 KB)<\/h3>\n<figure id class=\"wp-caption aligncenter\">\n<p><figure style=\"width: 1280px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/se\/wp-content\/uploads\/sites\/9\/2017\/04\/svg-bild.png\" alt=\"SVG bild\" width=\"1280\" height=\"535\"><figcaption class=\"wp-caption-text\">SVG bild<\/figcaption><\/figure><figcaption class=\"wp-caption-text\">SVG image<\/figcaption><\/figure>\n<p>Som du kan se ovan \u00e4r SVG en minskning av filstorlek med 92,51 % j\u00e4mf\u00f6rt med JPG. Och j\u00e4mf\u00f6rt med PNG, 92,83 %. Kolla in v\u00e5r guide om <a href=\"https:\/\/kinqsta.com\/blog\/what-is-an-svg-file\/\" target=\"_blank\" rel=\"noopener noreferrer\">hur du anv\u00e4nder SVG p\u00e5 din WordPress-webbplats<\/a>.<\/p>\n<h2><a id=\"best-practices\"><\/a>B\u00e4st metoder f\u00f6r att optimera bilder f\u00f6r webben<\/h2>\n<p>H\u00e4r f\u00f6ljer n\u00e5gra allm\u00e4nna b\u00e4sta praxis n\u00e4r det g\u00e4ller hur man optimerar bilder f\u00f6r webben:<\/p>\n<ul style=\"margin-left: 30px\">\n<li>Om du anv\u00e4nder en WordPress-plugin, <strong>anv\u00e4nd en som komprimerar och optimerar bilder externt<\/strong> p\u00e5 sina servrar. Detta minskar belastningen p\u00e5 din egen webbplats.<\/li>\n<li>Anv\u00e4nd vektorbilder tillsammans med dina PNG- och JPG-bilder n\u00e4r det \u00e4r m\u00f6jligt.<\/li>\n<li><a href=\"https:\/\/kinqsta.com\/se\/blog\/wordpress-cdn\/\">Anv\u00e4nd ett CDN<\/a> f\u00f6r att visa dina bilder snabbt till bes\u00f6kare \u00f6ver hela v\u00e4rlden. Kinsta CDN har en <a href=\"https:\/\/kinqsta.com\/docs\/wordpress-hosting\/wordpress-cdn\/kinsta-cdn\/#kinstas-cdn#code-minification-1\">kodminifierings-funktion<\/a> som \u00e4r inbyggd direkt i <a href=\"https:\/\/kinqsta.com\/se\/mykinsta\/\">MyKinsta-instrumentpanelen<\/a>. Den g\u00f6r att <a href=\"https:\/\/kinqsta.com\/se\/priser\/?plan=visits-business1\">Kinsta&#8217;s kunder<\/a> enkelt kan aktivera automatisk CSS- och JavaScript-minifiering med ett enda klick.<\/li>\n<li>Ta bort on\u00f6dig bilddata.<\/li>\n<li>Besk\u00e4r det vita utrymmet och \u00e5terskapa det genom att anv\u00e4nda CSS f\u00f6r att tillhandah\u00e5lla vadderingen.<\/li>\n<li>Anv\u00e4nd CSS3-effekter s\u00e5 mycket som m\u00f6jligt.<\/li>\n<li>Spara dina bilder i r\u00e4tt storlek. Men kom ih\u00e5g att WordPress nu st\u00f6der <a href=\"https:\/\/kinqsta.com\/se\/blog\/responsiv-webdesign\/\">responsiva<\/a> bilder f\u00f6r att visa dem utan att \u00e4ndra storlek p\u00e5 dem med CSS.<\/li>\n<li>Anv\u00e4nd alltid .ico-filformatet f\u00f6r din <a href=\"https:\/\/kinqsta.com\/blog\/wordpress-favicon\/\">favicon<\/a>.<\/li>\n<li>Anv\u00e4nd webbfont ist\u00e4llet f\u00f6r att placera text p\u00e5 bilder &#8211; de ser b\u00e4ttre ut n\u00e4r de skalas och tar mindre plats.<\/li>\n<li>Anv\u00e4nd bara raster-bilder f\u00f6r scener med m\u00e5nga former och detaljer.<\/li>\n<li>Minska bitdjupet till en mindre f\u00e4rgpalett.<\/li>\n<li><strong>Anv\u00e4nd destruktiv komprimering d\u00e4r det \u00e4r m\u00f6jligt<\/strong>.<\/li>\n<li>Experimentera med att hitta de b\u00e4sta inst\u00e4llningarna f\u00f6r varje format.<\/li>\n<li>Anv\u00e4nd GIF om du beh\u00f6ver animering (men <a href=\"https:\/\/woorkup.com\/compress-animated-gif\/\" target=\"_blank\" rel=\"noopener noreferrer\">komprimera dina animerade GIF-filer<\/a>).<\/li>\n<li>Anv\u00e4nd PNG om du beh\u00f6ver mycket detaljer och h\u00f6ga uppl\u00f6sningar.<\/li>\n<li>Anv\u00e4nd JPG f\u00f6r allm\u00e4nna bilder och sk\u00e4rmdumpar.<\/li>\n<li>Ta bort eventuella on\u00f6diga bildmetadata.<\/li>\n<li>Automatisera processen s\u00e5 mycket som m\u00f6jligt<\/li>\n<li>I vissa fall kanske du vill ha <a href=\"https:\/\/kinqsta.com\/se\/blog\/wordpress-latladdning\/\" target=\"_blank\" rel=\"noopener noreferrer\">lata laddningsbilder<\/a> f\u00f6r snabbare f\u00f6rstasidesvisning.<\/li>\n<li>Spara bilder som &#8221;optimerade f\u00f6r webben&#8221; i verktyg som Photoshop.<\/li>\n<li>Anv\u00e4nd WebP i Chrome f\u00f6r att visa i mindre bilder.<\/li>\n<li>Anv\u00e4nd Kinsta\u2019s inbyggda <a href=\"https:\/\/kinqsta.com\/docs\/wordpress-hosting\/wordpress-cdn\/kinsta-cdn\/#image-optimization-1\">bildoptimeringsfunktion<\/a>.<\/li>\n<\/ul>\n\n<p>N\u00e4r du har formaterat dina bilder f\u00f6r b\u00e4ttre prestanda och f\u00f6ljt b\u00e4sta praxis, kommer din webbplats att gillas b\u00e4ttre av s\u00f6kmotorer, webbl\u00e4sare och n\u00e4tverk, och kommer att ladda snabbare f\u00f6r dina l\u00e4sare. \u00c5h, och se till att kolla in v\u00e5r handledning om <a href=\"https:\/\/kinqsta.com\/se\/blog\/hotlinking\/\" target=\"_blank\" rel=\"noopener noreferrer\">hotlinking<\/a>, f\u00f6r att f\u00f6rhindra att m\u00e4nniskor stj\u00e4l dina bilder och bandbredd.<\/p>\n<p>Har du formaterat dina bilder f\u00f6r b\u00e4ttre prestanda? Formaterar du dem manuellt, anv\u00e4nder du en plugin eller b\u00e5da? Finns det n\u00e5got annat verktyg eller plugin du skulle rekommendera? Har du n\u00e5got att l\u00e4gga till? L\u00e5t oss veta om dina tekniker och b\u00e4sta praxis i kommentarerna nedan!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Lita p\u00e5 oss, du vill inte att Google ska hata din webbplats. Lyckligtvis kan du minska din bilds filstorlek f\u00f6r att f\u00f6rb\u00e4ttra din webbplatsprestanda. Ett problem &#8230;<\/p>\n","protected":false},"author":38,"featured_media":50057,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[31,29],"topic":[],"class_list":["post-27562","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-webperf","tag-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Hur du optimerar bilder f\u00f6r webb och prestanda 2026<\/title>\n<meta name=\"description\" content=\"Bilder \u00e4r ofta #1-elementet som ansvarar f\u00f6r l\u00e5ngsamma sidladdningstider. L\u00e4r dig att optimera bilder f\u00f6r webben, samt prestanda p\u00e5 din WordPress webbplats.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinqsta.com\/se\/blog\/optimerar-bilder-for-webb\/\" \/>\n<meta property=\"og:locale\" content=\"sv_SE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Hur du optimerar bilder f\u00f6r webb och prestanda\" \/>\n<meta property=\"og:description\" content=\"Bilder \u00e4r ofta #1-elementet som ansvarar f\u00f6r l\u00e5ngsamma sidladdningstider. L\u00e4r dig att optimera bilder f\u00f6r webben, samt prestanda p\u00e5 din WordPress webbplats.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinqsta.com\/se\/blog\/optimerar-bilder-for-webb\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstasweden\/\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/fm.brianleejackson\" \/>\n<meta property=\"article:published_time\" content=\"2018-11-21T16:05:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-26T07:14:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinqsta.com\/se\/wp-content\/uploads\/sites\/9\/2018\/11\/how-to-optimize-images-for-web-and-performance.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Brian Jackson\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Bilder \u00e4r ofta #1-elementet som ansvarar f\u00f6r l\u00e5ngsamma sidladdningstider. L\u00e4r dig att optimera bilder f\u00f6r webben, samt prestanda p\u00e5 din WordPress webbplats.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinqsta.com\/se\/wp-content\/uploads\/sites\/9\/2018\/11\/how-to-optimize-images-for-web-and-performance.jpeg\" \/>\n<meta name=\"twitter:creator\" content=\"@brianleejackson\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_se\" \/>\n<meta name=\"twitter:label1\" content=\"Skriven av\" \/>\n\t<meta name=\"twitter:data1\" content=\"Brian Jackson\" \/>\n\t<meta name=\"twitter:label2\" content=\"Ber\u00e4knad l\u00e4stid\" \/>\n\t<meta name=\"twitter:data2\" content=\"21 minuter\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinqsta.com\/se\/blog\/optimerar-bilder-for-webb\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/se\/blog\/optimerar-bilder-for-webb\/\"},\"author\":{\"name\":\"Brian Jackson\",\"@id\":\"https:\/\/kinqsta.com\/se\/#\/schema\/person\/079824c00ccc2b7141504f27ea63bef7\"},\"headline\":\"Hur du optimerar bilder f\u00f6r webb och prestanda\",\"datePublished\":\"2018-11-21T16:05:27+00:00\",\"dateModified\":\"2023-10-26T07:14:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/se\/blog\/optimerar-bilder-for-webb\/\"},\"wordCount\":4379,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/se\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/se\/blog\/optimerar-bilder-for-webb\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/se\/wp-content\/uploads\/sites\/9\/2018\/11\/how-to-optimize-images-for-web-and-performance.jpeg\",\"keywords\":[\"webperf\",\"WordPress\"],\"articleSection\":[\"Prestandahandledningar f\u00f6r WordPress\"],\"inLanguage\":\"sv-SE\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinqsta.com\/se\/blog\/optimerar-bilder-for-webb\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinqsta.com\/se\/blog\/optimerar-bilder-for-webb\/\",\"url\":\"https:\/\/kinqsta.com\/se\/blog\/optimerar-bilder-for-webb\/\",\"name\":\"Hur du optimerar bilder f\u00f6r webb och prestanda 2026\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/se\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/se\/blog\/optimerar-bilder-for-webb\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/se\/blog\/optimerar-bilder-for-webb\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/se\/wp-content\/uploads\/sites\/9\/2018\/11\/how-to-optimize-images-for-web-and-performance.jpeg\",\"datePublished\":\"2018-11-21T16:05:27+00:00\",\"dateModified\":\"2023-10-26T07:14:58+00:00\",\"description\":\"Bilder \u00e4r ofta #1-elementet som ansvarar f\u00f6r l\u00e5ngsamma sidladdningstider. L\u00e4r dig att optimera bilder f\u00f6r webben, samt prestanda p\u00e5 din WordPress webbplats.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinqsta.com\/se\/blog\/optimerar-bilder-for-webb\/#breadcrumb\"},\"inLanguage\":\"sv-SE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinqsta.com\/se\/blog\/optimerar-bilder-for-webb\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"sv-SE\",\"@id\":\"https:\/\/kinqsta.com\/se\/blog\/optimerar-bilder-for-webb\/#primaryimage\",\"url\":\"https:\/\/kinqsta.com\/se\/wp-content\/uploads\/sites\/9\/2018\/11\/how-to-optimize-images-for-web-and-performance.jpeg\",\"contentUrl\":\"https:\/\/kinqsta.com\/se\/wp-content\/uploads\/sites\/9\/2018\/11\/how-to-optimize-images-for-web-and-performance.jpeg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinqsta.com\/se\/blog\/optimerar-bilder-for-webb\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinqsta.com\/se\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Hur du optimerar bilder f\u00f6r webb och prestanda\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinqsta.com\/se\/#website\",\"url\":\"https:\/\/kinqsta.com\/se\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Snabba, s\u00e4kra, premium hosting-l\u00f6sningar\",\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/se\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinqsta.com\/se\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"sv-SE\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinqsta.com\/se\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinqsta.com\/se\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"sv-SE\",\"@id\":\"https:\/\/kinqsta.com\/se\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinqsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinqsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/se\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstasweden\/\",\"https:\/\/x.com\/kinsta_se\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinqsta.com\/se\/#\/schema\/person\/079824c00ccc2b7141504f27ea63bef7\",\"name\":\"Brian Jackson\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"sv-SE\",\"@id\":\"https:\/\/kinqsta.com\/se\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/79623d815f4ed4c8c2457392d728cb16?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/79623d815f4ed4c8c2457392d728cb16?s=96&d=mm&r=g\",\"caption\":\"Brian Jackson\"},\"description\":\"Brian has a huge passion for WordPress, has been using it for over a decade, and even develops a couple of premium plugins. Brian enjoys blogging, movies, and hiking. Connect with Brian on Twitter.\",\"sameAs\":[\"https:\/\/www.facebook.com\/fm.brianleejackson\",\"https:\/\/www.linkedin.com\/in\/brianleejackson\",\"https:\/\/x.com\/brianleejackson\"],\"url\":\"https:\/\/kinqsta.com\/se\/blog\/author\/brianjackson\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Hur du optimerar bilder f\u00f6r webb och prestanda 2026","description":"Bilder \u00e4r ofta #1-elementet som ansvarar f\u00f6r l\u00e5ngsamma sidladdningstider. L\u00e4r dig att optimera bilder f\u00f6r webben, samt prestanda p\u00e5 din WordPress webbplats.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinqsta.com\/se\/blog\/optimerar-bilder-for-webb\/","og_locale":"sv_SE","og_type":"article","og_title":"Hur du optimerar bilder f\u00f6r webb och prestanda","og_description":"Bilder \u00e4r ofta #1-elementet som ansvarar f\u00f6r l\u00e5ngsamma sidladdningstider. L\u00e4r dig att optimera bilder f\u00f6r webben, samt prestanda p\u00e5 din WordPress webbplats.","og_url":"https:\/\/kinqsta.com\/se\/blog\/optimerar-bilder-for-webb\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstasweden\/","article_author":"https:\/\/www.facebook.com\/fm.brianleejackson","article_published_time":"2018-11-21T16:05:27+00:00","article_modified_time":"2023-10-26T07:14:58+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinqsta.com\/se\/wp-content\/uploads\/sites\/9\/2018\/11\/how-to-optimize-images-for-web-and-performance.jpeg","type":"image\/jpeg"}],"author":"Brian Jackson","twitter_card":"summary_large_image","twitter_description":"Bilder \u00e4r ofta #1-elementet som ansvarar f\u00f6r l\u00e5ngsamma sidladdningstider. L\u00e4r dig att optimera bilder f\u00f6r webben, samt prestanda p\u00e5 din WordPress webbplats.","twitter_image":"https:\/\/kinqsta.com\/se\/wp-content\/uploads\/sites\/9\/2018\/11\/how-to-optimize-images-for-web-and-performance.jpeg","twitter_creator":"@brianleejackson","twitter_site":"@kinsta_se","twitter_misc":{"Skriven av":"Brian Jackson","Ber\u00e4knad l\u00e4stid":"21 minuter"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinqsta.com\/se\/blog\/optimerar-bilder-for-webb\/#article","isPartOf":{"@id":"https:\/\/kinqsta.com\/se\/blog\/optimerar-bilder-for-webb\/"},"author":{"name":"Brian Jackson","@id":"https:\/\/kinqsta.com\/se\/#\/schema\/person\/079824c00ccc2b7141504f27ea63bef7"},"headline":"Hur du optimerar bilder f\u00f6r webb och prestanda","datePublished":"2018-11-21T16:05:27+00:00","dateModified":"2023-10-26T07:14:58+00:00","mainEntityOfPage":{"@id":"https:\/\/kinqsta.com\/se\/blog\/optimerar-bilder-for-webb\/"},"wordCount":4379,"commentCount":0,"publisher":{"@id":"https:\/\/kinqsta.com\/se\/#organization"},"image":{"@id":"https:\/\/kinqsta.com\/se\/blog\/optimerar-bilder-for-webb\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/se\/wp-content\/uploads\/sites\/9\/2018\/11\/how-to-optimize-images-for-web-and-performance.jpeg","keywords":["webperf","WordPress"],"articleSection":["Prestandahandledningar f\u00f6r WordPress"],"inLanguage":"sv-SE","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinqsta.com\/se\/blog\/optimerar-bilder-for-webb\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinqsta.com\/se\/blog\/optimerar-bilder-for-webb\/","url":"https:\/\/kinqsta.com\/se\/blog\/optimerar-bilder-for-webb\/","name":"Hur du optimerar bilder f\u00f6r webb och prestanda 2026","isPartOf":{"@id":"https:\/\/kinqsta.com\/se\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinqsta.com\/se\/blog\/optimerar-bilder-for-webb\/#primaryimage"},"image":{"@id":"https:\/\/kinqsta.com\/se\/blog\/optimerar-bilder-for-webb\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/se\/wp-content\/uploads\/sites\/9\/2018\/11\/how-to-optimize-images-for-web-and-performance.jpeg","datePublished":"2018-11-21T16:05:27+00:00","dateModified":"2023-10-26T07:14:58+00:00","description":"Bilder \u00e4r ofta #1-elementet som ansvarar f\u00f6r l\u00e5ngsamma sidladdningstider. L\u00e4r dig att optimera bilder f\u00f6r webben, samt prestanda p\u00e5 din WordPress webbplats.","breadcrumb":{"@id":"https:\/\/kinqsta.com\/se\/blog\/optimerar-bilder-for-webb\/#breadcrumb"},"inLanguage":"sv-SE","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinqsta.com\/se\/blog\/optimerar-bilder-for-webb\/"]}]},{"@type":"ImageObject","inLanguage":"sv-SE","@id":"https:\/\/kinqsta.com\/se\/blog\/optimerar-bilder-for-webb\/#primaryimage","url":"https:\/\/kinqsta.com\/se\/wp-content\/uploads\/sites\/9\/2018\/11\/how-to-optimize-images-for-web-and-performance.jpeg","contentUrl":"https:\/\/kinqsta.com\/se\/wp-content\/uploads\/sites\/9\/2018\/11\/how-to-optimize-images-for-web-and-performance.jpeg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinqsta.com\/se\/blog\/optimerar-bilder-for-webb\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinqsta.com\/se\/"},{"@type":"ListItem","position":2,"name":"Hur du optimerar bilder f\u00f6r webb och prestanda"}]},{"@type":"WebSite","@id":"https:\/\/kinqsta.com\/se\/#website","url":"https:\/\/kinqsta.com\/se\/","name":"Kinsta\u00ae","description":"Snabba, s\u00e4kra, premium hosting-l\u00f6sningar","publisher":{"@id":"https:\/\/kinqsta.com\/se\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinqsta.com\/se\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"sv-SE"},{"@type":"Organization","@id":"https:\/\/kinqsta.com\/se\/#organization","name":"Kinsta","url":"https:\/\/kinqsta.com\/se\/","logo":{"@type":"ImageObject","inLanguage":"sv-SE","@id":"https:\/\/kinqsta.com\/se\/#\/schema\/logo\/image\/","url":"https:\/\/kinqsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinqsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinqsta.com\/se\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstasweden\/","https:\/\/x.com\/kinsta_se","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinqsta.com\/se\/#\/schema\/person\/079824c00ccc2b7141504f27ea63bef7","name":"Brian Jackson","image":{"@type":"ImageObject","inLanguage":"sv-SE","@id":"https:\/\/kinqsta.com\/se\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/79623d815f4ed4c8c2457392d728cb16?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/79623d815f4ed4c8c2457392d728cb16?s=96&d=mm&r=g","caption":"Brian Jackson"},"description":"Brian has a huge passion for WordPress, has been using it for over a decade, and even develops a couple of premium plugins. Brian enjoys blogging, movies, and hiking. Connect with Brian on Twitter.","sameAs":["https:\/\/www.facebook.com\/fm.brianleejackson","https:\/\/www.linkedin.com\/in\/brianleejackson","https:\/\/x.com\/brianleejackson"],"url":"https:\/\/kinqsta.com\/se\/blog\/author\/brianjackson\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinqsta.com\/se\/wp-json\/wp\/v2\/posts\/27562","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinqsta.com\/se\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinqsta.com\/se\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/se\/wp-json\/wp\/v2\/users\/38"}],"replies":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/se\/wp-json\/wp\/v2\/comments?post=27562"}],"version-history":[{"count":18,"href":"https:\/\/kinqsta.com\/se\/wp-json\/wp\/v2\/posts\/27562\/revisions"}],"predecessor-version":[{"id":55912,"href":"https:\/\/kinqsta.com\/se\/wp-json\/wp\/v2\/posts\/27562\/revisions\/55912"}],"alternate":[{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinqsta.com\/se\/wp-json\/kinsta\/v1\/posts\/27562\/translations\/it"},{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinqsta.com\/se\/wp-json\/kinsta\/v1\/posts\/27562\/translations\/en"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinqsta.com\/se\/wp-json\/kinsta\/v1\/posts\/27562\/translations\/es"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinqsta.com\/se\/wp-json\/kinsta\/v1\/posts\/27562\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinqsta.com\/se\/wp-json\/kinsta\/v1\/posts\/27562\/translations\/fr"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinqsta.com\/se\/wp-json\/kinsta\/v1\/posts\/27562\/translations\/se"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinqsta.com\/se\/wp-json\/kinsta\/v1\/posts\/27562\/translations\/de"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinqsta.com\/se\/wp-json\/kinsta\/v1\/posts\/27562\/translations\/nl"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinqsta.com\/se\/wp-json\/kinsta\/v1\/posts\/27562\/translations\/jp"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinqsta.com\/se\/wp-json\/kinsta\/v1\/posts\/27562\/translations\/dk"},{"href":"https:\/\/kinqsta.com\/se\/wp-json\/kinsta\/v1\/posts\/27562\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/se\/wp-json\/wp\/v2\/media\/50057"}],"wp:attachment":[{"href":"https:\/\/kinqsta.com\/se\/wp-json\/wp\/v2\/media?parent=27562"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinqsta.com\/se\/wp-json\/wp\/v2\/tags?post=27562"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinqsta.com\/se\/wp-json\/wp\/v2\/topic?post=27562"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}