২০১৯-এর গ্রীষ্মকালীন ছবি অপ্টিমাইজেশন সমীক্ষা থেকে পাওয়া মতামত

বিভিন্ন ছবি অপ্টিমাইজেশন কৌশল সম্পর্কে সমীক্ষায় উত্তরদাতাদের মন্তব্য

Sam Dutton

এই পোস্টে সেইসব ফ্রিফর্ম মতামত তালিকাভুক্ত করা হয়েছে যা Google Web DevRel ২০১৯-এর গ্রীষ্মকালে ইমেজ অপ্টিমাইজেশন টেকনিক সার্ভেতে পেয়েছে। ওয়েবের মূল নীতি এবং @ChromiumDev-এর মাধ্যমে উত্তর চাওয়া হয়েছিল। এই সমীক্ষা করার উদ্দেশ্য ছিল, বেশিরভাগ সাইট কেন ইমেজ অপ্টিমাইজেশনের পেশাদার পদ্ধতি অনুসরণ করে না তা খুঁজে বের করা, যদিও এটি পারফর্ম্যান্স উন্নত করার তুলনামূলক সহজ উপায় বলে মনে হয়। সমীক্ষার পদ্ধতিতে ত্রুটি থাকার কারণে উত্তরের ডেটা এখানে তালিকাভুক্ত করা হয়নি।

দর্শক

• আপনি ওয়েব ডেভেলপার হলে, নতুন ইমেজ অপ্টিমাইজেশন টেকনিক খুঁজে পেতে অথবা অন্য ওয়েব ডেভেলপাররা কীভাবে আপনার সমস্যার সমাধান করেছেন তা জানতে, এই পোস্ট আপনার কাজে লাগতে পারে। এর পাশাপাশি, প্রতিটি টেকনিকের খরচ, সুবিধা ও সীমাবদ্ধতা সম্পর্কেও জানতে পারবেন।
• আপনি যদি কোনও ইমেজ পরিষেবা বা ইমেজ CDN প্রদানকারী হন, তাহলে এই পোস্টটি আপনাকে নতুন বাজারের সুযোগ খুঁজে পেতে সাহায্য করতে পারে।
• আপনি ফ্রেমওয়ার্ক, বিল্ড টুল বা CMS ডেভেলপার হলে, এই পোস্ট থেকে নতুন ফিচার প্রয়োগ করার ব্যাপারে আইডিয়া পেতে পারেন।

কমেন্ট

WebP

মনে রাখবেন: এটি কেন গুরুত্বপূর্ণ? WebP-এর মতো ছবির ফর্ম্যাট ব্যবহার করলে, JPEG ও PNG-এর মতো পুরনো ফর্ম্যাটের তুলনায় ফাইলের সাইজ ছোট হয় এবং কোয়ালিটি আরও ভালো হয়। পুরনো ব্রাউজারের জন্য ফলব্যাক সহ আধুনিক ফর্ম্যাট ব্যবহার করার জন্য বেশ কিছু কৌশল আছে।

• "আমি WebP পছন্দ করি, তবে এটি এখনও পুরোপুরি প্রস্তুত নয়। এছাড়াও, আমাদের WordPress-এ WebP কাজ করে না। সবচেয়ে জনপ্রিয় ফটো এডিটিং অ্যাপগুলির মধ্যে অন্যতম, Photoshop-এও WebP সরাসরি কাজ করে না। তাই ছবি কম্প্রেস করার জন্য আমরা থার্ড-পার্টি অ্যাপ বা পরিষেবার উপর নির্ভর করতে পারি না।"
• "Safari-তে WebP ব্যবহারযোগ্য করে তুলুন।"
• "আমি WebP ব্যবহার করতে পারলে খুব খুশি হতাম, যদি আমি Photoshop/Figma/Sketch থেকে সেগুলি এক্সপোর্ট করতে পারতাম এবং সব ব্রাউজার এটি সাপোর্ট করত।" [মনে রাখবেন: Sketch-এ WebP কাজ করে]
• "নেক্সট জেনারেশন ফর্ম্যাটিং সলিউশন থাকলে ভালো হয়।"
• "ব্রাউজার সাপোর্ট খারাপ হলে WebP-এর উপর এত বেশি জোর দেওয়া বন্ধ করুন এবং স্ক্রিনশটের জন্য JPEG-এর পরিবর্তে PNG-এর প্রয়োজনীয়তা বিবেচনা করুন।"
• "Google Docs-এ WebP কাজ করে না।"
• "আমরা শুধু WebP ব্যবহার করতে চাই, তবে ব্রাউজারের সাথে মানানসই হবে কিনা তা নিয়ে চিন্তিত।"
• "প্রথমে ব্রাউজার কম্প্যাটিবিলিটি ঠিক করুন এবং লিগ্যাসি ব্রাউজার আপডেট করুন বা লিগ্যাসি ফিক্স যোগ করুন, তারপর লোকজন WebP-এর মতো নতুন ধরনের ছবি গ্রহণ করতে আরও বেশি আগ্রহী হবেন…"
• "প্লাগ-ইন/থিম ডেভেলপারদের WebP এবং অন্যান্য নেক্সট-জেন ছবির ধরনকে সাপোর্ট করার জন্য উৎসাহিত করুন, যাতে নন-ডেভেলপারদের এটি নিয়ে মাথা ঘামাতে না হয়।"

