Bildstorlekens storlek och optimering

Om du har ett kluster fantastiska bilder så är jag säker på att du gärna skulle vilja dela det med dina kunder på din webbplats. Du kan skapa ett härligt bildspel, skapa gallerier eller helt enkelt infoga bild på en enda sida eller blogg. Vilket alternativ du än väljer kommer det att finnas enstaka svårigheter som du stötte på med innehållsredigerare som inte är specialiserad: bildens storlek.

Nedan finns några rekommendationer för storleksä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 webbplatskontur. 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 syfte som att e-posta, blogga eller för att dela över sociala medier. Med undantag för 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- ImageRecycle med ImageRecycle

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

Nu med ImageRecycle är processen helt annorlunda. ImageRecycle upptäcker det aktuella bildkomprimeringsförhållandet och optimerar bilden med avseende på detta. Eftersom komprimering inte tillämpas på hela bilden blir du verkligen förvånad över testbälgen.

Kom ihåg: mindre originalbilden komprimeras, bättre optimering och storlek blir.

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. Om kvaliteten är 90/100% lite bättre än de två andra. Lektionen här är: exportera dina jpg-bilder ju mindre komprimerad 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. Det här är vanligtvis något du hittar på en e-handel med skjutreglage, produktinformation, 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 göra en finjustering 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 att välja den mapp 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 snabbare dina bilder och vanligtvis behöver du inte bild med bredd överlägsen 1600px på slutdisplay

Vad är nästa: HTML5 & the element

Responsiv designteknik som inkluderar mediefrågor är vägen för webbdesigners att anpassa en webbplatslayout till ett brett utbud av enheter, från stationära datorer till smartphones, och få den konsekvent att se skarp ut. Problemet här är inte skärmen utan prestanda, 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 nativt optimerad bildresurs är laddningstid - särskilt viktigt för användare på 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 snar framtid, med denna teknik förknippad med en bildoptimering, kan vi förvänta oss det bästa för webbplatsens laddningstid.