গুগলের পৃষ্ঠা গতিটি ক্ষতবিহীন চিত্রের সংক্ষেপণ কীভাবে কাজ করে?


138

আপনি যখন কোনও ওয়েবসাইটে ফায়ারব্যাগ / ফায়ারফক্সের জন্য গুগলের পেজস্পিড প্লাগইনটি চালান তখন এটি এমন কোনও ক্ষেত্রে পরামর্শ দেবে যেখানে কোনও চিত্র নিরবচ্ছিন্নভাবে সংকুচিত হতে পারে এবং এই ছোট চিত্রটি ডাউনলোড করার জন্য একটি লিঙ্ক সরবরাহ করবে।

উদাহরণ স্বরূপ:

এটি জেপিজি এবং পিএনজি ফাইল টাইপ উভয় ক্ষেত্রেই প্রযোজ্য (আমি জিআইএফ বা অন্যদের পরীক্ষা করিনি))

ফ্লিকার থাম্বনেইলগুলিও লক্ষ্য করুন (এই সমস্ত চিত্র 75x75 পিক্সেলের)) এগুলি কিছু দুর্দান্ত সঞ্চয়'re যদি এটি সত্যিই দুর্দান্ত হয় তবে ইয়াহু কেন তাদের পুরো লাইব্রেরিতে এই সার্ভার-সাইডটি প্রয়োগ করছে না এবং তাদের সঞ্চয়স্থান এবং ব্যান্ডউইথ লোডগুলি হ্রাস করছে না?

এমনকি স্ট্যাকওভারফ্লো ডটকমের অর্থ খুব সামান্য সঞ্চয় রয়েছে:

আমি পেজস্পিডে ফটোশপের 'ওয়েব সেভ ফর' বৈশিষ্ট্যটি ব্যবহার করে তৈরি করা পিএনজি ফাইলগুলিতে বেশ সচ্ছল সঞ্চয় প্রস্তাব দিতে দেখেছি।

সুতরাং আমার প্রশ্নটি হ'ল এগুলি এতগুলি হ্রাস করার জন্য তারা চিত্রগুলিতে কী পরিবর্তন আনছে? আমি অনুমান করছি যে বিভিন্ন ফাইল টাইপের জন্য বিভিন্ন উত্তর রয়েছে। এটি কি জেপিজিগুলির পক্ষে আসলেই ক্ষতিহীন? এবং কীভাবে তারা ফটোশপকে মারতে পারে? আমি কি এই সম্পর্কে একটু সন্দেহজনক হওয়া উচিত?


দেখে মনে হচ্ছে পেজস্পিড এখন ক্ষতিকারক সংকোচনের দাবি করছে। ফলাফলগুলি বলার আগে: "xxx.jpg বিহীনভাবে সংকুচিত করা xx কেবি (xx% হ্রাস) সংরক্ষণ করতে পারে"। এখন এটি বলেছে "xxx.jpg কে সংকুচিত করা xx কেবি (xx% হ্রাস) বাঁচাতে পারে" গুরুত্বপূর্ণভাবে, গুগল কেবলমাত্র ছোট চিত্রগুলি ক্ষতিকারকভাবে সংক্ষিপ্ত করতে অনুরোধ করেছে বলে মনে হচ্ছে (থাম্বনেইলস ইত্যাদি)। গুগল কী ক্ষতিকারক সংকোচনের সরঞ্জাম এবং প্যারামিটার ব্যবহার করছে তা কি কেউ বুঝতে পারে?
মার্টিন

উত্তর:


83

আপনি যদি প্রযুক্তিগত বিবরণে সত্যিই আগ্রহী হন তবে উত্স কোডটি দেখুন:


পিএনজি ফাইলগুলির জন্য, তারা কিছু ট্রায়াল-এবং-ত্রুটির পদ্ধতির সাথে 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)
};

যখন চারটি সংমিশ্রণ প্রয়োগ করা হয় তখন সবচেয়ে ছোট ফলাফল রাখা হয়। যে হিসাবে সহজ।

(এনবি: optipngআপনি যদি সরবরাহ করেন তবে কমান্ড লাইন সরঞ্জামটিও তা -o 2করে -o 7)


জেপিইজি ফাইলগুলির জন্য, তারা নিম্নলিখিত বিকল্পগুলির সাথে জেপিগ্লিব ব্যবহার করে :

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

একইভাবে, ডাব্লুইইবিপি এই বিকল্পগুলির সাথে লাইবওয়েপ ব্যবহার করে সংক্ষেপিত :

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