SVG ও ভেক্টর ইমেজ

• "সম্ভব হলে আমি (অ্যানিমেটেড) SVG ব্যবহার করছি। gatsby-image এর অনেক সমস্যার সমাধান করেছে। কিন্তু তারা যা করেছে তা খুঁটিয়ে দেখলে বোঝা যায় যে, ছবি যাতে ঠিকমতো কাজ করে তার জন্য কোনও সাধারণ ওয়েবসাইটকে এই ধরনের কিছু তৈরি করতে হবে, এটি সম্পূর্ণ অবাস্তব। ব্রাউজারকে এই দায়িত্ব আরও বেশি করে নিতে হবে।"
• "lottie.js-এর সাহায্যে কীভাবে SVG অ্যানিমেশন তৈরি করতে হয় তা কি ডকুমেন্ট করা সম্ভব?"
• "আমরা বেশিরভাগ সময় আমাদের ওয়েবসাইটে লোডিং টাইম এড়াতে কম সাইজের বড় রেজোলিউশনের JPEG ছবি ব্যবহার করার চেষ্টা করি। এছাড়াও, রেসপন্সিভ ডিজাইনের জন্য কোয়ালিটি প্রদান করতে প্রয়োজন হলে আমরা SVG ব্যবহার করি।"
• "আমরা সবকিছুর জন্য অপ্টিমাইজ করা ভেক্টর গ্রাফিক্স ব্যবহার করার চেষ্টা করি, তবে সম্ভব হলে ছবি ব্যবহার করি।"

অন্যান্য ছবির ফর্ম্যাট

• "GIF ব্যবহার বন্ধ করার জন্য আমাদের লোকজনকে আরও ভালোভাবে [বোঝাতে হবে]।"

ধীরে ধীরে লোড করা

মনে রাখবেন: এটি কেন গুরুত্বপূর্ণ? পৃষ্ঠা লোড হওয়ার সাথে সাথে সব ছবি পাওয়ার পরিবর্তে ঠিক সময়ে ছবির ফাইলের জন্য অনুরোধ করা হলে, পারফর্ম্যান্স উন্নত হতে পারে এবং ডেটার খরচ কমতে পারে।

• "ধীরে ধীরে লোড করার মতো ফিচার বিবেচনা করার সময় ব্যবহারকারীর কথা মাথায় রাখবেন, কারণ অনেকের কাছে এটি বিরক্তিকর।"
• "ব্যাকগ্রাউন্ড-ইমেজের সাথে ধীরে ধীরে লোড করার অ্যাট্রিবিউট কাজ করার ব্যবস্থা করো।"
• "ফ্রেমওয়ার্কের উচিত আরও ভাল অ্যাসেট প্রসেসিং করা।"
• "আমরা অনেক আগেই ধীরে ধীরে লোড করার পদ্ধতি থেকে সরে এসেছি। লক্ষ লক্ষ ছবি ও সাইট "লোড হচ্ছে না" বলে ব্যবহারকারীরা অভিযোগ করেছেন। আমাদের টিম এটি সারসংক্ষেপ হিসেবে বুঝতে পেরেছে। নন-টেকনিক্যাল ব্যবহারকারীদের পক্ষে সমস্যা বর্ণনা করা কঠিন।"
• "আমি ধীরে ধীরে লোড করার জন্য প্রথাগত টেকনিক ব্যবহার করার পরিবর্তে ইন্টারসেকশন অবজারভার API ব্যবহার করার ব্যাপারে আরও ভালভাবে বুঝতে আগ্রহী।"
• "এটি আমার জন্য ভাল কাজ করে: pwafire.org/developer/codelabs/progressive-loading."

