WebP: वेबपेज compression format

 (purplesyringa.moe)
1 पॉइंट द्वारा GN⁺ 2024-09-08 | 1 टिप्पणियां | WhatsApp पर शेयर करें

WebP: वेबपेज compression format

बाधाएँ

  • वेबसाइट की accessibility बढ़ाने और page load time घटाने के लिए HTML को minimize किया गया
  • GitHub Pages, Brotli compression को support नहीं करता
  • gzip डिफ़ॉल्ट रूप से इस्तेमाल होता है, लेकिन Brotli बेहतर compression ratio देता है

सरल विचार

  • चूँकि GitHub Pages, Brotli को support नहीं करता, इसलिए client side पर JavaScript से decompress करने का तरीका विचार किया गया
  • brotli-dec-wasm और tiny-brotli-dec-wasm का उपयोग करके Brotli decompression संभव है

दूसरा प्रयास

  • Compression Streams API, gzip और DEFLATE format को support करता है, लेकिन Brotli को नहीं
  • Zopfli library का उपयोग करके gzip को अधिक कुशलता से compress किया जा सकता है, लेकिन फिर भी इसका प्रदर्शन Brotli से कम है

नियम तोड़ना

  • image compression का उपयोग करके data compress करने के तरीके पर विचार किया गया
  • PNG और GIF, DEFLATE algorithm का उपयोग करते हैं, लेकिन WebP बेहतर performance देता है

WebP के फायदे

  • WebP, PNG जैसी predictive transform का उपयोग करता है, लेकिन DEFLATE की जगह Google द्वारा विकसित विधि का उपयोग करता है
  • अलग-अलग Huffman trees का उपयोग करके अधिक कुशल compression देता है
  • color cache का उपयोग करके दोहराए जाने वाले रंगों को कुशलता से store करता है

प्रयोग

  • HTML file को compress करने के लिए webp crate का उपयोग किया गया
  • शुरुआती नतीजों में gzip की तुलना में 2 गुना छोटा size मिला

अतिरिक्त optimization

  • बेहतर compression performance पाने के लिए image का size adjust किया गया
  • सर्वोत्तम परिणाम पाने के लिए अलग-अलग compression methods आज़माए गए

benchmark

  • विभिन्न file formats के लिए gzip, bzip2, Brotli, WebP की तुलना की गई
  • अधिकांश मामलों में WebP ने gzip से बेहतर performance दिखाई
  • Brotli से कम performance होने के बावजूद, इसने फिर भी सार्थक सुधार दिया

JavaScript से decoding

  • Canvas API का उपयोग करके WebP decode करने का तरीका समझाया गया
  • WebGL का उपयोग करके anti-fingerprinting तकनीकों को bypass किया गया

अंतिम समायोजन

  • page load के समय flicker कम करने के लिए styling और ऊपर वाले हिस्से को gzip में रखा गया
  • scroll position बनाए रखने के लिए एक temporary workaround सुझाया गया

embedding

  • latency घटाने के लिए WebP को सीधे JavaScript में embed किया गया
  • size को न्यूनतम रखने के लिए base64 data URL का उपयोग किया गया

उदाहरण

  • वास्तविक web page में WebP का उपयोग करके compress किए गए उदाहरण दिए गए
  • compression के बाद page size घटने की पुष्टि हुई

GN⁺ का सार

  • यह लेख web page की compression performance बेहतर करने के लिए कई तरीकों का अन्वेषण करता है
  • WebP format, gzip से बेहतर performance देता है, लेकिन Brotli से कम है
  • JavaScript और WebGL का उपयोग करके client side पर WebP decode करने का तरीका समझाया गया
  • page load time घटाने के लिए कई optimization techniques सुझाई गईं
  • समान कार्यक्षमता देने वाले अन्य projects में Brotli और Zopfli शामिल हैं

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2024-09-08
Hacker News राय

  • लंबी पोस्ट का आकार 92 KiB से घटकर 37 KiB हो गया, फिर भी वास्तविक लोड समय में बढ़ोतरी सिर्फ 0.001% रही

    • decompression time की वजह से user experience और खराब हो सकता है

  • समझ नहीं आता कि readPixels पर fingerprinting-रोधी फीचर क्यों लागू नहीं होता

    • ऐसी तकनीक मौजूद है जो पेज के ऊपरी हिस्से की styling बनाए रखती है और viewport के नीचे वाले content को ही WebP में compress करती है
    • LibreWolf में WebGL को disable करने पर पेज कटता नहीं है

  • zstd को Chrome में शामिल किया जा चुका है, और इसे Safari में भी लागू किया जाना चाहिए

  • Google Fonts हटाने से पेज लोड समय बेहतर हो सकता है

    • क्योंकि यह remote server से लोड होता है, इसलिए अतिरिक्त handshake की ज़रूरत पड़ती है

  • source code देखने पर पता चला कि doctype declaration में space नहीं है

    • अभी यह <!doctypehtml> है, लेकिन इसे <!doctype html> में बदलना चाहिए

  • HTML पेज को self-extracting ZIP file के रूप में पैकेज किया जा सकता है

    • PNG image को शामिल करके HTML, ZIP और PNG के साथ compatible file बनाई जा सकती है
    • उदाहरण के लिए, HTML पेज में PNG image दिखाई जा सकती है

  • Sailfish OS browser में पेज टूट जाता है

    • paragraph के बाद लंबी खाली जगह आती है
    • gzip और brotli HTML compression का overhead, मौजूदा वेबसाइटों में इस्तेमाल होने वाले JS/image/video की मात्रा की तुलना में बहुत मामूली है

  • Brotli के पास बड़ा dictionary होने के बावजूद इसका प्रदर्शन gzip जैसा ही दिखता है

    • जिज्ञासा है कि compression algorithm खराब है, या dictionary का महत्व शायद सोचे गए से कम है

  • CompressionStream API में Brotli का उपयोग न होने की वजह यह है कि इससे browser का आकार काफी बढ़ जाता है

    • compression dictionary के बड़े होने का कारण शायद यह है कि उसमें पहले से गणना की गई सबसे efficient representations शामिल हैं