Google का पृष्ठ गति दोषरहित छवि संपीड़न कैसे काम करता है?

Question

जब आप किसी वेबसाइट पर फ़ायरबग / फ़ायरफ़ॉक्स के लिए Google के पेजस्पीड प्लगइन चलाते हैं, तो यह उन मामलों का सुझाव देगा जहां एक छवि को दोषरहित संपीड़ित किया जा सकता है, और इस छोटी छवि को डाउनलोड करने के लिए एक लिंक प्रदान कर सकता है।

उदाहरण के लिए:

• दोषरहित कंप्रेसिंग http://farm3.static.flickr.com/2667/4096993475_80359a672b_s.jpg 33.5KiB (85% कमी) को बचा सकता है।
• दोषरहित कंप्रेसिंग http://farm2.static.flickr.com/1149/5137875594_28d0e287fb_s.jpg 18.5KiB (77% कमी) बचा सकता है।
• दोषरहित कंप्रेसिंग http://cdn.uservoice.com/images/widgets/en/feedback_tab_white.png 262B (11% की कमी) बचा सकता है।
• दोषरहित संपीड़ित http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/images/ui-bg_flat_75_ffffff_40x100.png 91B (51% कमी) बचा सकता है।
• दोषरहित कंप्रेसिंग http://www.gravatar.com/avatar/0b1bccebcd4c3c38cb5be805df5e4d42?s=45&d=mm 61B (5% की कमी) को बचा सकता है।

यह JPG और PNG फाइलपेट दोनों पर लागू होता है (मैंने GIF या अन्य का परीक्षण नहीं किया है।)

ध्यान दें फ़्लिकर थंबनेल (वे सभी चित्र 75x75 पिक्सेल हैं।) वे कुछ बहुत बड़ी बचत हैं। यदि यह वास्तव में बहुत अच्छा है, तो याहू इस सर्वर-साइड को अपनी पूरी लाइब्रेरी में लागू नहीं कर रहा है और अपने भंडारण और बैंडविड्थ भार को कम क्यों कर रहा है?

यहां तक ​​कि Stackoverflow.com कुछ बहुत मामूली बचत के लिए खड़ा है:

• दोषरहित कंप्रेसिंग http://sstatic.net/stackoverflow/img/sprites.png?v=3 1.7KiB (10% की कमी) को बचा सकता है।
• दोषरहित कंप्रेसिंग http://sstatic.net/stackoverflow/img/tag-chrome.png 11B (1% की कमी) को बचा सकता है।

मैंने देखा है कि पेजस्पीड ने पीएनजी फाइलों पर काफी सभ्य बचत का सुझाव दिया है जो मैंने फोटोशॉप के 'सेव फॉर वेब' फीचर का उपयोग करके बनाई है।

तो मेरा सवाल यह है कि उन्हें कम करने के लिए वे छवियों में क्या बदलाव ला रहे हैं? मैं अनुमान लगा रहा हूं कि अलग-अलग फाइलपेट के लिए अलग-अलग उत्तर हैं। क्या यह वास्तव में जेपीजी के लिए दोषरहित है? और वे फ़ोटोशॉप को कैसे हरा सकते हैं? क्या मुझे इस पर थोड़ा संदेह होना चाहिए?

Comments

ऐसा लगता है कि पेजस्पीड अब हानिपूर्ण संपीड़न की मांग कर रहा है। परिणामों से पहले कहा गया था: "lossless compressing xxx.jpg xx kb (xx% कमी) को बचा सकता है"। अब यह कहता है कि "xxx.jpg को कम करने से xx kb (xx% की कमी) को बचाया जा सकता है" महत्वपूर्ण रूप से, Google केवल छोटी छवियों (थंबनेल आदि) को नुकसान पहुंचाने के लिए अनुरोध करता है। क्या कोई यह पता लगा सकता है कि Google द्वारा उपयोग किए जा रहे हानिरहित संपीड़न उपकरण और पैरामीटर क्या हैं?

— मार्टिन

Answer 1

यदि आप वास्तव में तकनीकी विवरणों में रुचि रखते हैं, तो स्रोत कोड देखें:

• png_optimizer.cc
• jpeg_optimizer.cc
• webp_optimizer.cc

---

PNG फ़ाइलों के लिए, वे कुछ परीक्षण और त्रुटि दृष्टिकोण के साथ OptiPNG का उपयोग करते हैं