ব্যাকগ্রাউন্ডের ছবি

• "আমি সাধারণত CSS-এ ব্যাকগ্রাউন্ড হিসেবে ছবি লোড করি।"
• "<img> ট্যাগটি সমস্যাজনক এবং এর মাধ্যমে সূক্ষ্ম বিবরণ নিয়ন্ত্রণ করা কঠিন, বিশেষ করে ব্যবহারকারীর জমা দেওয়া কন্টেন্টের ক্ষেত্রে। আমরা <div> এবং ব্যাকগ্রাউন্ড-ইমেজ স্টাইলিং অনেক বেশি ব্যবহার করি কারণ এটি আমাদের ব্যাকগ্রাউন্ড-সাইজ, ব্যাকগ্রাউন্ড-পজিশন ব্যবহার করতে এবং ছবির ডানদিকের বোতামে ক্লিক করে সেভ করা প্রতিরোধ করতে দেয়।"

স্বচ্ছতা

• "এখন ২০১৯ সাল। JPG-তে এখনও আলফা ট্রান্সপারেন্সি নেই কেন?"
• "আমি শুধুমাত্র তখনই ফটোগ্রাফের জন্য PNG ব্যবহার করি যখন আমার একটি স্বচ্ছ ব্যাকগ্রাউন্ডের প্রয়োজন হয়।"

খারাপ কোয়ালিটির ছবি প্লেসহোল্ডার (LQIP)

• "আমরা LQIPS ব্যবহার করি এবং খুব তাড়াতাড়ি খুব ভাল কোয়ালিটির ছবি লোড না করেই ভিজিটরদের এনগেজ রাখার জন্য এটি একটি দুর্দান্ত কৌশল।"

পারফর্ম্যান্স

• "আসলে, সম্প্রতি ছবির পারফর্ম্যান্স সংক্রান্ত সমস্যা হয়েছিল। ব্যবহারকারী আমাদের সাইটে স্ক্রল করে নিচে নামলে, আমরা পরবর্তী ৬০টি কার্ড দেখাই যার মধ্যে থাম্বনেল অন্তর্ভুক্ত থাকে। একই ডোমেনে ৬টি কানেকশনের সীমা থাকার কারণে, থাম্বনেল ব্লক করা হচ্ছিল এবং ব্যবহারকারী স্ক্রল ডাউন করা চালিয়ে গেলে পরবর্তী ৬০টি কার্ড পাওয়ার জন্য পরবর্তী AJAX অনুরোধও ব্লক করা হচ্ছিল।"
• "আমরা HTTP/2 ব্যবহার করতে চাই, কিন্তু আমাদের বেশিরভাগ গ্রাহক IE11 ব্যবহার করেন! তাই আমরা ডোমেন শার্ডিং / অন্য ডোমেন থেকে AJAX JSON ডেটার অনুরোধ লোড করার বিষয়টি এক্সপ্লোর করছি।"

ঘড়ি সারানো

মনে রাখবেন: এটি কেন গুরুত্বপূর্ণ? srcset অ্যাট্রিবিউট বিকল্প ছবির সোর্স প্রদান করে। আপনি প্রস্থ বা পিক্সেল ঘনত্ব নির্দিষ্ট করেন যাতে ব্রাউজারটি ডাইমেনশন গণনা করার জন্য ছবি ডাউনলোড না করেই সবচেয়ে ছোট ছবি বেছে নিতে পারে।

