Online billedstørrelse 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 er der nogle anbefalinger til billedstørrelse, som vil være nyttige for 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 nettet

Der vil ikke være noget indtryk af "per tomme" i nogen hjemmesideoversigt. PPI, det vil sige pixels 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'en , undgå at gøre PDF tilgængelig til weblæsning, der indeholder billeder med en opløsning på over 72 dpi. I dette tilfælde ImageRecycle PDF optimizer hjælpe, optimere en PDF med 300 dpi billeder indeni, og du kan spare 98% af pdf-størrelsen med en perfekt kvalitet til at blive læst på nettet.

Den bedste JPG-eksportkvalitet med ImageRecycle

Ved brug af Photoshop er anbefalingen til nettet at gemme dine JPEG-billeder med max. 20 % af kompressionen. Du kan også lave nogle test med forskellige JPEG-dyder, der fungerer bedst for dig. Anvendelse af en global kompression er et spørgsmål om balance mellem størrelse og kvalitet.

Nu med ImageRecycle billedoptimeringsalgoritme er processen helt anderledes. ImageRecycle registrerer det aktuelle billedkomprimeringsforhold og optimerer i den forbindelse billedet. Fordi komprimering ikke anvendes på hele billedet, vil du virkelig blive overrasket over testen nedenfor.

Husk: mindre det originale billede er komprimeret, vil bedre optimering og størrelse være.

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% en smule bedre end de 2 andre. Lektionen her er: eksporter dine jpg-billeder jo mindre komprimeret som muligt, ImageRecycle klarer 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 spare serverlagring, manipulere dine billeder hurtigere, og normalt har du ikke brug for et billede med en bredde på over 1600 px på den endelige visning

Hvad er det næste: HTML5 & the element

Responsive designteknikker, der inkluderer medieforespørgsler, er måden for webdesignere at tilpasse et webstedslayout til en bred vifte af enheder, fra stationære computere til smartphones, og få det konsekvent 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-elementet forsøger at løse dette problem. Fordelen ved indbygget optimeret billedressource er indlæsningstid - især vigtig for brugere på langsommere mobile internetforbindelser. Det element gør en ægte dynamisk ændring af størrelse mulig ved blot at give en HTML-instruktion til browseren.

Kodeuddrag:

Grænsen i øjeblikket er, at dette kræver en helt ny chrome-version (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 hjemmesidens indlæsningstid.