// we use these four combinations because different images seem to benefit from
// different parameters and this combination of 4 seems to work best for a large
// set of PNGs from the web.
const PngCompressParams kPngCompressionParams[] = {
  PngCompressParams(PNG_ALL_FILTERS, Z_DEFAULT_STRATEGY),
  PngCompressParams(PNG_ALL_FILTERS, Z_FILTERED),
  PngCompressParams(PNG_FILTER_NONE, Z_DEFAULT_STRATEGY),
  PngCompressParams(PNG_FILTER_NONE, Z_FILTERED)
};

जब सभी चार संयोजनों को लागू किया जाता है, तो सबसे छोटा परिणाम रखा जाता है। इतना ही आसान।

(NB: optipngकमांड लाइन उपकरण वह करता है, भले ही आप के -o 2माध्यम से प्रदान करें -o 7)

---

JPEG फ़ाइलों के लिए, वे निम्नलिखित विकल्पों के साथ jpeglib का उपयोग करते हैं:

 JpegCompressionOptions()
     : progressive(false), retain_color_profile(false),
       retain_exif_data(false), lossy(false) {}

---

इसी तरह, WEBP इन विकल्पों के साथ libwebp का उपयोग करके संपीड़ित होता है :

  WebpConfiguration()
      : lossless(true), quality(100), method(3), target_size(0),
        alpha_compression(0), alpha_filtering(1), alpha_quality(100) {}

---

इसमें image_converter.cc भी है जिसका उपयोग सबसे छोटे प्रारूप में दोषरहित रूप से परिवर्तित करने के लिए किया जाता है।

Comments

जेपीईजी के लिए विशेष रूप से रिटेन_कोलर_प्रोफाइल (गलत) एक बुरा विचार हो सकता है। के रूप में विस्तारित रंग सरगम ​​प्रदर्शित करता है और अधिक स्पष्ट रूप से परिभाषित रंग प्रतिपादन निर्देश एक आम हो जाता है। यदि मूल छवि sRGB एनकोडेड थी, तो यह अभी भी कुछ ब्राउज़रों (सफारी, फ़ायरफ़ॉक्स के बारे में: config संशोधन) में काम करेगी जबकि अन्य में केवल वास्तव में टैग की गई छवियों का रंग प्रबंधित किया जा सकता है (डिफ़ॉल्ट फ़ायरफ़ॉक्स)। बेशक किसी भी रंग प्रबंधन क्षमताओं के बिना ब्राउज़र परवाह नहीं करेंगे ...

— सीओ

मैं चला optipng file.png -o7रहा हूँ और मुझे कहीं नहीं मिल रहा है जो Google दिखाता है। संभवतया वे एसवीजी में परिवर्तित हो जाते हैं?

— नटोमामी

@ नाओटॉमी मैं एक ही मुद्दा था ... कुछ पीएनजी के लिए Google ऑप्टिपिंज -7 से बेहतर करता है। इनके लिए आप पेजस्पीड वेबसाइट से ही अनुकूलित चित्र डाउनलोड कर सकते हैं।

— 14

Answer 2

मैं jpegoptimJPG फ़ाइलों optipngको अनुकूलित करने और PNG फ़ाइलों को अनुकूलित करने के लिए उपयोग करता हूं ।

यदि आप चालू हैं bash, तो सभी JPGs को एक निर्देशिका (पुनरावर्ती) में दोषरहित रूप से अनुकूलित करने का आदेश है:

find /path/to/jpgs/ -type f -name "*.jpg" -exec jpegoptim --strip-all {} \;

आप उदाहरण के लिए, जेपीजी छवियों को संक्षिप्त -m[%]करने के jpegoptimलिए जोड़ सकते हैं :

 find /path/to/jpgs/ -type f -name "*.jpg" -exec jpegoptim -m70 --strip-all {} \;

एक निर्देशिका में सभी PNG का अनुकूलन करने के लिए:

find /path/to/pngs/ -type f -name "*.png" -exec optipng -o2 {} \;

-o2डिफ़ॉल्ट अनुकूलन स्तर है, तो आप से बदल सकते हैं o2करने के लिए o7। ध्यान दें कि उच्च अनुकूलन स्तर का मतलब लंबे समय तक प्रसंस्करण समय है।

Answer 3

Http://code.google.com/speed/page-speed/docs/payload.html#CompressImages पर नज़र डालें, जो कुछ तकनीकों / उपकरणों का वर्णन करता है।