• "Sorry for intrinsicsize; leveraging height/width seems better to me."
• "কম সাইজ জেনারেট করার উপায় খুঁজছি, বর্তমানে এটি ~১২।"
• "ছবির ডাইনামিক রিসাইজিং করা সত্যিই কঠিন এবং JS ছাড়া অসম্ভব।"
• "responsivebreakpoints.com-এর মতো টুল web.dev-এর জন্য ভালো :)."

খুব ভালো কোয়ালিটি ও হাই রেজোলিউশনের ছবি

• "DPI কোয়ালিটি না কমিয়ে কীভাবে কম্প্রেস করা ছবি ডাউনলোড করব?"
• "আমরা একটি ডকুমেন্ট ম্যানেজমেন্ট কোম্পানি। আমাদের অ্যাপ লক্ষ লক্ষ হাই-রেজোলিউশনের স্ক্যান করা ছবি ম্যানেজ করে, সাধারণত TIFF বা PDF।"
• "এটা একটা ঝামেলা। প্রিন্ট ফর্ম্যাটের জন্য হাই-রেজোলিউশন ইমেজ ফাইল প্রয়োজন; ওয়েবের জন্য অপ্টিমাইজ করা হতে হবে। ওয়েবের জন্য ছবির সাইজ কমানো ঝামেলার কাজ, কিন্তু প্রিন্ট পাবলিকেশনের জন্য লেখক যদি শুধু ছোট সাইজের ফাইল দেন, তাহলে তা বড় সমস্যা। আর্টওয়ার্ক সহ পাণ্ডুলিপি জমা দেওয়ার প্রয়োজনীয়তা সম্পর্কে আমরা মিশ্র মেসেজ দিয়ে থাকি। তারপর আমরা সেইসব মেটেরিয়াল প্রসেস করার জন্য জটিল ওয়ার্কফ্লো নিয়ে কাজ করি।"

ব্রাউজারের ক্ষমতা

• "ব্রাউজার থেকে অটো রেসপন্সিভ src ক্রপ করার [বিল্ট-ইন] ফিচারটি খুবই উপযোগী হবে কারণ সব ছবি ৪টি সাইজে ক্রপ করা এবং সব মার্কআপ লেখা সময়সাপেক্ষ। আমরা যদি একটি বড় ফটো আপলোড করতে পারি এবং একটি সাধারণ ছবি ট্যাগ লিখতে পারি যা ব্রাউজারগুলি অটোমেটিক একাধিক src অ্যাট্রিবিউট তৈরি করবে যা একটি বিজয়ী ফিচার হবে।"
• "ব্যক্তিগতভাবে, রেসপন্সিভ ছবির জন্য CSS-এর মাধ্যমে ছবির প্রস্থ সেট করা হলে (সর্বাধিক-প্রস্থ: ১০০%; উচ্চতা অটো বা উচ্চতা: প্রস্থ: ১০০%; উচ্চতা অটো), বিশেষ করে অ্যাডাপ্টিভ ছবি/ছবি ট্যাগের আর্ট ডিরেকশনের সাথে, পৃষ্ঠা রিফ্লো এড়ানো আমার পক্ষে কঠিন। এটি এড়ানোর সবচেয়ে ভালো উপায় হল, একটি নির্দিষ্ট ছবির অনুপাতের জন্য "নেগেটিভ প্যাডিং হ্যাক" ব্যবহার করা এবং তারপরে এই অনুপাত বক্সের মধ্যে ছবিটি পজিশন করা। আরও ভালো ব্রাউজার সাপোর্ট/রেসপন্সিভ ইমেজ হ্যান্ডলিং থাকলে খুব ভালো হয়!"
• "শুধু প্রথম ফ্রেম ফেচ করে GIF "অটোপ্লে" বন্ধ করুন।"

CDN ও ইমেজ পরিষেবা

মনে রাখবেন: এটি কেন গুরুত্বপূর্ণ? ছবি সংক্রান্ত পরিষেবা আপনার ছবি অপ্টিমাইজ করা আরও সহজ করে তোলে। সাধারণত, আপনি প্রতিটি ছবির একটি হাই-রেজোলিউশন ভার্সন আপলোড করেন এবং তারপরে প্রয়োজন অনুযায়ী ছবি অপ্টিমাইজ বা ট্রান্সফর্ম করতে একটি ওয়েব পরিষেবা API ব্যবহার করেন। কন্টেন্ট ডেলিভারি নেটওয়ার্ক (CDN) ছবি ও ওয়েবসাইটের অন্যান্য অ্যাসেটের ডিস্ট্রিবিউশন ও ডেলিভারি অপ্টিমাইজ করে এবং কখনও কখনও অপ্টিমাইজেশন পরিষেবা প্রদান করে, যেমন ফাইল এক্সটেনশন পরিবর্তন না করেই PNG বা JPEG-এর পরিবর্তে উপযুক্ত ব্রাউজারে অটোমেটিক WebP ছবি ডেলিভার করা।

