Turinys
- 01. Nuostolingas optimizavimas
- 02. Teisingi matmenys
- 03. Išsaugoti žiniatinkliui
- 04. Audituokite ir pašalinkite vaizdus
- 05. GIF ir PNG
- 06. Atsisakykite PNG
- 07. Tinkamas failo formatas
- 08. „Cache-Control“: be transformacijos
- Nginx
- Apache
- 09. CSS ir SVG
- 10. Progresyvūs JPEG
Šiandien skaitmeninės paklausa yra didesnė nei bet kada. Yra daugybė prijungtų įrenginių, o internetas prieinamas visur, akivaizdu, kad netrūksta žmonių, norinčių naudoti mūsų produktus. Tačiau klientai, kurie toleruos ilgą laukimo laiką, yra daug rečiau paplitę, todėl šioje srityje vis tiek reikia daug dirbti.
Kas yra DPI? Perskaitykite pagrindinį vaizdo skiriamosios gebos vadovą, įskaitant PDF kodų lapą!
Pralaidumas pastoviai didėja išsivysčiusiose šalyse, tačiau tą patį galima pasakyti apie interneto naudojimą atokiose vietovėse, viešajame transporte ir perpildytą nemokamą belaidį internetą. Kaip ir naršyklės priėmimas, prieiga prie geriausios prieinamos technologijos nėra galimybė visiems žmonėms visada. Šiandien labai gera suvokti, kaip svarbu būti greitam. Įrankiai, stebėjimas ir ištekliai yra geriausi, kokie jie yra buvę, o prastos veiklos finansinės pasekmės yra gerai žinomos. Vis dėlto mėnesį po mėnesio tinklalapių svoris toliau auga.
Daugelio didelių organizacijų problema yra ne ta, kad kūrėjų komandos nežino, ką reikia daryti, bet tai, kad prašymai suplanuoti žiniatinklio našumo patobulinimus yra lengvai pažeidžiami, kai suinteresuotosios šalys varžosi dėl kūrimo laiko. Jų aptarnaujamos įmonės laiką skiria kitai veiklai, pavyzdžiui, naujų funkcijų kūrimui.
Jei jums reikia greitai pagerinti produkto greitį, rekomenduoju pirmiausia atlikti vaizdo optimizavimą dėl šių priežasčių:
- Didžioji dauguma vidutinio tinklalapio yra vaizdai (64 proc.)
- Optimizavus vaizdus, failo dydis bus mažesnis nei bet kurio kito vidutinio puslapio aspekto
- Vaizdų optimizavimas yra galbūt lengviausia žiniatinklio našumo užduotis, kurią galite atlikti
- Vaizdo optimizavimas be nuostolių palieka tą patį vaizdą, tačiau PNG failų dydis sumažėja maždaug 20–40 proc., O JPEG formatu - 5–20 proc.
- Jo santykinis paprastumas reiškia, kad greičiau galite išsiųsti greitesnį produktą
- Pateikę patobulinimus, kuriuos suinteresuotosios šalys gali pamatyti ir į kuriuos galite kreiptis, tai padės sustiprinti jūsų prioritetą teikiant pirmenybę kitoms optimizacijoms
Taigi dabar, tikiuosi, įsitikinęs, pateikiu jums keletą metodų, kuriuos galite naudoti, kad padėtumėte optimizuoti vaizdų naudojimą.
01. Nuostolingas optimizavimas
Jei nieko nedarote, ką siūlau šiame straipsnyje, atsisiųskite ir naudokite „ImageOptim“, skirtą „OS X“, arba „FileOptimizer“, skirtą „Windows“ ir „Linux“, kad paketais optimizuotumėte savo vaizdus. Šioms programoms nereikia nieko kito, kaip tik, kad prieš nuklydę nuvilktumėte vaizdų aplanką į programą, kad galėtumėte išgerti kavos, kol jie dirba savo kerais. Procesas yra lengvas ir tai, kiek šios programos sumažina vaizdo failo dydį, visiškai nekeičiant jų išvaizdos, yra gana neįtikėtina.
02. Teisingi matmenys
Neteisingų matmenų naudojimas yra klaida, kurią dabar daro labai nedaugelis, tačiau verta paminėti dėl išsamumo. Dažniausiai tai atsitinka, kai kitur rodoma didesnio vaizdo miniatiūra.
img src = "threepwood-retina-2x-large.webp" width = "140" height = "84">
Naudojant didesnį vaizdą ir nustatant jo matmenis su kodu, jūsų puslapio dydis greitai sprogs, ypač kai atsižvelgiate į tai, kiek miniatiūrų turi daugybė puslapių.
Įsitikinkite, kad tikrojo vaizdo matmenys yra tokie patys, kaip ir ploto, kuriame jis bus rodomas.
img src = "threepwood-140x84.webp" width = "140" height = "84">
Interaktyvūs vaizdai, žinoma, yra kitokia istorija, tačiau tas pats principas galioja ne, pavyzdžiui, teikiant ir keičiant darbalaukio tinklainės vaizdus mobiliajame telefone. Dėl šios problemos ReSRC.it yra puiki paslauga, kuri šį procesą daro daug paprastesnį.
03. Išsaugoti žiniatinkliui
Vienas iš svarbiausių dalykų - pirmą kartą eksportuojant vaizdą, rasti gerą vietą tarp failo dydžio ir kokybės. Eksportuojant JPEG, kas 10 taškų, esančių kokybės matuoklyje 0–100, failas tampa 30–50 proc. Didesnis, taigi, žinant, kada, pavyzdžiui, pasirinkti 70, o ne 80, gausite didesnį pelną, nei gali bet kuris optimizavimo įrankis.
Perjunkite artinimą iš artumo ir natūralaus dydžio vaizdo peržiūrą. Buvimas arti padės jums įvertinti, kiek dar galite stumti vertę, tačiau vietovės, dėl kurių galbūt rūpėjotės iš arti, gali būti nepastebimos žiūrint natūraliu dydžiu. Perjungimas tarp dviejų reguliuojant mastelį padės rasti optimalų nustatymą.
04. Audituokite ir pašalinkite vaizdus
Patartina šiek tiek laiko praleisti naudojant savo produktą ir analizuojant kai kuriuos ankstesnius dizaino sprendimus - ar jums tikrai reikia kiekvieno vaizdo?
05. GIF ir PNG
PNG buvo sukurtas kaip patobulintas, nepatentuotas GIF pakaitalas. Kol jums nereikia animacijos, PNG apima tuos pačius praktinius tikslus kaip ir GIF - įskaitant skaidrumą -, tačiau naudingas mažesniems failų dydžiams (išskyrus tokias žinias kaip 1x1 pikselių vaizdai).
Priklausomai nuo jūsų pageidavimų ir kiek turite GIF vaizdų, galite juos iš naujo eksportuoti iš savo grafikos programos kaip PNG arba naudoti konvertuoti iš „ImageMagick“, kad juos paketais apdorotumėte komandinėje eilutėje. Kaip visada, po to nepamirškite paleisti naujų jūsų sukurtų vaizdų naudodami optimizavimo priemonę be nuostolių.
06. Atsisakykite PNG
Dažnai klaidinga nuomonė, kad vienintelis pusiau skaidrių taškų vaizdų formatas yra 24 bitų PNG. Pusiau permatomus taškus iš tikrųjų galima pasiekti naudojant 8 bitų PNG ir kaip papildomą premiją siūlome daug mažesnius failų dydžius nei 24 bitų PNG. Galite sumažinti 24 bitų PNG 8 bitų skaičių naudodami „ImageAlpha“, skirtą OS X, arba „PNGyu“, skirtą „Windows“.
07. Tinkamas failo formatas
Šiandien galima rinktis iš trijų pagrindinių rastruotų vaizdų formatų: JPEG, PNG ir GIF. Štai keletas patarimų, kurie padės pasirinkti tinkamą formatą:
- Jei jums reikalinga animacija, pasirinkite nuostolingą GIF
- Jei vaizdas yra nuotrauka, pasirinkite JPEG
- Jei jums reikia skaidrios nuotraukos, pasirinkite nuostolingą PNG
- Priešingu atveju pirmiausia išbandykite 8 bitų PNG, tada grįžkite į JPEG, jei kokybė jūsų netenkina
08. „Cache-Control“: be transformacijos
Ar kada pastebėjote, kad prieiga prie mobiliojo ryšio tinklo, jūsų įprasti vaizdai yra taip suspausti, kad kokybė yra baisi? Taip yra todėl, kad kai kurie operatoriai, perkeldami savo tinklą, perkompresuos jūsų vaizdus, kad įtiktų klientams su mažesnėmis pralaidumo sąnaudomis ir greitesniu naršymu.
Problema ta, kad tai daroma prastai ir vyksta neatsižvelgiant į tai, ar vaizdas jau buvo optimizuotas. Norėdami tai išjungti ir atgauti visišką savo vaizdų valdymą, paprasčiausias dalykas yra tai, kad serveris įtrauktų „Cache-Control: no-transform“ atsakymo antraštę teikiant vaizdus. Tai galima padaryti šiais būdais:
Nginx
vieta ~ * . (png | jpg | jpeg | gif) $ {add_header "Cache-Control" "public, non-transform"; }
Apache
IfModule mod_headers.c> FilesMatch ". (Png | jpg | jpeg | gif) $"> Antraštė pridėti talpyklos valdiklį "public, no-transform" / FilesMatch> / IfModule>
09. CSS ir SVG
Jei vaizdus naudojate palyginti paprastoms linijoms ir formoms rodyti, jų pakeitimas CSS ar SVG turi daugybę privalumų. Kaip paprasto teksto formatai, jie gali turėti daug lengvesnį pėdsaką nei rastriniai vaizdai, ir, skirtingai nei rastriniai vaizdai, padidinus jų dydį, nėra nelygių ar pikselių grafikos. Jų dydį galima keisti išlaikant puikų vaizdą. SVG palaiko visos šiuolaikinės naršyklės, todėl nebijokite pabandyti.
10. Progresyvūs JPEG
Yra dvi pagrindinės JPEG įkėlimo strategijos. „Bazinė linija“ įkeliama iš viršutinės pikselių eilutės žemyn į apačią, o „progresyvioji“ įkelia visą vaizdą, kuris yra labai pikselių, o po to palaipsniui jį aštrina. Kompromisas čia susijęs ne tiek su failo dydžiu, kiek su suvokiamu greičiu. Dėl šios priežasties palaikau progresyvų JPEG.
Norėdami konvertuoti input.webp į progresyvų JPEG, vadinamą output.webp, galite konvertuoti iš „ImageMagick“.
konvertuoti -strip -interlace Plane -kokybė 80 input.webp output.webp
Jei norite perrašyti input.webp galite paprasčiausiai tai nustatyti ir kaip išvesties argumentą.
