{"id":254726,"date":"2022-04-13T18:39:00","date_gmt":"2022-04-13T15:39:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=254726"},"modified":"2022-05-16T15:17:57","modified_gmt":"2022-05-16T12:17:57","slug":"hur-man-optimerar-bilder-for-battre-wordpress-prestanda","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/sv\/hur-man-optimerar-bilder-for-battre-wordpress-prestanda\/","title":{"rendered":"Hur man optimerar bilder f\u00f6r b\u00e4ttre WordPress-prestanda"},"content":{"rendered":"<p>L\u00e5t oss spela ett spel\u2026<\/p>\n<p>Varje fil p\u00e5 din webbplats bidrar till den totala &quot;sidvikten&quot; i termer av kb\/mb. Hur mycket av din sidvikt tror du kommer fr\u00e5n bilder?<\/p>\n<p>tio%?<\/p>\n<p>tjugo%?<\/p>\n<p>Enligt HTTP-arkivet utg\u00f6r <a href=\"https:\/\/httparchive.org\/reports\/page-weight#bytesImg\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">bilder 50 %<\/a> av den genomsnittliga webbplatsens sidvikt (cirka 800 kb).<\/p>\n<p>Eftersom h\u00e4lften av den data som bes\u00f6karna beh\u00f6ver ladda ner n\u00e4r de tittar p\u00e5 din webbplats kommer fr\u00e5n bilder, kan all optimering du g\u00f6r h\u00e4r ha en enorm inverkan p\u00e5 din webbplats prestanda.<\/p>\n<p>Faktum \u00e4r att om dina bilder inte \u00e4r optimerade alls, kommer du att kunna <strong>minska din bildvikt med 50-80 % genom att<\/strong> f\u00f6lja den h\u00e4r guiden.<\/p>\n<h2>Tre s\u00e4tt att optimera bilder<\/h2>\n<p>N\u00e4r det kommer till bildoptimering finns det tre enkla tekniker.<\/p>\n<p>Det f\u00f6rsta och mest effektiva s\u00e4ttet att optimera dina bilder \u00e4r att komprimera dem.<\/p>\n<p><a href=\"http:\/\/link.competethemes.com\/shortpixel-guide-cta1\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Klicka h\u00e4r f\u00f6r att prova ShortPixel sj\u00e4lv<\/a><\/p>\n<h3>1 Komprimera dina bilder<\/h3>\n<p>Bildkomprimering \u00e4r det prim\u00e4ra s\u00e4ttet att optimera grafik. Om du f\u00f6ljde <a href=\"https:\/\/themewp.inform.click\/sv\/hur-du-optimerar-din-wordpress-webbplats-med-wp-rocket\/\" title=\"WP Rocket-optimeringsguiden\">WP Rocket-optimeringsguiden<\/a> kommer du att bli bekant med minifieringskonceptet som introducerades d\u00e4r. Bildkomprimering \u00e4r inte s\u00e5 annorlunda.<\/p>\n<p>N\u00e4r en bild komprimeras, skriver en algoritm i princip om koden i bilden f\u00f6r att minska den totala filstorleken. Det finns tv\u00e5 huvudtyper av kompression.<\/p>\n<h4>F\u00f6rlustfri kompression<\/h4>\n<p>F\u00f6rlustfri komprimering optimerar dina bilder samtidigt som du beh\u00e5ller exakt samma pixel-f\u00f6r-pixel-sk\u00e4rm. Det finns ingen anledning att hoppa \u00f6ver f\u00f6rlustfri komprimering eftersom det minskar filstorleken samtidigt som det inte g\u00f6r n\u00e5gon visuell skillnad.<\/p>\n<p>Som sagt, jag rekommenderade att du anv\u00e4nder f\u00f6rlustkompression ist\u00e4llet.<\/p>\n<h4>F\u00f6rlustig kompression<\/h4>\n<p>F\u00f6rlustkompression erbjuder mycket st\u00f6rre optimering men p\u00e5 bekostnad av en viss mindre kvalitetsf\u00f6rs\u00e4mring. Men den kvalitetsf\u00f6rlusten \u00e4r s\u00e5 liten att den ofta \u00e4r om\u00e4rklig.<\/p>\n<p>F\u00f6rlustfri komprimering \u00e4r viktigt f\u00f6r medicinsk bildbehandling och tekniska ritningar, men f\u00f6r bilder som visas p\u00e5 en webbplats uppfyller lossy l\u00e4tt v\u00e5ra kvalitetsstandarder.<\/p>\n<h4>Hur du komprimerar dina bilder<\/h4>\n<p>Jag kommer att rekommendera <a href=\"http:\/\/link.competethemes.com\/shortpixel-guide-1\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">ShortPixel-<\/a> plugin f\u00f6r bildoptimering som jag anv\u00e4nder h\u00e4r p\u00e5 Compete Themes. Det inkluderar f\u00f6rlustfri och f\u00f6rlustfri komprimering plus &quot;blank&quot; komprimering som \u00e4r ett slags mellanalternativ.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176813-616f3240ca972.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176813-616f3240ca972.png\" alt=\"Hur man optimerar bilder f\u00f6r b\u00e4ttre WordPress-prestanda\"><\/a><\/p>\n<p>ShortPixel kommer automatiskt att komprimera bilder n\u00e4r du laddar upp dem till din webbplats, vilket kan vara v\u00e4ldigt bekv\u00e4mt. Jag \u00e4r ganska ot\u00e5lig n\u00e4r jag redigerar, s\u00e5 jag f\u00f6redrar att st\u00e4nga av det h\u00e4r alternativet och optimera bilderna fr\u00e5n Media-menyn senare.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176813-616f32428aed6.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176813-616f32428aed6.png\" alt=\"Hur man optimerar bilder f\u00f6r b\u00e4ttre WordPress-prestanda\"><\/a><\/p>\n<p>Automatisk komprimering vid uppladdning kan st\u00e4ngas av<\/p>\n<p>Du kan anv\u00e4nda ett verktyg som <a href=\"https:\/\/tinypng.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">TinyPNG f\u00f6r<\/a> att komprimera dina bilder, men jag tycker att det \u00e4r l\u00e4ttare att ladda upp bilderna till min sida som alltid och sedan optimera dem med ShortPixel.<\/p>\n<h4>Hur \u00e4r det med bilder du redan laddat upp?<\/h4>\n<p>Det \u00e4r h\u00e4r <a href=\"http:\/\/link.competethemes.com\/shortpixel-guide-2\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">ShortPixel<\/a> verkligen briljerar.<\/p>\n<p>Om du anv\u00e4nder ett verktyg som TinyPNG f\u00f6r att optimera dina bilder, kommer du bara att optimera de nya bilderna du laddar upp till din webbplats. Hur \u00e4r det med alla bilder du redan har laddat upp? Hur optimerar du dem?<\/p>\n<p>ShortPixel har ett fantastiskt bulkoptimeringsalternativ som g\u00e5r igenom alla dina bilder p\u00e5 en g\u00e5ng.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176813-616f32446974a.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176813-616f32446974a.png\" alt=\"Hur man optimerar bilder f\u00f6r b\u00e4ttre WordPress-prestanda\"><\/a><\/p>\n<p>Bilden ovan \u00e4r ganska sj\u00e4lvf\u00f6rklarande f\u00f6rutom delen &quot;mindre miniatyrer&quot;. Varf\u00f6r finns det 4x s\u00e5 m\u00e5nga mindre miniatyrer och vad \u00e4r de ens?<\/p>\n<h4>Optimera alla bildstorlekar<\/h4>\n<p>Du kanske inte vet detta, men n\u00e4r du laddar upp en bild till WordPress skapas automatiskt tre ytterligare storlekar (om bilden \u00e4r tillr\u00e4ckligt stor):<\/p>\n<ul>\n<li>Miniatyr<\/li>\n<li>Medium<\/li>\n<li>Stor<\/li>\n<\/ul>\n<p>Du kan visa och redigera m\u00e5tten f\u00f6r dessa bildstorlekar fr\u00e5n menyn Inst\u00e4llningar &gt; Media.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176813-616f32466e04b.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176813-616f32466e04b.png\" alt=\"Hur man optimerar bilder f\u00f6r b\u00e4ttre WordPress-prestanda\"><\/a><\/p>\n<p>H\u00e4r \u00e4r fr\u00e5gan&#8230;<\/p>\n<p>L\u00e5t oss s\u00e4ga att du komprimerar en bild och sedan laddar upp den till din webbplats. Den &quot;fullst\u00e4ndiga&quot; versionen \u00e4r helt optimerad, men de tre extra storlekarna \u00e4r det inte. Om du infogar den &quot;medelstora&quot; versionen av bilden i ett inl\u00e4gg \u00e4r den bilden okomprimerad. ShortPixel kommer att optimera de ursprungliga bilderna du laddade upp och alla ytterligare storlekar som WordPress skapar.<\/p>\n<p>Du kommer att f\u00e5 en fantastisk prestanda\u00f6kning enbart genom komprimering, men det finns ytterligare tv\u00e5 enkla s\u00e4tt att ytterligare optimera bilder p\u00e5 din webbplats.<\/p>\n<h3>2 \u00c4ndra storlek p\u00e5 dina bilder<\/h3>\n<p>L\u00e5t oss s\u00e4ga att du laddar upp en bild som \u00e4r 5 000 x 2 500 px till din webbplats. Du infogar det sedan i ett inl\u00e4gg d\u00e4r det visas i 800 x 400px. Trots att bilden bara \u00e4r 800px bred p\u00e5 bes\u00f6karens sk\u00e4rm m\u00e5ste de fortfarande ladda ner 5 000px-versionen.<\/p>\n<p>On\u00f6digt att s\u00e4ga att en bild som \u00e4r 5 000 px bred \u00e4r massiv och kommer sannolikt att ta l\u00e4ngre tid att ladda \u00e4n alla andra filer p\u00e5 din webbplats tillsammans.<\/p>\n<p>Det finns tv\u00e5 s\u00e4tt att undvika detta.<\/p>\n<h4>Ladda upp mindre bilder<\/h4>\n<p>Som en allm\u00e4n tumregel, ladda inte upp bilder som \u00e4r st\u00f6rre \u00e4n 2 000 px breda. Oavsett om du anv\u00e4nder Windows eller Mac har du en enkel bildredigerare som du kan anv\u00e4nda f\u00f6r att snabbt \u00e4ndra storlek p\u00e5 bilder som \u00e4r f\u00f6r stora innan du laddar upp dem.<\/p>\n<p>Ett annat tips \u00e4r att undvika den &quot;fullst\u00e4ndiga&quot; versionen n\u00e4r du infogar en \u00f6verdimensionerad bild i ett inl\u00e4gg. V\u00e4lj storleken &quot;Large&quot; ist\u00e4llet som \u00e4r 1024px som standard.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176813-616f3248c6bb4.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176813-616f3248c6bb4.png\" alt=\"Hur man optimerar bilder f\u00f6r b\u00e4ttre WordPress-prestanda\"><\/a><\/p>\n<h4>\u00c4ndra storlek p\u00e5 bilder i ditt mediebibliotek<\/h4>\n<p>Det \u00e4r l\u00e4tt att \u00e4ndra storlek p\u00e5 bilder innan du laddar upp dem, men hur \u00e4r det med de som redan finns p\u00e5 din webbplats?<\/p>\n<p><a href=\"http:\/\/link.competethemes.com\/shortpixel-guide-3\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">ShortPixel<\/a> har en inst\u00e4llning som l\u00e5ter dig st\u00e4lla in en maximal bredd och h\u00f6jd f\u00f6r dina bilder.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176813-616f324ac8d3b.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176813-616f324ac8d3b.png\" alt=\"Hur man optimerar bilder f\u00f6r b\u00e4ttre WordPress-prestanda\"><\/a><\/p>\n<p>Du kan st\u00e4lla in det h\u00e4r alternativet s\u00e5 att bilderna aldrig besk\u00e4rs n\u00e4r de \u00e4ndras storlek. N\u00e4r du har aktiverat den h\u00e4r inst\u00e4llningen kan du k\u00f6ra bulkoptimeraren och ShortPixel kommer att \u00e4ndra storlek p\u00e5 alla alltf\u00f6r stora bilder som den st\u00f6ter p\u00e5. Det kommer ocks\u00e5 att \u00e4ndra storlek p\u00e5 nya bilder n\u00e4r du laddar upp dem.<\/p>\n<p>Om du har anv\u00e4nt m\u00e5nga stora bilder kan detta vara det mest f\u00f6rdelaktiga steget f\u00f6r din webbplats. Det finns bara en optimeringsteknik till och den \u00e4r den enklaste hittills.<\/p>\n<h3>3 Ta bort EXIF-data<\/h3>\n<p>Bildfiler kan inneh\u00e5lla ytterligare data som inte visas i sj\u00e4lva bilden kallas EXIF-data. EXIF kan vara ganska anv\u00e4ndbar och inneh\u00e5ller information som kameratillverkaren, datum och tidpunkt d\u00e5 bilden togs och till och med GPS-koordinaterna.<\/p>\n<p>Du beh\u00f6ver inte denna information bifogad till bilderna du l\u00e4gger upp p\u00e5 din webbplats. F\u00f6r att inte tala om, det \u00e4r f\u00f6rmodligen b\u00e4st av integritetssk\u00e4l att dina bilder inte inkluderar GPS-koordinater!<\/p>\n<p>\u00c5terigen, <a href=\"http:\/\/link.competethemes.com\/shortpixel-guide-4\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">ShortPixel<\/a> hanterar detta enkelt f\u00f6r oss. Det finns en inst\u00e4llning som \u00e4r aktiverad som standard som tar bort EXIF-data fr\u00e5n alla bilder under optimeringsprocessen.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176813-616f324cc2416.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176813-616f324cc2416.png\" alt=\"Hur man optimerar bilder f\u00f6r b\u00e4ttre WordPress-prestanda\"><\/a><\/p>\n<p>I genomsnitt leder detta till ytterligare 8,5 % minskning av filstorleken.<\/p>\n<h2>Mindre bilder = snabbare sajter<\/h2>\n<p>Om du inte har optimerat dina bilder alls kommer det h\u00e4r att bli en fantastisk dag f\u00f6r din webbplats!<\/p>\n<p>Alla pratar om hosting och filoptimeringar, men av n\u00e5gon anledning blir bildoptimering ofta eftersatt. Det \u00e4r galet eftersom det finns enorma vinster att g\u00f6ra.<\/p>\n<p>Jag anv\u00e4nder ShortPixel f\u00f6r att hantera alla metoder f\u00f6r bildoptimering som beskrivs i den h\u00e4r guiden och rekommenderar det f\u00f6r alla andra som bryr sig om prestandan p\u00e5 deras WordPress-webbplats.<\/p>\n<p><a href=\"http:\/\/link.competethemes.com\/shortpixel-guide-cta2\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Klicka h\u00e4r f\u00f6r att prova ShortPixel nu<\/a><\/p>\n<p>Nu n\u00e4r du \u00e4r p\u00e5 v\u00e4g till ett superoptimerat mediebibliotek, kanske du vill \u00f6verv\u00e4ga en <a href=\"https:\/\/www.competethemes.com\/blog\/wp-engine-review\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">premiumv\u00e4rd som WP Engine f\u00f6r<\/a> att ladda dessa bilder \u00e4nnu snabbare. Och du b\u00f6r ta en titt p\u00e5 <a href=\"https:\/\/themewp.inform.click\/sv\/hur-du-optimerar-din-wordpress-webbplats-med-wp-rocket\/\" title=\"WP Rocket-guiden,\">WP Rocket-guiden,<\/a> s\u00e4rskilt delen om <a href=\"https:\/\/www.competethemes.com\/blog\/wordpress-lazy-load-images\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">lazy loading<\/a> f\u00f6r ytterligare bildoptimering.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Inspelningsk\u00e4lla:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/www.competethemes.com\" class=\"external external_icon\">www.competethemes.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>F\u00f6lj dessa tre steg f\u00f6r att f\u00e5 massiva prestandaf\u00f6rb\u00e4ttringar f\u00f6r din WordPress-webbplats. Bildoptimering \u00e4r enkelt och kan dramatiskt snabba upp din webbplats idag.<\/p>\n","protected":false},"author":1,"featured_media":176814,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[587],"tags":[850],"class_list":["post-254726","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-snabba-upp-wordpress","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/posts\/254726","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/comments?post=254726"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/posts\/254726\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/media\/176814"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/media?parent=254726"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/categories?post=254726"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/tags?post=254726"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}