এখানে ইমেজ_কনভার্টার.সিও রয়েছে যা ক্ষতিকারকভাবে সবচেয়ে ছোট বিন্যাসে রূপান্তর করতে ব্যবহৃত হয়।


3
জেপিইজিগুলির জন্য বিশেষত ধরে রাখা_রঙা_র প্রোফাইল (মিথ্যা) একটি খারাপ ধারণা হতে পারে। প্রসারিত রঙের গামুট প্রদর্শনগুলি আরও সাধারণ হয়ে উঠলে স্পষ্টভাবে সংজ্ঞায়িত বর্ণের বর্ণন নির্দেশাবলী একটি দ্ব্যর্থক হয়ে যায়। যদি মূল চিত্রটি এসআরজিবি এনকোড করা থাকে তবে এটি এখনও কিছু ব্রাউজারে (সাফারি, ফায়ারফক্স সম্পর্কে: কনফিগার সংশোধন) কাজ করতে পারে অন্যদিকে কেবলমাত্র ট্যাগযুক্ত চিত্রগুলি রঙ পরিচালিত (ডিফল্ট ফায়ারফক্স) হতে পারে। অবশ্যই কোনও রঙ পরিচালনার ক্ষমতা ছাড়াই ব্রাউজারগুলি পরোয়া করবে না ...
সিও

2
আমি চলমান করছি optipng file.png -o7এবং আমি হচ্ছিনা যে কোন জায়গায় যে Google শো কাছাকাছি। সম্ভব হলে তারা এসভিজিতে রূপান্তর করে?
নাটোয়ামি

@ নাটোয়ামি আমার একই সমস্যা ছিল ... কিছু পিএনজির জন্য গুগল অপটিপং -o7 এর চেয়ে ভাল করে। এগুলির জন্য আপনি পেজস্পিড ওয়েবসাইট থেকেই অপ্টিমাইজড চিত্রগুলি ডাউনলোড করতে পারেন।
chrisvdb

46

আমি jpegoptimজেপিজি ফাইলগুলি অনুকূল করতে এবং optipngপিএনজি ফাইলগুলি অনুকূল করতে ব্যবহার করি optim

আপনি যদি চালু থাকেন bashতবে কোনও ডিরেক্টরিতে (পুনরাবৃত্তভাবে) সমস্ত জেপিজিকে ক্ষতিহীনভাবে অনুকূল করতে আদেশটি হ'ল:

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 {} \;

ডিরেক্টরিতে সমস্ত পিএনজি অপ্টিমাইজ করতে:

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

-o2হয় ডিফল্ট অপ্টিমাইজেশান স্তর, আপনার কাছ থেকে এই পরিবর্তন করতে পারেন o2থেকেo7 । লক্ষ্য করুন যে উচ্চতর অপ্টিমাইজেশন স্তরটির অর্থ দীর্ঘ প্রক্রিয়াজাতকরণের সময়।


29

কটাক্ষপাত http://code.google.com/speed/page-speed/docs/payload.html#CompressImages যা কৌশল / সরঞ্জামের কিছু বর্ণনা করা হয়েছে।


1
লিঙ্কের জন্য ধন্যবাদ। আমি অনুমান করি যে ফাইলাইজ হ'ল যদি আপনার প্রাথমিক উদ্বেগ থাকে তবে চিত্র ফাইলগুলিতে কী ধরণের অপ্রয়োজনীয় ঘটনা রয়েছে তা সম্পর্কে আরও জানতে আমি সন্ধান করছি looking আমি জানি যে তথ্যটি ওয়েবে রয়েছে, আমি এটির জন্য এখানে খুব সহজেই জমায়েত করতে চাই।
ড্রয় নোকস

আমি একটি কাস্টম বিল্ড টুল ব্যবহার করি যা অপটিপং এবং পিএনজিক্রাশ উভয়ই চিত্রগুলিকে সংকুচিত করে, তারপরে ছোট ফাইলটি নির্বাচন করে। তবুও, পৃষ্ঠা গতি নন-অনুকূল চিত্র সম্পর্কে অভিযোগ করে। তাহলে তারা আসলে কোন সরঞ্জামটি ব্যবহার করে?
ব্যবহারকারী 123444555621