Comments

लिंक के लिए धन्यवाद। मुझे लगता है कि मैं वास्तव में इस बारे में अधिक जानने के लिए देख रहा हूं कि छवि फ़ाइलों में किस प्रकार की अतिरेक हैं जो कि छीन ली जा सकती हैं यदि फाइल करना आपकी प्राथमिक चिंता है। मुझे पता है कि जानकारी वहाँ वेब पर है, मैं बस इसे एसओ पर यहाँ से टकराने के लिए एक अच्छी जगह चाहता था।

— ड्रू नॉक

मैं एक कस्टम बिल्ड टूल का उपयोग करता हूं, जो ऑप्टिपंग और पींगक्रश दोनों के साथ छवियों को संपीड़ित करता है, फिर छोटी फ़ाइल का चयन करता है। फिर भी, पेज स्पीड गैर-इष्टतम छवियों के बारे में शिकायत करती है। तो वे वास्तव में किस उपकरण का उपयोग करते हैं?

— user123444555621

@ Pumbaa80 आप advsys.net/ken/util/pngout.htm भी कोशिश कर सकते हैं (जो विशेष रूप से कहते हैं कि यह कभी-कभी ऑप्टिपंग और pngcrush दोनों की तुलना में छोटे आकार प्राप्त कर सकता है)।

— अंबर

मुझे अभी पता चला है कि पेज स्पीड वास्तव में ऑप्टिपंग का उपयोग करता है, एक कस्टम आवरण के साथ जो सबसे अच्छा विन्यास विकल्प निर्धारित करता है। @ कोई विकल्प नहीं है, मैं विंडोज का उपयोग नहीं कर रहा हूं;)

— user123444555621

Answer 4

यह संपीड़न दक्षता के लिए एनकोडर के सीपीयू समय की बात है। संपीड़न छोटे अभ्यावेदन के लिए एक खोज है, और यदि आप कठिन खोज करते हैं, तो आप छोटे लोगों को पाएंगे।

पूरी तरह से छवि प्रारूप क्षमताओं का उपयोग करने की बात भी है, उदाहरण के लिए PNG8 + के बजाय PNG24 + a, JPEG में अनुकूलित हफ़मैन टेबल आदि।

वेब के लिए छवियों को सहेजते समय फ़ोटोशॉप वास्तव में ऐसा करने की कोशिश नहीं करता है, इसलिए यह आश्चर्य की बात नहीं है कि कोई भी उपकरण इसे धड़कता है।

देख

• ImageOptim (दोषरहित) और
• ImageAlpha (हानिपूर्ण) छोटी PNG फ़ाइलों के लिए ( उच्च स्तरीय विवरण यह कैसे काम करता है ) और
• JPEGmini / MozJPEG ( हानिप्रद ) बेहतर JPEG कंप्रेसर के लिए।

Comments

एकमात्र प्रश्न जो ओ / पी वास्तव में पूछे जाने वाले वास्तविक प्रश्न का उत्तर देने का प्रयास करता है, अलग-अलग प्रश्न के बजाय "मैं अपनी छवियों को सबसे अधिक कैसे संपीड़ित कर सकता हूं"? lol

— toddmo

Answer 5

Windows में PageSpeed ​​के JPG संपीड़न परिणाम को दोहराने के लिए:

मैं jpegtran के विंडोज संस्करण का उपयोग करके पेजस्पीड के बिल्कुल समान परिणाम प्राप्त करने में सक्षम था, जिसे आप www.jpegclub.org/jpegtran पर प्राप्त कर सकते हैं । मैंने डॉस प्रॉम्प्ट का उपयोग करके निष्पादन योग्य चलाया (स्टार्ट> सीएमडी का उपयोग करें)। पेजस्पीड संपीड़न के रूप में बिल्कुल फ़ाइल आकार (बाइट के नीचे) प्राप्त करने के लिए, मैंने हफ़मैन ऑप्टिमाइज़ेशन निम्नानुसार निर्दिष्ट किया है:

jpegtran -optimize source_filename.jpg output_filename.jpg

कमांड प्रॉम्प्ट पर संपीड़न विकल्पों पर अधिक मदद के लिए, बस टाइप करें: jpegtran

या फायरबग में पेजस्पीड टैब से ऑटो-जेनरेट की गई इमेज का उपयोग करने के लिए:

