Storleksändring och optimering av bilder online

Om du har ett kluster av fantastiska bilder är jag säker på att du skulle älska att dela dem med dina kunder på din webbplats. Du kan skapa ett fint bildspel, skapa gallerier eller helt enkelt infoga bilder på en enda sida eller blogg. Oavsett vilket alternativ du väljer kommer det att finnas ett problem som du stöter på med en icke-specialiserad innehållsredigerare: bildstorleksändring.

Nedan följer några rekommendationer för bildstorleksändring som kan vara till hjälp för dig.

Anpassa storleken efter ditt innehåll

Ändra alltid storleken på dina bilder efter innehållets storlek eller bredd. Om ditt innehållsområde till exempel är begränsat till 650 pixlar i bredd, finns det inget krav på att bilden ska vara större än 650 pixlar, eftersom din sida bara kommer att visa upp till 650 pixlar. Om egenskapen bildstorlek är mindre eller större än behållaren försämras visningskvaliteten.

Anpassa bildupplösningen för webben

Det kommer inte att finnas något intryck av "per tum" i någon webbplatsdisposition. PPI, det vill säga pixlar per tum, och DPI, det vill säga punkter per tum, har ingen relevans när du redigerar eller ändrar storlek på din bild för något ändamål som att skicka e-post, blogga eller dela på sociala medier. Förutom för utskrift, visning på skärmen, kommer du inte att kunna göra någon skillnad i bildfunktion eller kvalitet.

Detta gäller särskilt för PDF-filer , undvik att göra PDF-filer tillgängliga för webbläsning som innehåller bilder med en upplösning högre än 72 dpi. I det här fallet ImageRecycle PDF-optimerare hjälpa till, optimera en PDF med 300 dpi-bilder inuti och du kan spara 98 % av PDF-storleken med perfekt kvalitet för webbläsning.

Den bästa JPG-exportkvaliteten med ImageRecycle

När du använder Photoshop rekommenderas det att spara dina JPEG-bilder med max 20 % komprimering. Du kan också testa med olika JPEG-funktioner som fungerar bäst för dig. Att tillämpa en global komprimering är en fråga om balans mellan storlek och kvalitet.

Med ImageRecycle bildoptimeringsalgoritm är processen helt annorlunda. ImageRecycle detekterar bildens aktuella komprimeringsförhållande och optimerar bilden i den meningen. Eftersom komprimering inte tillämpas på hela bilden kommer du att bli genuint förvånad över testet nedan.

Tänk på: mindre originalbilden komprimeras, desto bättre optimering och storlek blir det.

I exemplet nedan har jag exporterat fyra jpg-bilder med Photoshop på kvalitetsnivån: 60 % | 80 % | 90 % | 100 %.
Sedan har jag optimerat bilderna med ImageRecycle , här är storleksresultatet. När det gäller kvaliteten är 90/100 % lite bättre än de två andra. Lärdomen här är: exportera dina jpg-bilder så att de är så lite komprimerade som möjligt, ImageRecycle resten!

Optimera de slutliga bilderna

Beroende på vilken webbplats du använder kan samma bilder visas på olika sidor med olika storlekar. Detta är vanligtvis något du hittar på en e-handelsplattform med Slider, produktlistor, produktdetaljer,...
Storleksändringsprocessen görs vanligtvis av ett online-PHP-bibliotek som GD. Se till att kvaliteten och vikten på dina ORIGINAL- kontra SLUTGILTIGA användarbilder är korrekt. Lita inte på online-bibliotek och cachegeneratorer, annars kan du få problem med kvalitet och storlek. Om din originalbild redan är optimerad för din sida (genom att finjustera kvalitet, färger, komprimering) för att spara bandbredd och sidinläsning, kan du med vissa storleksändringsbibliotek för webbtillägg förlora allt det!

Lösningen:

• Tillämpa optimering på bilden som visas i din slutliga klientwebbläsare. Du kan göra det manuellt på varje bild och för varje storlek eller använda vårt API- eller CMS-tillägg för ImageRecycle för att välja mappen där dina slutliga bilder lagras. Kör sedan automatisk optimering på den.
• Använd vår storleksförstorare för originalbilder. Du kan spara serverlagring, manipulera dina bilder snabbare och vanligtvis behöver du inte bilder med en bredd över 1600px på den slutliga skärmen

Vad händer härnäst: HTML5 och<picture> element

Responsiva designtekniker som inkluderar mediafrågor är sättet för webbdesigners att anpassa en webbplatslayout till en mängd olika enheter, från stationära datorer till smartphones, och få den att se konsekvent skarp ut. Problemet här är inte skärmen utan prestandan, det är skrivbordsbilden som visas och laddas på smartphone och surfplatta.

De<picture> HTML5-elementet försöker lösa detta problem. Fördelen med nativt optimerade bildresurser är laddningstiden – särskilt viktigt för användare med långsammare mobila internetanslutningar.<picture> elementet möjliggör en verklig dynamisk storleksändring genom att bara ge en HTML-instruktion till webbläsaren.

Kodutdrag:

Begränsningen för tillfället är att detta kräver en mycket aktuell Chrome-version (39) och lite JS för att fungera korrekt. Inom en snar framtid, med den här tekniken i kombination med en bildoptimerare, kan vi förvänta oss det bästa för webbplatsens laddningstid.