@ Pumbaa80 এছাড়াও আপনি চেষ্টা করতে পারে advsys.net/ken/util/pngout.htm (যা বিশেষভাবে বলছেন যে কখনও কখনও উভয় optipng এবং pngcrush চেয়ে ছোট আকারের পেতে পারেন)।
আম্বার

আমি কেবলমাত্র খুঁজে পেয়েছি যে পৃষ্ঠা গতি প্রকৃতপক্ষে সর্বোত্তম কনফিগার বিকল্পগুলি নির্ধারণ করে এমন একটি কাস্টম মোড়কের সাহায্যে optipng ব্যবহার করে । @ অ্যাম্বার কোনও বিকল্প নয়, আমি উইন্ডোজ ব্যবহার করছি না;)
ব্যবহারকারী 123444555621

15

সংক্ষেপণের দক্ষতার জন্য এটি এনকোডার সিপিইউ ট্রেড করার বিষয়। সংক্ষিপ্তকরণ হ'ল সংক্ষিপ্ত উপস্থাপনের জন্য অনুসন্ধান এবং আপনি যদি আরও বেশি অনুসন্ধান করেন তবে আপনি সংক্ষিপ্তগুলি খুঁজে পাবেন।

চিত্রের বিন্যাসের ক্ষমতা সম্পূর্ণরূপে ব্যবহার করার বিষয়টিও রয়েছে, যেমন পিএনজি 24 + এ এর ​​পরিবর্তে পিএনজি 8 + এ, জেপিজিতে অপ্টিমাইজড হাফম্যান টেবিল ইত্যাদি using

ওয়েবশপের জন্য চিত্রগুলি সংরক্ষণ করার সময় ফটোশপটি এটি করার জন্য সত্যিই খুব চেষ্টা করে না, সুতরাং কোনও সরঞ্জামই এটি মারবে তা অবাক হওয়ার মতো কিছু নয়।

দেখা


ও / পি আসলে জিজ্ঞাসা করা প্রকৃত প্রশ্নের উত্তর দেওয়ার চেষ্টা করার একমাত্র উত্তর, "আমি কীভাবে আমার চিত্রগুলি সর্বাধিক সংকুচিত করতে পারি"? lol
toddmo

13

উইন্ডোজে পেজস্পিডের জেপিজি সংক্ষেপণের ফলাফলগুলি প্রতিলিপি করতে:

আপনি www.jpegclub.org/jpegtran এ পেতে পারেন jpegtran এর উইন্ডোজ সংস্করণ ব্যবহার করে পেজস্পিডের মতো ঠিক একই সংকোচনের ফলাফল পেতে সক্ষম হয়েছি । আমি ডস প্রম্পট ব্যবহার করে এক্সিকিউটেবল দৌড়েছি (স্টার্ট> সিএমডি ব্যবহার করুন)। পেজস্পিড সংক্ষেপণের মতো ঠিক একই ফাইলের আকার (বাইটের নিচে) পেতে, আমি নিম্নরূপে হাফম্যান অপটিমাইজেশন নির্দিষ্ট করেছি:

jpegtran -optimize source_filename.jpg output_filename.jpg

কমপশন অপশন সম্পর্কে আরও সহায়তার জন্য কমান্ড প্রম্পটে, টাইপ করুন: jpegtran

অথবা ফায়ারব্যাগের পেজস্পিড ট্যাব থেকে স্বয়ংক্রিয়ভাবে তৈরি চিত্রগুলি ব্যবহার করতে:

পেজস্পিডের অনুকূলিত ফাইলগুলিতে অ্যাক্সেস পাওয়ার জন্য আমি পুমবা 80 এর পরামর্শ অনুসরণ করতে সক্ষম হয়েছি। আশা রাখি, স্ক্রীনশট এখানে ফায়ারফক্স পরিবেশের জন্য আরও স্বচ্ছতা প্রদান করে। (তবে আমি ক্রোমে এই অনুকূলিত ফাইলগুলির স্থানীয় সংস্করণে অ্যাক্সেস পেতে সক্ষম হইনি))

এবং অ্যাডোব ব্রিজ এবং নিয়মিত এক্সপ্রেশন ব্যবহার করে অগোছালো পৃষ্ঠাস্পষ্ট ফাইলের নামগুলি পরিষ্কার করতে:

যদিও ফায়ারফক্সে থাকা পেজস্পিডটি আমার জন্য অনুকূলিত চিত্র ফাইলগুলি তৈরি করতে সক্ষম হয়েছিল, এটি তাদের নামগুলিও সরল নামগুলিতে পরিবর্তন করেছে যেমন:

