Online billedstørrelsesændring og -optimering

Hvis du har en klynge af fantastiske billeder, er jeg sikker på, at du vil elske at dele dem med dine kunder på din hjemmeside. Du kan lave et flot slideshow, lave gallerier eller blot indsætte billeder på en enkelt side eller blog. Uanset hvilken mulighed du vælger, vil der være én udfordring, du støder på med et ikke-specialiseret indholdsredigeringsprogram: billedstørrelsesændring.

Nedenfor finder du nogle anbefalinger til ændring af billedstørrelse, som kan være nyttige for dig.

Tilpas størrelsen, så den passer til dit indhold

Tilpas altid størrelsen på dine billeder i henhold til indholdets størrelse eller indholdets bredde. Hvis dit indholdsområde f.eks. er begrænset til 650 pixels i bredden, er der ikke noget krav om at størrelsen på dit billede er større end 650 pixels, da din side kun vil vise op til 650 pixels. Hvis billedstørrelsesegenskaben er mindre eller større end containeren, vil visningskvaliteten blive forringet.

Tilpas billedopløsning til internettet

Der vil ikke være nogen form for "per tomme" i nogen hjemmesides disposition. PPI, det vil sige pixels per tomme, og DPI, det vil sige dots per inch, har ingen relevans, når du redigerer eller skalerer dit billede til noget formål som f.eks. e-mail, blogging eller deling på sociale medier. Bortset fra til udskrivning, visning på skærmen, vil du ikke kunne skelne mellem billedfunktioner eller -kvalitet.

Dette gælder især for PDF'en. Undgå at gøre PDF'er tilgængelige til weblæsning, der indeholder billeder med en opløsning på over 72 dpi. I dette tilfælde ImageRecycle PDF-optimereren hjælpe med at optimere en PDF med 300 dpi-billeder, og du kan spare 98% af PDF-størrelsen med en perfekt kvalitet til læsning på nettet.

Den bedste JPG-eksportkvalitet med ImageRecycle

Når du bruger Photoshop, anbefales det at gemme dine JPEG-billeder med maks. 20% komprimering på nettet. Du kan også teste med forskellige JPEG-funktioner, der passer bedst til dig. At anvende en global komprimering er et spørgsmål om balance mellem størrelse og kvalitet.

Med ImageRecycle billedoptimeringsalgoritme er processen helt anderledes. ImageRecycle registrerer det aktuelle billedkomprimeringsforhold og optimerer i den forbindelse billedet. Da komprimering ikke anvendes på hele billedet, vil du blive virkelig forbløffet over testen nedenfor.

Husk: Mindre komprimeret originalbillede vil være, jo bedre optimering og størrelse.

I eksemplet nedenfor har jeg eksporteret 4 jpg-billeder ved hjælp af Photoshop i kvalitetsniveauet: 60% | 80% | 90% | 100%.
Derefter har jeg optimeret billederne ved hjælp af ImageRecycle . Her er størrelsesresultatet. Med hensyn til kvalitet er 90/100% lidt bedre end de 2 andre. Lærdommen her er: eksporter dine jpg-billeder så lidt komprimeret som muligt, ImageRecycle klarer resten!

Optimer de endelige billeder

Afhængigt af hvilket websted du kører, kan de samme billeder vises på forskellige sider med forskellige størrelser. Dette er typisk noget, du finder på en e-handelsplatform med slider, produktlister, produktdetaljer osv.
Ændring af størrelsen udføres normalt af et online PHP-bibliotek som GD. Sørg for kvaliteten og vægten af ​​dine ORIGINALE vs. FINAL brugerbilleder. Stol ikke på onlinebiblioteker og cachegeneratorer, da du ellers kan få problemer med kvalitet og størrelse. Hvis dit originale billede allerede er optimeret (ved at finjustere kvalitet, farver og komprimering) for at spare båndbredde og sideindlæsning, kan du miste alt det med nogle webudvidelsesbiblioteker til ændring af størrelse!

Løsningen:

• Anvend optimering på billedet, der vises i din endelige klientbrowser. Du kan gøre det manuelt på hvert billede og for hver størrelse eller bruge vores API- eller CMS-udvidelse af ImageRecycle til at vælge den mappe, hvor dine endelige billeder er gemt. Kør derefter automatisk optimering på den.
• Brug vores størrelsesjustering til originale billeder. Du kan spare serverplads, manipulere dine billeder hurtigere, og normalt behøver du ikke billeder med en bredde på over 1600px på den endelige visning

Hvad er det næste: HTML5 og<picture> element

Responsive designteknikker, der inkluderer medieforespørgsler, er måden for webdesignere at tilpasse et websitelayout til en bred vifte af enheder, fra desktops til smartphones, og få det til at se skarpt ud. Problemet her er ikke skærmen, men ydeevnen. Det er desktopbilledet, der vises og indlæses på smartphone og tablet.

De<picture> HTML5-elementet forsøger at løse dette problem. Fordelen ved native optimerede billedressourcer er indlæsningstiden - især vigtigt for brugere med langsommere mobilinternetforbindelser.<picture> elementet gør en reel dynamisk størrelsesændring mulig ved blot at give en HTML-instruktion til browseren.

Kodeuddrag:

Grænsen i øjeblikket er, at dette kræver en meget nyere Chrome-version (39) og noget JS for at fungere korrekt. I den nærmeste fremtid, med denne teknologi forbundet med en billedoptimering, kan vi forvente det bedste for hjemmesidens indlæsningstid.