मैं पेजस्पीड की अनुकूलित फाइलों तक पहुंचने के लिए Pumbaa80 की सलाह का पालन करने में सक्षम था। उम्मीद है कि यहाँ स्क्रीनशॉट फ़ायरफ़ॉक्स पर्यावरण के लिए और अधिक स्पष्टता प्रदान करता है। (लेकिन मैं क्रोम में इन अनुकूलित फ़ाइलों के स्थानीय संस्करण तक पहुँच प्राप्त करने में सक्षम नहीं था।)

और एडोब ब्रिज और रेगुलर एक्सप्रेशंस का उपयोग करके मैसी पेजस्पीड फाइलनाम को साफ करने के लिए:

हालाँकि FireFox में PageSpeed ​​मेरे लिए अनुकूलित छवि फ़ाइलों को बनाने में सक्षम था, लेकिन इसने उनके नाम भी बदल दिए जैसे कि सरल नाम:

nice_picture.jpg

में

nice_picture_fff5e6456e6338ee09457ead96ccb696.jpg

मुझे पता चला कि यह एक सामान्य शिकायत है। चूँकि मैं हाथ से अपने सभी चित्रों का नाम नहीं बदलना चाहता था, इसलिए मैंने एक नियमित अभिव्यक्ति के साथ-साथ एडोब ब्रिज का नाम बदलकर टूल का उपयोग किया। आप रेगुलर एक्सप्रेशंस को स्वीकार करने वाले अन्य रीनेम कमांड / टूल का उपयोग कर सकते हैं, लेकिन मुझे संदेह है कि एडोब ब्रिज पेजस्पेड मुद्दों के साथ काम करने वाले हम में से अधिकांश के लिए आसानी से उपलब्ध है!

1. एडोब ब्रिज शुरू करें
2. सभी फ़ाइलों का चयन करें (नियंत्रण ए का उपयोग करके)
3. उपकरण> बैच का नाम बदलें (या नियंत्रण शिफ्ट R) चुनें
4. प्रीसेट फ़ील्ड में "स्ट्रिंग सब्स्टीट्यूशन" चुनें। नए फ़ाइलनाम फ़ील्ड को अब "मूल फ़ाइल नाम" के बाद "स्ट्रिंग प्रतिस्थापन" प्रदर्शित करना चाहिए।
5. "रेगुलर एक्सप्रेशन का उपयोग करें" नामक चेकबॉक्स सक्षम करें

6. "ढूंढें" फ़ील्ड में, रेग्युलर एक्सप्रेशन दर्ज करें (जो सबसे निचले अंडरस्कोर विभाजक पर शुरू होने वाले सभी वर्णों का चयन करेगा):

   _ (?!। * _) (। *) \। जेपीजी $

7. "बदलें" फ़ील्ड में, दर्ज करें:

   .jpg

8. वैकल्पिक रूप से, प्रस्तावित बैच का नाम बदलने के परिणाम देखने के लिए पूर्वावलोकन बटन पर क्लिक करें, फिर बंद करें

9. नाम बदलें बटन पर क्लिक करें

ध्यान दें कि प्रसंस्करण के बाद, ब्रिज उन फ़ाइलों को रद्द कर देता है जो प्रभावित नहीं हुई थीं। यदि आप अपनी सभी .png फ़ाइलों को साफ़ करना चाहते हैं, तो आपको सभी छवियों को फिर से आकार देने और ऊपर दिए गए कॉन्फ़िगरेशन को संशोधित करने की आवश्यकता है ("jpg" के बजाय "png" के लिए)। आप ऊपर दिए गए कॉन्फ़िगरेशन को "क्लीन पेजस्पीड जेमिनी इमेजेज" जैसे प्रीसेट के रूप में भी सहेज सकते हैं ताकि आप भविष्य में फाइलनेम को जल्दी से साफ कर सकें।

कॉन्फ़िगरेशन स्क्रीनशॉट / समस्या निवारण

यदि आपको परेशानी है, तो संभव है कि कुछ ब्राउज़र RegEx अभिव्यक्ति को ठीक से ऊपर न दिखाए (मेरे भागने के पात्रों को दोष दें) कॉन्फ़िगरेशन के स्क्रीनशॉट के लिए (इन निर्देशों के साथ), देखें:

एडोब पुल के बैच का नाम बदलें उपकरण का उपयोग कैसे करें