• "Google-এর উচিত Cloudflare-এর মতো ফ্রি CDN প্রদান করা।"
• "বিভিন্ন পরিষেবা প্রদানকারীর সাথে ডায়নামিক স্কেলিং ও CDN সেট-আপ করার জন্য আরও টুলিং থাকলে ভালো হয়।"
• "অতিরিক্ত বড় সাইজের একটি ছবিকে খুব বেশি কম্প্রেস করে ব্যবহার করা হল একটি খুব ভালো সমাধান, যার জন্য অতিরিক্ত কোনও প্রোডাকশন খরচ হয় না। মোবাইলের জন্য আপনার প্রায় ১০০০ পিক্সেল চওড়া ছবি প্রয়োজন (৫০০ পিক্সেল রেন্ডার প্রস্থ) এবং বড়/ডেস্কটপ নন-রেটিনা ডিসপ্লের জন্যও আপনার এই সাইজের ছবি প্রয়োজন। আমি মনে করি ছবির সাইজ পরিবর্তন করার CDN খুব খারাপ সমাধান, যদিও আমি অতীতে এটি ব্যবহার করেছি। CMS-এর উচিত ছোট বড় করার বিষয়টি ম্যানেজ করা এবং সেটি সেট-আপ করা যদি খুব জটিল হয়, তাহলে একটি সমাধানই (আপাতত) যথেষ্ট।"
• "CloudFlare ব্যবহারকারীর ডিসপ্লের সাথে সবচেয়ে ভালোভাবে ম্যাচ করার জন্য আমাদের ছবি অটো-স্কেল করে। তাই আমরা লোডিংয়ের সময় বাঁচাতে পারি কারণ ব্যবহারকারীর ডিসপ্লে অনুযায়ী ছবি লোড করা হয়। যেমন, কোনও ব্যবহারকারী ফোন ব্যবহার করলে, ডেস্কটপ-সাইজের ব্যাকগ্রাউন্ডে এটি লোড হবে না।"
• "Cloudflare ব্যাকগ্রাউন্ডে এটি করে, আমাদের সেটিংস প্যানেলে একটি বক্সে টিকচিহ্ন দেওয়া ছাড়া আর কিছুই করতে হয় না।"
• "আমি আবার বলছি, Cloudinary-র সহজ ব্যবহারের কারণেই আমি srcset ইত্যাদি সফলভাবে ব্যবহার করতে পারি। কিন্তু Cloudinary-র খরচ খুব দ্রুত বেড়ে যায়। ডেভেলপমেন্টের অভিজ্ঞতায় এটি একটি বড় ফাঁক বলে মনে হয়।"
• "আমাদের এমন একটি উপায় প্রয়োজন যার মাধ্যমে সহজে ও স্মার্টভাবে ছবি অটো-ক্রপ করা যায় যাতে বিভিন্ন প্রসঙ্গে বিভিন্ন অ্যাস্পেক্ট রেশিওতে সেগুলি ব্যবহার করা যায়।"
• "আমি Unsplash-এর মতো অন্যান্য পরিষেবা প্রদানকারীর ছবিও ব্যবহার করি যেখানে রেজোলিউশন, কোয়ালিটি ও কমপ্রেশনের উপর খুব কম নিয়ন্ত্রণ থাকে।"

CMS, প্ল্যাটফর্ম ও ফ্রেমওয়ার্ক