nice_picture.jpg

মধ্যে

nice_picture_fff5e6456e6338ee09457ead96ccb696.jpg

আমি আবিষ্কার করেছি যে এটি একটি সাধারণ অভিযোগ বলে মনে হচ্ছে। যেহেতু আমি আমার সমস্ত ছবি নিজের হাতে নাম রাখতে চাইনি, তাই আমি নিয়মিত এক্সপ্রেশন সহ অ্যাডোব ব্রিজের পুনরায় নামকরণ সরঞ্জামটি ব্যবহার করেছি। আপনি নিয়মিত এক্সপ্রেশন গ্রহণ করে এমন অন্য পুনর্নবীকরণ আদেশ / সরঞ্জামগুলি ব্যবহার করতে পারেন তবে আমার সন্দেহ যে অ্যাডোব ব্রিজ আমাদের বেশিরভাগের জন্য পেজস্পিড ইস্যু নিয়ে কাজ করার জন্য সহজলভ্য!

  1. অ্যাডোব ব্রিজ শুরু করুন
  2. সমস্ত ফাইল নির্বাচন করুন (নিয়ন্ত্রণ এ ব্যবহার করে)
  3. সরঞ্জামগুলি> ব্যাচের পুনর্নামকরণ (বা নিয়ন্ত্রণ শিফট আর) নির্বাচন করুন
  4. প্রিসেট ক্ষেত্রে "স্ট্রিং সাবস্টিটিউশন" নির্বাচন করুন। নতুন ফাইলের নাম ক্ষেত্রগুলিতে এখন "স্ট্রিং সাবস্টিটিউশন" প্রদর্শন করা উচিত, তারপরে "আসল ফাইলের নাম"
  5. "নিয়মিত এক্সপ্রেশন ব্যবহার করুন" নামক চেকবক্সটি সক্ষম করুন
  6. "সন্ধান করুন" ক্ষেত্রে, নিয়মিত অভিব্যক্তি প্রবেশ করুন (যা ডানদিকের নীচে আন্ডারস্কোর বিভাজক থেকে শুরু করে সমস্ত অক্ষর নির্বাচন করবে):

    : _ (?!। *: _) (। *) \। JPG $

  7. "প্রতিস্থাপন করুন" ক্ষেত্রে, প্রবেশ করুন:

    .jpg

  8. Allyচ্ছিকভাবে, প্রস্তাবিত ব্যাচের নাম পরিবর্তনের ফলাফল দেখতে প্রাকদর্শন বোতামটি ক্লিক করুন, তারপরে বন্ধ করুন

  9. পুনঃনামকরণ বোতামটি ক্লিক করুন

নোট করুন যে প্রক্রিয়াজাতকরণের পরে, ব্রিজ প্রভাবিত হয়নি এমন ফাইলগুলি নির্বাচন থেকে নির্বাচন বাতিল করে। আপনি যদি আপনার সমস্ত .png ফাইল পরিষ্কার করতে চান তবে আপনার সমস্ত চিত্র পুনরায় সন্ধান করতে হবে এবং উপরের কনফিগারেশনটি পরিবর্তন করতে হবে ("পিএনজি" "jpg" এর পরিবর্তে)। আপনি উপরের কনফিগারেশনটিকে প্রিসেট হিসাবে সংরক্ষণ করতে পারেন যেমন "ক্লিন পেজস্পিপি jpg চিত্রগুলি" যাতে আপনি ভবিষ্যতে ফাইলের নামগুলি দ্রুত পরিষ্কার করতে পারেন।

কনফিগারেশন স্ক্রীনশট / সমস্যা সমাধান

আপনার যদি সমস্যা হয় তবে এটি সম্ভব যে কিছু ব্রাউজারগুলি উপরের রেগেক্স এক্সপ্রেশনটি সঠিকভাবে না দেখায় (আমার পালানোর অক্ষরগুলিকে দোষ দেয়) সুতরাং কনফিগারেশনের স্ক্রিনশটের জন্য (এই নির্দেশাবলীর সাথে) দেখুন:

অ্যাডোব ব্রিজের ব্যাচের পুনঃনামকরণ সরঞ্জামটি কীভাবে অশ্লীল ফাইলের নামগুলিযুক্ত অপ্টিমাইজড পেজস্পাইড চিত্রগুলি সাফ করতে ব্যবহার করবেন?


এটি ভাগ করে নেওয়ার জন্য ধন্যবাদ!
রোটাআর্কেজ

