Ændring af størrelse på online billede og optimering

Hvis du har en klynge af fantastiske billeder, er jeg sikker på, at du ville elske at dele det med dine klienter på dit websted. Du kan lave et dejligt lysbilledshow, lave gallerier eller blot indsætte billede på en enkelt side eller blog. Uanset hvilken mulighed du vælger, vil der være en enkelt vanskelighed, som du stødte på med ikke-specialiseret indholdsredigeringsprogram: billedets størrelse ændres.

Nedenfor der nogle henstillinger til ændring af billede, der kan hjælpe dig.

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

Du skal altid ændre størrelsen på dine billeder efter størrelsen på indholdet eller i henhold til bredden på indholdet. For eksempel, hvis dit indholdsområde er begrænset til 650 pixels bredt, er der ikke noget krav om at formatere dit billede for stort end 650 pixels, fordi din side kun viser op til 650 pixels. Hvis billedstørrelsesegenskaben er mindre eller større end beholderen, forringes skærmkvaliteten.

Tilpas billedopløsning til internettet

Der vil ikke være noget indtryk af "per tomme" i nogen hjemmesideoversigt. PPI, det vil sige pixel pr. tomme og DPI, det vil sige punkter pr. tomme, har ingen relevans, når du redigerer eller ændrer størrelsen på dit billede til ethvert formål som e-mail, blogging eller til deling over sociale medier. Med undtagelse af print, på skærmen, vil du ikke være i stand til at skelne i billedfunktioner eller kvalitet.

Dette er især tilfældet for PDF-filen . Undgå at stille PDF til rådighed til weblæsning, der indeholder billeder med en opløsning højere end 72 dpi. I dette tilfælde kan ImageRecycle PDF optimizer hjælpe, optimere en PDF med 300 dpi billeder indeni, og du kan gemme 98% af pdf-størrelsen med en perfekt kvalitet, der kan læses på nettet.

Den bedste JPG-eksportkvalitet med ImageRecycle

Ved hjælp af Photoshop er anbefalingen til internettet at gemme dine JPEG-billeder med maks. 20% af komprimering. Du kan også udføre nogle test med forskellige JPEG-dyder, der fungerer bedst for dig. Anvendelse af en global komprimering er et spørgsmål om balance mellem størrelse og kvalitet.

Nu med ImageRecycle billedoptimeringsalgoritmen er processen en helt anden. ImageRecycle registrerer det aktuelle billedkompressionsforhold og optimerer billedet med hensyn til det. Da komprimering ikke anvendes på hele billedet, vil du virkelig blive forbløffet over testbælgen.

Husk: mindre det originale billede komprimeres, bedre optimering og størrelse.

I eksemplet nedenfor har jeg eksporteret 4 jpg-billeder ved hjælp af photoshop på kvalitetsniveau: 60% |
80% | 90% | 100% Så har jeg optimeret billeder ved hjælp af ImageRecycle , her er størrelsesresultatet. Om kvaliteten er 90/100% lidt bedre end de 2 andre. Lektionen her er: eksporter dine jpg-billeder, så mindre komprimeret som muligt, vil ImageRecycle gøre resten!

Optimer de endelige billeder

Afhængigt af det 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-handel med skyder, produktliste, produktdetaljer,...
Ændringsprocessen udføres normalt af et online php-bibliotek som GD. Sørg for kvaliteten og vægten af ​​dine ORIGINAL vs FINAL brugerbilleder. Stol ikke på onlinebiblioteker og cachegenerator, ellers kan du have problemer med kvalitet og størrelse. Hvis dit originale billede allerede er optimeret på din side (ved at lave en finjustering mellem kvalitet, farver, komprimering) for at spare båndbredde og sideindlæsning, med nogle biblioteker til ændring af størrelse på webudvidelser, kan du miste alt det!

Løsningen:

• Anvend optimering på det billede, 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 resizer til originale billeder. Du kan gemme serverlagring, manipulere hurtigere dine billeder, og du har normalt ikke brug for billede med bredde overlegen end 1600px på den endelige skærm

Hvad er det næste: HTML5 & the element

Responsive designteknikker, der inkluderer medieforespørgsler, er vejen for webdesignere til at tilpasse et webstedslayout 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, dette er skrivebordsbilledet, der vises og indlæses på smartphone og tablet.

Det HTML5-element forsøger at løse dette problem. Fordelen ved naturligt optimeret billedressource er indlæsningstid - især vigtig for brugere på langsomme mobile internetforbindelser. Det element muliggør en reel dynamisk størrelse ved blot at give en HTML-instruktion til browseren.

Kodeuddrag:

Grænsen i øjeblikket er, at dette kræver en meget ny kromversion (39) og nogle JS for at fungere korrekt. I en nær fremtid med denne teknologi forbundet med en billedoptimering kan vi forvente det bedste for webstedets indlæsningstid.