• "CMS ব্যবহার করে সাইট তৈরি করার সময়, ছবি ব্যবহার করার সেরা উপায় কী তা খুঁজে পেতে আমি এখনও সমস্যায় পড়ি। লেখক বিভিন্ন ডাইমেনশনের ছবি কনফিগার করেন এবং আশা করেন যে ছবি ছোট বা স্কেল করা হবে না। আমি নিশ্চিত নই যে ছবিতে সর্বাধিক-প্রস্থ বা সর্বাধিক-উচ্চতা সেট করা ঠিক হবে কিনা"
• "শেষ কয়েকটি প্রোজেক্টে gatsby-image ব্যবহার করছি এবং কখনও পিছনে ফিরে তাকাতে হয়নি।"
• "ছবি নিয়ে কাজ করা প্রায়ই কঠিন হয় কারণ ব্যবহারকারী CMS-এ ছবি আপলোড করেন, তারা যেকোনও সাইজ, ফর্ম্যাট ব্যবহার করতে পারেন, কখনও কখনও আদর্শ ছবির ফর্ম্যাট ও ডাইমেনশনে আসল ছবি উপলভ্য থাকে না।"
• "ছবি ম্যানেজ করা কঠিন কারণ আমাদের সিস্টেম সেল্ফ-সার্ভ, তাই রেজোলিউশন প্রভাবিত না করে অটোমেটিক কিছু না হলে কন্ট্রোল যোগ করা কঠিন। এছাড়াও, আমাদের কাছে মোবাইল বনাম ডেস্কটপে ছবিগুলি সঠিক বলে মনে হচ্ছে না"
• "আমি লোকজনকে তাদের সাইট (WordPress) অপ্টিমাইজ করতে সাহায্য করি। ছবির ক্ষেত্রে আমি যেসব বড় সমস্যা দেখেছি সেগুলি হল: WebP তৈরি করার জন্য CDN বা প্লাগ-ইনের উপর নির্ভর করতে হয়। থিম ডেভেলপারদের srcset/picture সঠিকভাবে কোড করতে হয়। ধীরে ধীরে লোড করার বেশিরভাগ প্লাগ-ইন ধীরে ধীরে লোড হয়, যার ফলে UX খারাপ হয়। ব্যাকগ্রাউন্ডের ছবি ধীরে ধীরে লোড করা কঠিন।"

খরচ/সুবিধা

• "নতুন পদ্ধতিগুলি কার্যকর হলেও সাইটগুলি ডেভেলপ করার সময় বাড়িয়ে দেয়।"
• "srcset এবং WebP-এর মতো নতুন স্ট্যান্ডার্ড মেনে না চলার কারণে অনেক Fortune 500 কোম্পানি ধীরে ধীরে এটি গ্রহণ করেছে। এটি দেখে, অনেক কোম্পানি বর্তমান ওয়েবসাইটের জন্য অপ্রয়োজনীয় ডেভেলপমেন্ট খরচ হিসেবে এই পরিবর্তনকে প্রতিরোধ করেছে। পারফর্ম্যান্সের উন্নতি নিয়ে ব্যবহারকারীরা (UX) খুব বেশি আলোচনা করেন না বা রিপোর্ট করেন না। যদি কিছু হয়, তাহলে এটি ওয়েব থেকে ছবি সেভ করা কিছুটা কঠিন করে তোলে।"
• "একাধিক সাইজ ও ভার্সন তৈরি ও ম্যানেজ করা ব্যয়বহুল।"
• "আমাদের সার্ভারে এগুলি অনেক জায়গা নেয়।"

SEO

• "ছবির গ্রহণযোগ্য কোয়ালিটি ও ফাইলের সাইজের মধ্যে ব্যালেন্স করা কঠিন। একদিকে, আমি SEO-এর সুবিধার জন্য দ্রুত লোডিং চাই, কিন্তু অন্যদিকে, খারাপ কোয়ালিটির ছবি UI/UX-এর মান কমিয়ে দেবে।"

ওয়েবে ছবির ভূমিকা

• "ওয়েবে অনেক আছে। অপ্রয়োজনীয় ছবি ব্যবহার করা বন্ধ করুন যা লিখিত কন্টেন্টকে আরও উন্নত করে না।"
• "আপনার কি এখনও সেই সময়ের কথা মনে আছে যখন ওয়েবে কোনও ছবি ছিল না এবং আমরা ASCII-আর্ট হিসেবে সেলফি শেয়ার করতাম?"

