Online bildstorleksändring och optimering

Om du har ett kluster med fantastiska bilder så är jag säker på att du skulle älska att dela det med dina kunder på din webbplats. Du kan göra ett härligt bildspel, skapa gallerier eller helt enkelt infoga en bild på en enda sida eller blogg. Oavsett vilket alternativ du väljer kommer det att finnas en enda svårighet som du stötte på med icke-specialist innehållsredigerare: storleksändringen av bilden.

Nedan finns några rekommendationer för bildstorleksändring som kommer att vara till hjälp för dig.

Anpassa storleken så att den passar ditt innehåll

Ändra alltid storleken på dina bilder beroende på innehållets storlek eller enligt innehållets bredd. Till exempel, om ditt innehållsområde är begränsat till 650 pixlar brett, finns det inget krav på att storleken på din bild är större än 650 pixlar, eftersom din sida bara visar upp till 650 pixlar. Om egenskapen för bildstorlek är mindre eller större än behållaren försämras skärmkvaliteten.

Anpassa bildupplösningen för webben

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

Detta är särskilt fallet för PDF-filen. Undvik att göra PDF tillgänglig för webbläsning som innehåller bilder med högre upplösning än 72 dpi. I det här fallet kan ImageRecycle PDF ImageRecycle hjälpa, optimera en PDF med 300dpi bilder inuti och du kan spara 98% av pdf-storleken med en perfekt kvalitet som kan läsas på nätet.

Den bästa JPG-exportkvaliteten med ImageRecycle

Med hjälp av Photoshop är rekommendationen för webben att spara dina JPEG-bilder med max. 20 % av kompressionen. Du kan också göra några tester med olika JPEG-egenskaper som fungerar bäst för dig. Att tillämpa en global kompression är en fråga om balans mellan storlek och kvalitet.

Nu med ImageRecycle bildoptimeringsalgoritm är processen helt annorlunda. ImageRecycle upptäcker det aktuella bildkomprimeringsförhållandet och, angående det, optimerar bilden. Eftersom komprimering inte tillämpas på hela bilden kommer du att bli riktigt förvånad över testet nedan.

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

I exemplet nedan har jag exporterat 4 jpg-bilder med photoshop på kvalitetsnivå: 60% |
80 % | 90 % | 100% Sedan har jag optimerat bilder med ImageRecycle , här är storleksresultatet. Angående kvaliteten är 90/100% lite bättre än de 2 andra. Lärdomen här är: exportera dina jpg-bilder ju mindre komprimerade som möjligt, ImageRecycle gör resten!

Optimera de slutliga bilderna

Beroende på vilken webbplats du kör kan samma bilder visas på olika sidor med olika storlekar. Detta är vanligtvis något du hittar på en e-handel med skjutreglage, produktlistning, produktinformation, ...
Ändringsprocessen görs vanligtvis av ett online php-bibliotek som GD. Se till kvaliteten och vikten på dina ORIGINAL vs FINAL användarbilder. Lita inte på onlinebibliotek och cachegenerator, annars kan du ha problem med kvalitet och storlek. Om din originalbild redan är optimerad på din sida (genom att finjustera mellan kvalitet, färger, komprimering) för att spara bandbredd och sidladdning, med vissa webbtillägg som ändrar storlek på bibliotek, kan du 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 av ImageRecycle för att välja mappen där dina slutliga bilder lagras. Kör sedan automatisk optimering på den.
• Använd vår resizer för originalbilder. Du kan spara serverlagring, manipulera dina bilder snabbare och vanligtvis behöver du inte en bild med en bredd överlägsen 1600px på slutlig visning

Vad är nästa: HTML5 & the element

Responsiva designtekniker som inkluderar mediefrågor är sättet för webbdesigners att anpassa en webbplatslayout till ett brett utbud av enheter, från stationära datorer till smartphones, och få det att se skarpt ut genomgående. Problemet här är inte displayen utan prestandan, det här är skrivbordsbilden som visas och laddas på smartphone och surfplatta.

De HTML5-elementet försöker lösa detta problem. Fördelen med inbyggt optimerad bildresurs är laddningstid – särskilt viktigt för användare med långsammare mobila internetanslutningar. De element gör en verklig dynamisk storleksändring möjlig genom att bara ge en HTML-instruktion till webbläsaren.

Kodutdrag:

Gränsen för tillfället är att detta kräver en mycket ny kromversion (39) och en del JS för att fungera korrekt. Inom en nära framtid, med denna teknik förknippad med en bildoptimerare, kan vi förvänta oss det bästa för webbplatsens laddningstid.