1. Pradžia
2. Apie projektą

Apie PicBrewery

PicBrewery — nemokama, atviro kodo priemonė, glaudinanti ir konvertuojanti vaizdus tik jūsų naršyklėje. Vaizdai nesiunčiami į serverį — lieka įrenginyje.

Kas tai

PicBrewery — vieno puslapio internetinė programa nuotraukoms ir grafikai optimizuoti. Nutempkite JPG, PNG, WebP, AVIF ar BMP failus ir gaukite suglaudintus variantus visuose keturiuose šiuolaikiniuose formatais vienu metu, kad pasirinktumėte mažiausią, kuris vis dar atrodo gerai. Iki 20 failų po 20 MB partijoje, dvi lygiagrečios koduotės, kad nešiojamasis kompiuteris nesulėtėtų.

Kodėl optimizuoti vaizdus?

Vaizdai dažniausiai sudaro didžiausią srautą tinklalapyje — dažnai daugiau nei HTML, CSS ir JavaScript kartu. Glaudinimas ir konversija į naujesnius formatus — greičiausias ir mažiausia rizika kelias pagreitinti svetainę, sumažinti srauto sąskaitas ir pagerinti pozicijas paieškoje — be kodo perrašymo.

• Greitesnis įkėlimas ir geresnis SEO. Vaizdo masė daugiausia lemia Largest Contentful Paint (LCP) ir Core Web Vitals. Sumažinus hero vaizdus 40–60 %, LCP gali pereiti iš „silpno“ į „gerą“ diapazoną, kas veikia mobiliąją poziciją ir reklamų kokybę.
• Mažiau atšokimų mobiliajame ir lėtame tinkle. 3G/4G ar nestabiliame WiFi tinkle kelių megabaitų JPEG vėliau parodo pirmą prasmingą atvaizdą. Vartotojai palieka svetaines, kurios kraunasi ilgiau nei ~3 s. Mažesni AVIF ar WebP palaiko naudingumą ten, kur didžiausias srautas.
• Pigesnis hostingas ir CDN išėjimo srautas. Srautas — didžiausias kintamasis daugelio svetainių, parduotuvių ir nukreipimo puslapių kaina. Pusė vaizdo dydžio — mažiau didžiosios srauto dalies ir realių santaupų kas mėnesį.
• PWA dydis ir neprisijungus spartinimo saugykla. Service worker ir app shell turi ribas. Mažesni vaizdai — greitesni grįžimai ir vieta kitiems ištekliams.
• Tiksliau naudotojo patirtis programose ir animacijose. Didelių bitų atvaizdų dekodavimas blokuoja pagrindinę giją. Lengvesni failai greičiau dekoduojasi — animacijos ir slinkimas lieka sklandūs ant silpnesnės technikos.

Kaip tai veikia

PicBrewery naudoja subrendusius vaizdo kodekus, sukompiliuotus į WebAssembly, vykdomus Web Workers, kad sąsaja neužstrigtų. Tos pačios bibliotekos, kaip ir gimtojoje programoje, daro sunkų darbą — tik „klijai“ rašyti JavaScript.

• JPEG — MozJPEG, aukštos kokybės JPEG koduotė.
• PNG — oxipng (Rust), be nuostolių PNG optimizatorius.
• WebP — Google libwebp, su ir be nuostolių.
• AVIF — libavif su AOM AV1 koduotuvu — šiuo metu geriausias nuotraukų glaudinimas.

Po failų nuleidimo dekodavimas ir perkodavimas vyksta tik jūsų įrenginyje. OffscreenCanvas API ir tipizuoti masyvai perkelia pikselius su mažiausiu kopijavimu. Paruošti blobai patenka į atsisiuntimo nuorodą arba ZIP, surinktą naršyklėje su fflate.

Privatumas

100 % vaizdų apdorojimas kliento pusėje. Failai dekoduojami, koduojami ir supakuojami į ZIP tik naršyklėje — niekada nekeliauja į serverį, o kodekų dvejetainiai failai — statiniai ištekliai. Užkrovus PicBrewery gali veikti neprisijungus.

Pats tinklalapis naudoja privatumą gerbiančią analitiką (Google Analytics 4 ir Yandex.Metrika) ir gali rodyti reklamas (Google AdSense ir Yandex), kad projektas būtų nemokamas. Nė viena paslauga neįsijungia prieš sutikimą slapukų juostoje — galite priimti, atmesti ar keisti pasirinkimą privatumo politikoje arba nuorodoje „Slapukų nustatymai“ puslapio poraštėje.

Jūsų nuostatos (tema, išplėstiniai nustatymai) saugomos localStorage ir išlieka po perkrovimo.

Naršyklių palaikymas

Reikia šiuolaikiškos naršyklės su WebAssembly, Web Workers ir OffscreenCanvas — Chrome 90+, Firefox 90+ ir Safari 15+. Senesnės rodo aiškų pranešimą apie nepalaikymą.

Daugiau

Apie formatus pradėkite nuo vaizdų formatų palyginimo — praktinis gidas apie JPEG, PNG, WebP ir AVIF — arba atverkite PicBrewery.