টুলিং, নির্দেশিকা, স্ট্যান্ডার্ড ও পেশাদার পদ্ধতি: হতাশা ও অনুরোধ

• [এই সমীক্ষার উত্তরে একজন অংশগ্রহণকারী একটি ব্লগ পোস্ট লিখেছেন]
• "প্রয়োজনীয়তা ক্রমাগত পরিবর্তিত হচ্ছে বলে মনে হচ্ছে। একজন ওয়েব ডেভেলপার হিসেবে এটি অত্যন্ত হতাশাজনক কারণ প্রথমত ছবি সেভ করতে অনেক সময় লাগে। আমরা যতটা সম্ভব অপ্টিমাইজ করি, সাইট চেক করি এবং তারপরে কয়েক মাস পরে Google সিদ্ধান্ত নেয় যে ছবিগুলি আরও বেশি কম্প্রেস করা যেতে পারে বা অন্য ফর্ম্যাটে থাকা প্রয়োজন। এর ফলে আমরা আমাদের ক্লায়েন্টকে দীর্ঘস্থায়ী ও সবচেয়ে ভালো সমাধান প্রদান করতে পারি না এবং এর পরিবর্তে তাদের ও আমাদের জন্য একটি ব্যয়বহুল প্রচেষ্টা তৈরি হয়। আমাদের কিছু ছোট ব্যবসার ক্লায়েন্টদের কাছে প্রয়োজনীয়তা মেনে চলার জন্য ছবি ঠিক করা এবং সেগুলি আবার সেভ করার বাজেট নেই। তাদের ম্যানেজমেন্ট প্যাকেজের মধ্যে এই কাজ করার মতো বাজেট আমাদের নেই। বিভিন্ন ডিভাইসের জন্য বিভিন্ন সাইজের ছবি কল করার কোড লিখতে অনেক সময় লাগে। ছবি সেভ করার এমন একটি সিস্টেম তৈরি করলে খুব ভালো হয় যা দীর্ঘ সময় ধরে একই রকম থাকবে।"
• "হ্যাঁ, আমার মনে হয় আপনি Lighthouse-এ "অনুরোধের সংখ্যা কম রাখুন এবং ফাইলের সাইজ ছোট করুন" বিষয়টি ভুল বুঝেছেন। কোনও সাইট HTTP1.x-এর মাধ্যমে সার্ভ করলে, অবশ্যই, তবে কোনও সাইট HTTP2-এর মাধ্যমে সার্ভ করলে, অনুরোধের সংখ্যা কম গুরুত্বপূর্ণ বা একই হোস্টনেম থেকে উৎপত্তি হলে কোনও সমস্যাই নয়। আমার একটি লাইট ওয়েবসাইট আছে, কিন্তু আমি একই হোস্টনেমে HTTP2-এর মাধ্যমে মোট প্রায় ৩৫টি অনুরোধের ৩০টি ছোট WebP ফাইল লোড করি। Lighthouse এটিকে "অনুরোধের সংখ্যা কম রাখুন এবং ফাইলের সাইজ ছোট করুন" সমস্যা হিসেবে ফ্ল্যাগ করছে, যদিও এটি অত্যন্ত দ্রুত এবং একই হোস্টনেমে HTTP2 থাকার কারণে অনুরোধের সংখ্যা কোনও সমস্যা নয়। এবং হ্যাঁ, ফাইলগুলি ইতিমধ্যেই ছোট (বেশিরভাগই ১ কেবি এবং ২ কেবি বা তার কম)। আমি একটি স্প্রাইট লোড করতে পারি কিন্তু তারপরে আরও CSS কম্পিউটিং করতে হবে। তাই একই হোস্টনেমে HTTP2 বিবেচনা করার জন্য Lighthouse-এ "অনুরোধের সংখ্যা কম এবং ফাইলের সাইজ ছোট রাখুন" রিপোর্ট আপডেট করুন।"
• "ছবি কম্প্রেস করার কথা মনে রাখা লোকজনের কাছে একটি কঠিন কাজ।"
• "ক্রস ব্রাউজার আচরণ সম্পর্কে আগে থেকে অনুমান করা যায় না, তাই সবচেয়ে সহজ সমাধানই প্রায়শই সবচেয়ে নিরাপদ হয়।"