Hur man serverar skalade bilder i WordPress

Det är uppenbart att foton är en integrerad del av våra liv. Följaktligen kan vi knappast föreställa oss en webbplats utan bilder. Bilder lockar besökarnas syn och hjälper till att organisera sajtens innehåll. Bilder gör en sida intressant, informationsrik och förbättrar användarupplevelsen.

Överdimensionerade bilder har en negativ effekt på prestandan på en webbplats och bilder bör skalas efter det aktiva temat. De är viktiga element på en webbplats och de förtjänar att visas på bästa möjliga sätt. Det är mycket viktigt att visa skalade bilder på en WordPress-webbplats.

Storleken på skalade bilder anpassas till rätt storlek enligt de som definieras i HTML och CSS. Ändå är det inte många webbansvariga som uppmärksammar denna viktiga designdetalj. Ta exemplet med en bild med 500 x 500 pixlar för en 50 x 50 miniatyrbild. Webbläsaren måste ladda ner bilden och skala ner den så att den kan visas för besökaren. Uppenbarligen är detta ineffektivt och kommer att sakta ner webbplatsen.

Skillnaden i upplösning är inte synlig och därför är vikten som stora bilder för med sig ofta obemärkt. De flesta människor är inte ens medvetna om att denna överdrivna lösning orsakar problem och problemet är inte löst. De lämnar problemet åt webbläsaren att hantera.

Varför visa skalade bilder på en WordPress-webbplats

Det främsta skälet till att visa skalade bilder är att högupplösta bilder saktar ner en webbplats och ökar laddningstiderna. En långsam sida leder till dålig användarupplevelse och istället för att stanna och återvända kommer de att lämna och hålla sig borta. Kissmetrics-statistik visar att sidor som tar mer än tre sekunder att ladda kommer att ha en högre avvisningsfrekvens.

Med bildstorlekarna optimerade på en webbplats blir laddningstiderna kortare. Människor är mer benägna att stanna längre på webbplatsen och återvända senare. Detta förbättrar SEO och webbplatsens rankning kommer att gå upp.

Stora bilder orsakar olika problem

1. Det ökar stressen på webbläsarens prestanda. Webbläsaren måste utföra extra serverförfrågningar. Det kan inte visa bilden snabbt utan det kommer att ta tid och resurser att ändra storlek på bilden. Webbplatser med tunga bilder tar längre tid att ladda.
2. Om stora högupplösta bilder visas små på en webbplats slösar de tid och nedladdning av data. Så är till exempel fallet när en selfie från en mobiltelefon används obearbetad till en liten Gravatar.

Hur man skalar bilder på WordPress-webbplatser

Manuellt

För att börja från början, analysera bilderna på webbplatsen med hjälp av ett verktyg som GTMetrix. GTMetrix är ett prestationsanalysverktyg, designat av GT.net. Detta företag är känt för hastighetsövervakning och optimering, och Pingdom. Efter att GTMetrics analyserat webbplatsen genererar den en rapport. Detta visar vilka problem som upptäcktes och vilka förbättringar som rekommenderas.

När du granskar rapporten, var särskilt uppmärksam på fliken Struktur. På den här fliken klickar du på Bilder med rätt storlek. Det kommer att visa en lista över bilder som inte har rätt storlek.

WordPress krymper inte automatiskt bilder när det är möjligt utan lägger till dem på webbplatsen utan bearbetning. För att lösa detta problem finns det två alternativ.

Även om användningen av plugins inte är det önskade sättet, finns det andra alternativ. Det första sättet att skala bilder är att manuellt justera storleken på var och en genom att använda en fotoredigerare, som Photoshop. Det kan tyckas att denna metod är ineffektiv men i verkligheten är den inte det.

I Photoshop finns det fler alternativ förutom att justera bildens höjd och bredd. En annan sak att kontrollera här är upplösningen på bilden. För det mesta, för webbapplikationer, räcker 72 PPI för en bra tittarupplevelse.

Det andra är att använda ett plugin för att skala bilder. Detta alternativ är enkelt och snabbt. WordPress har sin egen funktion för att göra detta, srcset. Det här verktyget kan konvertera grafik, såsom bilder, till responsiva filer. Responsiva bilder anpassas automatiskt till olika enheter och skärmstorlekar. Nedan finns några andra plugins som gör ett bra jobb med att minska bildstorlekar.

Optimole

Ett utmärkt verktyg för att visa skalade bilder är Optimole. Det är ett WordPress-plugin som kan ändra storlek på bilder för olika enheter. Den ändrar automatiskt storleken till den optimala storleken för en bild, baserat på de olika typerna av enheter. Resultaten är skalade bilder av hög kvalitet.

Det här är några av funktionerna som gör Optimole till ett intressant val:

• De bearbetade bilderna är mindre men behåller sin kvalitet.
• Det är helt automatiserat. Det är bara att ladda upp bilderna.
• Optimole stöder alla bildformat.
• Den stöder olika bildtyper, inklusive Retina och WebP
• Den stöder molnbildsbibliotek.
• Optimole serverar globala CDN – bilder gratis.
• Det finns ingen anledning att gissa eller uppskatta önskad storlek. Optimole använder besökarens enhetsspecifikationer.
• Det finns fullt stöd för webbplatsbyggare, som Elementor.

