Google पेजस्पीड: नई छवि संपीड़न नियमों को कैसे संतुष्ट करें?

14

हमारे पास अच्छे पेजेस वाले मूल्यों के साथ कई पृष्ठ हैं - यहां तक कि 100/100 वाले भी। हालांकि कुछ दिनों के बाद से, पेजस्पेड सभी साइटों (तकनीकी रूप से अलग, अलग सर्वर) पर दावा करता है कि हमारी छवियों को और अधिक अनुकूलित किया जा सकता है।

क्या किसी को पता है कि एल्गोरिथ्म द्वारा वास्तव में क्या बदला गया है? PS 100/100 (पहले) के साथ एक पर, हम jpegoptim का उपयोग करते हैं, इसलिए हम वास्तव में आगे अनुकूलन नहीं जानते हैं। छवियाँ हमारे आवेदन द्वारा अपलोड की जाती हैं और फिर अनुकूलित की जाती हैं।

किसी भी जानकारी की सराहना की जाएगी। कहीं PS के लिए चैंज होता है?

google google-pagespeed

— राफेल जैगर
स्रोत

क्या आप उस संदेश को डेस्कटॉप टेस्ट या मोबाइल टेस्ट में देखते हैं?

— गोयलोलो

दोनों गिर गए ...

— राफेल Jeger

1

यकीन नहीं होता कि यह एक बेहतर काम कर सकता है, लेकिन Google JPEG छवियों के अनुकूलन के लिए jpegtran का उपयोग करने की सिफारिश कर रहा है । यह भी प्रतीत होता है कि Google वेबपी नामक एक नए छवि प्रारूप को आगे बढ़ा रहा है जिसमें छोटे आकार हैं, लेकिन खराब ब्राउज़र समर्थन।

— स्टीफन Ostermiller

मैंने यह भी देखा है। मुझे पता है कि WebPageTest अपने आधारभूत के रूप में JPGs के लिए 85% गुणवत्ता का उपयोग करता है। जब तक मैं 80% गुणवत्ता से कम नहीं हो जाता, तब तक मैं Google के अनुशंसित आकार के करीब नहीं पहुँच सकता।

— असंतुष्टगीत

7

मैं पहले किसी भी समस्या के बिना पृष्ठों के लिए एक ही भद्दा परिणाम देखता हूं, निश्चित रूप से उत्तरदायी चित्रों के साथ ZURB फाउंडेशन जैसे उत्तरदायी फ्रेमवर्क का उपयोग कर रहा हूं।

पूर्व में मैंने उपयोग किया था:

find . -iname "*.jpg" -exec jpegoptim --strip-all -o -p {} \;

और शानदार परिणाम मिले।

जनवरी 2017 समाधान: 85% गुणवत्ता को करना चाहिए चाल:

find . -iname "*.jpg" -exec jpegoptim --strip-all -m85 -o -p {} \;

Google पृष्ठ गति पर वापस 100/100 पर।

यहाँ ZURB Foundation 6 के लिए मेरी gulp / npm तैनाती विधि का एक हिस्सा है

// Copy images to the "dist" folder
// In production, the images are compressed
function images() {
  return gulp.src('src/assets/img/**/*')
    .pipe($.if(PRODUCTION, imagemin(
      [
        imagemin.gifsicle({interlaced: true}),
        imageminJpegoptim({
          max: 85,
          progressive: true
        }),
        imagemin.optipng({optimizationLevel: 5}),
        imagemin.svgo({plugins: [{cleanupIDs: false, removeEmptyAttrs: false, removeViewBox: false}]})
      ],
      {
      },
      {
        verbose: true
      }
    )))
    .pipe(gulp.dest(PATHS.dist + '/assets/img'));
}

आपको npm मॉड्यूल gulp-imagemin imagemin-jpegoptim जोड़ना होगा

var imagemin = require('gulp-imagemin');
const imageminJpegoptim = require('imagemin-jpegoptim');

— एस रिगर
स्रोत

साइट पर आपका स्वागत है। बस स्पष्ट करने के लिए, क्या आप बता रहे हैं कि आपने छवियों को अनुकूलित करने के बारे में भी वही अधिसूचना का अनुभव किया है जबकि पहले आपने नहीं किया था? यदि ऐसा है, तो क्या आपने जो jpegoptim विकल्प जोड़े हैं , क्या वह मदद हल है?

— दान

हमने jpegtran और jpegoptim में अलग-अलग सेटिंग्स के साथ कोशिश की, Google स्टेट्स जैसी छोटी इमेज हासिल करने का कोई तरीका संभव नहीं है ... इसके अलावा, मुझे नहीं लगता कि इसका इमेज साइज (पिक्सल में) से कोई लेना-देना है क्योंकि पेजस्पेड स्पष्ट रूप से डायवर्सिफाई करता है संपीड़न और पिक्सेल-आकार के मुद्दे।

— राफेल जेगर 12

धन्यवाद - यह वास्तव में उपयोगी है। और भी आप png के लिए कुछ ऐसा ही कर सकते हैंfind . -iname "*.png" -exec optipng -clobber -preserve -strip all -o2 {} \;

— billynoah

2

आप इस संदेश को भी देख सकते हैं: " इस पृष्ठ के लिए अनुकूलित छवि, जावास्क्रिप्ट और सीएसएस संसाधन डाउनलोड करें। " कभी-कभी विभिन्न उपकरण Google को जितना चाहे उतना छोटा नहीं कर सकते।

— doublejosh
स्रोत

2

Google की नवीनतम अनुशंसा इमेजमैजिक कन्वर्ट का उपयोग करना है :

convert INPUT.jpg -sampling-factor 4:2:0 -strip [-resize WxH] [-quality N] [-interlace JPEG] [-colorspace Gray/sRGB] OUTPUT.jpg

विशिष्ट उदाहरण Puzzle.jpg के साथ

convert puzzle.jpg -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace sRGB puzzle_converted.jpg

अपने स्वयं के चित्रों पर उन्हीं तर्कों का उपयोग करके मुझे वही परिणाम मिला जो डाउनलोड की गई अनुकूलित JPG फ़ाइल के रूप में है।

— केली
स्रोत

1

ध्यान दें कि यदि आप विंडोज का उपयोग कर रहे हैं, magickतो कोशिश करें कि convertआपके लिए काम न करें। magick puzzle.jpg -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace sRGB puzzle_converted.jpg। imagemagick.org/discourse-server/viewtopic.php?t=19679

— user2875289