1
আপনি যদি আইআইএস ব্যবহার করেন, পেজস্পিডটি সম্প্রতি উইন্ডোজে পোর্ট করা হয়েছিল এবং স্বয়ংক্রিয়ভাবে এই একই অপটিমাইজেশনগুলি সম্পাদন করে। iispeed.com সর্বোত্তম হ্রাসের জন্য যদিও কোনও ক্ষতি ছাড়াই, আমি জেপিজিইএন jpegmini.com
জেমস মোবার্গ

মনে হচ্ছে ফায়ারব্যাগের জন্য আর কোনও পেজস্পিড এক্সটেনশন নেই।
স্টিফান শ্যায়েলকে

10

আমার মতে সেখানে সেরা বিকল্প যা কার্যকরভাবে বেশিরভাগ চিত্রের ফর্ম্যাটগুলি পরিচালনা করে তা হ'ল ট্রিজেজ । এটি কার্যকরভাবে optipng, pngcrush, advpng এবং jpegoptim ব্যবহার করে ইমেজ ফর্ম্যাটের উপর ভিত্তি করে করে এবং নিখুঁত ক্ষতিহীন সংকোচনের নিকটে সরবরাহ করে।

কমান্ড লাইন ব্যবহার করে বাস্তবায়ন করা বেশ সহজ।

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

ও ভয়েলা! :-)
অতিরিক্তভাবে আপনি নিজে নিজে এটি করার জন্য একটি খুব সহজ ইন্টারফেস পাবেন।


2
উইন্ডোজের কোনও বিকল্প?
ম্যাথিয়াস লাইককেগার্ড লরেঞ্জেন

2

খুব সহজ ব্যাচের স্ক্রিপ্ট রয়েছে যা অপটিপিএনজি ( এই ব্লগ থেকে ) ব্যবহার করে ফোল্ডারের নীচে চিত্রগুলি পুনরাবৃত্তভাবে অনুকূল করে :

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

এক লাইন!


1
FOR /F "tokens=*" %G IN ('dir /s /b *.png') DO optipng -nc -nb -o7 -full "%G" যদি আপনার ফাইলের নামের জায়গাগুলি থাকে
নেড মার্টিন

0

আপনি যদি ব্যাচ প্রসেসিংয়ের সন্ধান করছেন, আপনার যদি জেসেরওয়ার সুবিধা না পেয়ে ট্রাইমেজ অভিযোগ মনে রাখবেন। সেক্ষেত্রে এমন কিছু করার জন্য কেবল একটি বাশ বা পিএইচপি স্ক্রিপ্ট লিখুন

<?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 {} \;");
?>

আপনার প্রয়োজন অনুসারে বিকল্পগুলি পরিবর্তন করুন।


0

উইন্ডোজের জন্য সহজেই অ্যাক্সেসের জন্য বেশ কয়েকটি ড্রাগ'ড্রপ ইন্টারফেস রয়েছে।

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

পিএনজি ফাইলগুলির জন্য আমি এটি আমার উপভোগের জন্য খুঁজে পেয়েছি, দৃশ্যত এই জিআইইউতে মোড়ানো 3 টি আলাদা সরঞ্জাম রয়েছে। শুধু টেনে আনুন এবং এটি আপনার জন্য এটি করে।

https://pnggauntlet.com/

যদিও এটি সময় নেয়, একটি 1 এমবি পিএনজি ফাইল সংকুচিত করার চেষ্টা করুন - আমি অবাক হয়ে গিয়েছিলাম যে সিপিইউ এই সংকোচনের তুলনায় কতটা wentুকে গেছে যা এখানে চলছে। দেখে মনে হচ্ছে যে চিত্রটি 100 টি উপায়কে সংকুচিত করা হয়েছে এবং সেরাটি জিতেছে: ডি

জেপিজি সংকোচনের বিষয়ে আমি রঙিন প্রোফাইলগুলি এবং সমস্ত অতিরিক্ত তথ্যের স্ট্রিপগুলি ঝুঁকিপূর্ণ মনে করতে পারি - তবে - যদি সবাই এটি করে থাকে - এটির ব্যবসার মান তাই আমি নিজেই এটি করেছি: ডি

আমি আজ একটি ডাব্লুপি ইনস্টল করে 5500 ফাইলগুলিতে 113MB সংরক্ষণ করেছি, সুতরাং এটির পক্ষে এটি অবশ্যই কার্যকর!

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.