Comments

इसे साझा करने के लिए धन्यवाद!

— रोजरेज़

यदि आप IIS का उपयोग करते हैं, तो PageSpeed ​​को हाल ही में Windows में पोर्ट किया गया था और ये स्वचालित रूप से इन्हीं ऑप्टिमाइज़ेशन को निष्पादित करता है। iispeed.com किसी भी नुकसान के बिना सबसे अच्छी कमी के लिए, मैं JPEGmin की पूरी निर्देशिका JPEGmini jpegmini.com

— जेम्स Moberg

लगता है कि अब फायरबग के लिए कोई पेजस्पीड एक्सटेंशन नहीं है।

— Stephan Schielke

Answer 6

मेरी राय में वहाँ सबसे अच्छा विकल्प जो प्रभावी रूप से एक बार में अधिकांश छवि प्रारूपों को संभालता है वह है ट्रिमेज । यह छवि प्रारूप के आधार पर ऑप्टिपंग, पींगक्रश, एडपंज और जेपोपोप्टिम का प्रभावी ढंग से उपयोग करता है और सही दोषरहित संपीड़न के पास बचाता है।

कमांड लाइन का उपयोग करते हुए कार्यान्वयन बहुत आसान है।

sudo apt-get install trimage    
trimage -d images/*

और आवाज! :-)
इसके अलावा आप इसे करने के लिए एक बहुत ही सरल इंटरफ़ेस स्वयं भी मिल जाएगा।

Comments

विंडोज के लिए कोई विकल्प?

— मैथियास लिकेगार्ड लोरेनजेन

Answer 7

एक बहुत ही आसान बैच स्क्रिप्ट है जो OptiPNG ( इस ब्लॉग से ) का उपयोग करके एक फ़ोल्डर के नीचे छवियों का पुनरावर्ती रूप से अनुकूलन करता है :

FOR /F "tokens=*" %G IN ('dir /s /b *.png') DO optipng -nc -nb -o7 -full %G

एक पंक्ति!

Comments

FOR /F "tokens=*" %G IN ('dir /s /b *.png') DO optipng -nc -nb -o7 -full "%G" यदि आपके पास अपने फ़ाइल नाम में स्थान है

— नेड मार्टिन

Answer 8

यदि आप बैच प्रोसेसिंग की तलाश कर रहे हैं, तो ध्यान रखें कि यदि आपके पास एक्ससर्वर लाभ नहीं है तो ट्रिमेज शिकायत करें। उस मामले में बस कुछ करने के लिए एक bash या php स्क्रिप्ट लिखें

<?php
    echo "Processing jpegs<br />";
    exec("find /home/example/public_html/images/ -type f -name '*.jpg' -exec jpegoptim --strip-all {} \;");
    echo "Processing pngs<br />";
    exec("find /home/example/public_html/images/ -type f -name '*.png' -exec optipng -o7 {} \;");
?>

अपनी आवश्यकताओं के अनुरूप विकल्प बदलें।

Answer 9

खिड़कियों के लिए आसान पहुंच के लिए कई ड्रैगनेनड्रॉप इंटरफेस हैं।

https://sourceforge.net/projects/nikkhokkho/files/FileOptimizer/

पीएनजी फाइलों के लिए मैंने अपने आनंद के लिए यह पाया, जाहिरा तौर पर इस जीआईयू में लिपटे 3 अलग-अलग उपकरण। बस खींचें और छोड़ें और यह आपके लिए करता है।

https://pnggauntlet.com/

हालांकि इसमें समय लगता है, 1MB png फ़ाइल को संपीड़ित करने का प्रयास करें - मैं चकित था कि CPU इस संपीड़न तुलना में कितना आगे बढ़ गया है जो कि यहां चल रहा है। लगता है कि छवि को 100 तरीके से संपीड़ित किया गया है और सर्वश्रेष्ठ जीतता है: डी

जेपीजी सम्पीडन के बारे में मैं रंग प्रोफाइल और सभी अतिरिक्त जानकारी की पट्टी के लिए अपने जोखिम को महसूस करता हूं - हालांकि - अगर हर कोई इसे कर रहा है - इसका व्यवसाय मानक तो मैंने इसे खुद किया: डी

मैं एक WP स्थापित करने पर 5500 फाइलों पर 113MB बचाया, तो यह निश्चित रूप से इसके लायक है!