Den automatiska bildbehandlingsfunktionen är ett stort plus med detta plugin-alternativ. Det finns ingen anledning att gå igenom en lång lista med inställningar; Optimole gör det helt själv.

Under Media > Optimole visar plugin-programmet status för tjänsterna, såväl som användningen och optimeringen som uppnåtts.

Avsnittet Alternativ finns under fliken Inställningar . Här finns det två funktioner som förtjänar ett speciellt omnämnande:

1. Aktivera bildersättning. Se till att det här alternativet är aktiverat för att njuta av den avancerade bildoptimeringsfunktionen.
2. Skala bilder & Lazy Load. Detta är alternativet som tillåter skalning av bilderna baserat på besökarens skärmstorlek. Lazy loading visar dessa bilder.

Smush bildoptimering

Smush Image Optimization, Compression och Lazy Load är det fullständiga namnet på den här listan över plugins. Se till att kvaliteten på bilden bevaras när du förminskar bilderna .

För att använda WP Smush är det nödvändigt att installera och aktivera det först. Då visas Smush-ikonen i WordPress-instrumentpanelen. I instrumentpanelen visas statistiken som Smush samlar på sig och aktuell status för de olika funktionerna.

Bredvid Totala besparingsdata visas en ikon som rapporterar alla bilder i mediebiblioteket som kräver bearbetning. Om det finns bilder som behöver bearbetas är det enklaste att gå till Bulk Smush-modulen. Detta kommer att minska alla bilder som flaggas.

För att bearbeta bilder individuellt, gå till mediebiblioteket och klicka på Kontrollera bilder igen. Detta ger en realtidsuppdatering av bilder som bör bearbetas.

Smush har funktioner som tillåter filtrering av bilder efter Smush-status och selektiv skalning av bilder.

Smush-pluginet bearbetar inte videor och GIF-filer. Bildfiler som lämnas oskalade indikerar att Smushs kraft inte används fullt ut.

EWWW Image Optimizer

EWWW Image Optimizer är också ett WordPress-plugin som optimerar bildstorlekar och format. Det fungerar med nya uppladdningar och befintliga bilder. Den har ett alternativ som skannar alla bilder på en webbplats och optimerar dem.

För att börja använda det, ladda ner och installera det och aktivera det från adminområdet på WordPress-webbplatsen. När du är i Dashboard-miljön klickar du på Inställningar och sedan på EWWW Image Optimizer. Under Grundinställningar finns olika alternativ, som att ta bort metadata från bilder. Optimeringsnivån för GIF, JPG och PNG bör ställas in på Pixel Perfect. Endast den betalda versionen tillåter optimering av PDF-filer också.

Fliken Ändra storlek innehåller ett alternativ för att avkänna storlek. I Ändra storlek på bilder ställer du in den högsta tillåtna höjden och bredden på bilderna på webbplatsen. Aktivera också alternativen Ändra storlek på andra bilder och Ändra storlek på befintliga bilder. Glöm inte att spara ändringarna.

ShortPixel

Den sista rekommendationen för att visa skalade bilder är insticksprogrammet ShortPixel. Det här är det rätta alternativet för dem som behöver visa skalade bilder men som har en knapp budget. Gratisversionen erbjuder 100 bildskalningar per månad.

ShortPixel är enkel och enkel att använda. Den bearbetar automatiskt bilder till de mått som användaren anger vid uppladdning till webbplatsen. Förutom det automatiska alternativet finns det även möjlighet att bearbeta bilder manuellt.

Insticksprogrammet minskar bildstorleken antingen förlustfri eller med förlust av upplösning. Den kan bearbeta GIF-, JPEG- och PNG-bilder och kan till och med optimera PDF-filer.

Avslutande tankar om hur man serverar skalade bilder

Det är uppenbart att det finns många sätt att visa skalade bilder på en WordPress-webbplats, och att göra det behöver inte vara svårt eller dyrt. Problemet är när hemsidan har varit online länge och det finns många bilder att bearbeta.

Att skala bilder är en viktig färdighet för alla som bygger eller underhåller en webbplats. Det hjälper till att göra långsamma webbplatser snabbare och ger andra prestandafördelar. Rätt bildspecifikation kommer att förbättra hastigheten på vilken webbplats som helst.

Om du tyckte om att läsa den här artikeln om hur man visar skalade bilder i WordPress, bör du kolla in den här om hur man gör ett telefonnummer klickbart i WordPress.

Vi skrev också om några relaterade ämnen som hur man bäddar in en Facebook-video i WordPress, hur man tar bort WordPress-teman, hur man skannar WordPress-databasen efter skadlig programvara, hur man laddar upp en HTML-fil i WordPress, hur man gör en WordPress-databasrensning, hur man hittar och ersätter en URL i en WordPress-databas och hur man döljer författaren i WordPress