اگر آپ کی سائٹ Vercel کی مفت امیج آپٹیمائزیشن کی حد تک پہنچنے والی ہے تو کیا کریں۔

میں اپنی ویب سائٹ کو برقرار رکھتا ہوں اور کبھی کبھار اسے نئے ورژن میں اپ گریڈ کرتا ہوں۔ اور ایسا کرتے ہوئے، ہم اکثر مختلف ٹیکنالوجیز اور فن تعمیرات کے ساتھ تجربہ کرتے ہیں۔

میں حال ہی میں ورسل کے ساتھ ایک مسئلہ کا شکار ہوا، جہاں اس نے مجھے ایک انتباہ دیا کہ میں "امیج آپٹیمائزیشن – کنورژن” کے لیے اپنی مفت درجے کی حد تک پہنچ گیا ہوں۔ کچھ آزمائش اور غلطی کے بعد، میں نے غیر ضروری طور پر مفت درجے سے تجاوز کرنے سے بچنے کے لیے مسئلہ حل کیا۔

اس مضمون میں، ہم وضاحت کریں گے کہ مسئلہ کیا ہے، ہمیں اس کی صحیح وجہ کیسے معلوم ہوئی، اور اسے ٹھیک کرنے کے لیے کون سے اختیارات دستیاب ہیں۔ میں آپ کو اس طریقہ کار کے بارے میں بھی بتاؤں گا جس کا میں نے بالآخر انتخاب کیا اور میں نے اس مسئلے کو کیسے حل کیا۔

تو مسئلہ کیا تھا؟

فی الحال ویب سائٹ Cloudflare R2 Object Storage کے CDN کا استعمال کرتے ہوئے ورژن 5 (2026) پر چل رہی ہے۔ اس میں ویب سرچ اور اے آئی سرچ دونوں کے لیے بڑے پیمانے پر SEO آپٹیمائزیشن بھی شامل ہے۔

آپ ویب سائٹ کو براہ راست یہاں دیکھ سکتے ہیں: fahimbinamin.com۔ یہ واضح نہیں ہے کہ جب آپ ویب سائٹ پر جاتے ہیں تو آپ ڈومین پر کون سا ورژن دیکھتے ہیں، لیکن یہ ہمیشہ تازہ ترین ورژن ہوتا ہے۔

میری ویب سائٹ کا ورژن 5 ایک کثیر صفحات پر مشتمل ویب سائٹ ہے، اس لیے میں نے اپنے بارے میں ہر چیز کو ایک پلیٹ فارم پر شامل کرنے کی کوشش کی۔ میرے پاس متعدد جگہوں پر شائع ہونے والے بہت سارے مضامین ہیں اور میں ان سب کو ایک ہی پلیٹ فارم پر شامل کرنا چاہتا تھا۔ لیکن میں یہ بھی یقینی بنانا چاہتا تھا کہ ان کے کیننیکل یو آر ایل ٹھیک سے کام کر رہے ہیں۔ اس سے AI کرالر/بوٹس کو URL/ذریعہ کو سمجھنے میں مدد ملتی ہے جہاں سے یہ اصل میں پوسٹ کیا گیا تھا۔ لہذا میں نے اس خصوصیت کو اپنی ویب سائٹ کے 5ویں ورژن میں شامل کیا۔

یہ ویب سائٹ مناسب طریقے سے Next.js اور Next کے امیج آپٹیمائزیشن پروٹوکول کا استعمال کرتی ہے۔ موجودہ کوڈبیس بند سورس ہے اور اس تک کہیں بھی رسائی حاصل نہیں کی جا سکتی۔ لیکن اب میں نے کچھ اسکرین شاٹس کا اشتراک کیا ہے تاکہ آپ کو ایک جھلک ملے کہ یہ کیسا لگتا ہے۔

بہر حال، میں پیسہ بچانے کے لیے مفت وسائل کو زیادہ سے زیادہ مؤثر طریقے سے استعمال کرنا چاہتا ہوں۔ CDN کے لیے ہم R2 آبجیکٹ اسٹوریج کے ساتھ Cloudflare استعمال کر رہے ہیں۔ تمام میڈیا (تصاویر، پی ڈی ایف، وغیرہ) جو آپ میری ویب سائٹ پر دیکھتے ہیں وہ Cloudflare R2 آبجیکٹ اسٹوریج سے آتے ہیں۔ Vercel کے ذریعے چل رہا ہے.

کل، جب سب کچھ ٹھیک چل رہا تھا، مجھے Vercel کی طرف سے ایک ای میل ملا جس میں کہا گیا تھا کہ میں تصویر کی اصلاح کے لیے اپنی مفت درجے کی حد تک پہنچ رہا ہوں۔

میں نے اپنے پروجیکٹ کی تصاویر دیکھنے کی توقع کرتے ہوئے استعمال کا پینل کھولا، بشمول پروفائل تصاویر، پروجیکٹ کے اسکرین شاٹس، اور گیلری کے فریم۔ اس کے بجائے، درج کردہ تقریباً تمام ماخذ کی تصاویر کی میزبانی کی گئی تھی۔ freecodecamp.org.

میں چند سیکنڈ کے لیے الجھن میں تھا کیونکہ freeCodeCamp میری تصاویر کی میزبانی نہیں کرتا۔ پھر مجھے یاد آیا کہ میرا ان سے اصل تعلق تھا!

انڈیکس

میں نے پورے مضمون کو ایسے حصوں میں ترتیب دیا ہے جو اگر آپ چاہتے ہیں یا کچھ حصوں کو الگ سے پڑھنے کی ضرورت ہے تو مددگار ثابت ہوسکتے ہیں۔

یہ تصویر اصل میں کہاں سے آئی ہے

میں نے کئی سالوں میں فری کوڈ کیمپ پر متعدد مضامین کراس پوسٹ کیے ہیں۔ جب میں نے اپنے مضامین کو اس سائٹ کے بلاگ آرکائیو میں دوبارہ جمع کیا تو میں نے مضمون کا متن برقرار رکھا۔ FreeCodeCamp اور Hashnode’s CDN کی طرف اشارہ کرنے والے ٹیگز (چونکہ اسکرین شاٹس ہمیشہ رہے ہیں)۔

بلاگ رینڈرر تمام ان لائن تصاویر پیش کرتا ہے۔ BlogImage عنصر:

import Image from "next/image";
 
export default function BlogImage({ src, alt, caption }) {
  return (
    

      
      
    
  );
}

next/image اصل میں مجھے پرواہ نہیں ہے۔ src آپ کے ڈومین یا کسی اور کے ڈومین کی طرف اشارہ کرتا ہے۔ جب تک میزبان فہرست میں ہے۔ images.remotePatterns کو next.config.tsNext.js اسے اس مرحلے پر Vercel کی امیج آپٹیمائزیشن پائپ لائن کے ذریعے چلاتا ہے، بشمول اصل کو بازیافت کرنا، کسی بھی بریک پوائنٹس کے لیے سائز تبدیل کرنا، AVIF/WebP پر دوبارہ انکوڈنگ کرنا، اور نتائج کو کیش کرنا۔

میں نے شامل کیا cdn-media-0.freecodecamp.org، www.freecodecamp.orgاور cdn.hashnode.com میں نے اسے چند ماہ قبل دو الگ الگ کمٹ میں اس وائٹ لسٹ میں شامل کیا تھا۔ میں نے خاص طور پر ایسا کیا تاکہ بیک اپ کی گئی تصاویر ٹوٹنے کے بجائے رینڈر ہوں۔

اس معاملے میں یہ واقعی میرے لئے کام کرتا ہے۔ تاہم، اس کا مطلب یہ بھی ہے کہ تمام امیجز (اور ہر تصویر سے تیار کردہ کوئی بھی ریسپانسیو Next.js) میرے Vercel اکاؤنٹ کے مفت پرتوں والی امیج آپٹیمائزیشن کوٹہ میں شمار ہوتی ہیں۔ آپ نہیں چاہتے کہ آپ کا کوٹہ نادانستہ طور پر استعمال ہو جائے کیونکہ کوٹہ ہر ماہ ری سیٹ ہوتا ہے اور آپ کو اس بات پر کوئی کنٹرول نہیں ہے کہ کرالر یا صفحہ کا بوجھ کتنی بار سائز کی مختلف حالتوں کو دوبارہ متحرک کرتا ہے۔

رینج چیک کریں۔

کسی بھی چیز کو ٹھیک کرنے سے پہلے، میں اندازہ لگانے کے بجائے غلطیاں کرنا چاہتا تھا۔ میں نے تمام پوسٹس کو گرپ کیا۔ content/posts/*.mdx کے لیے src="https://www.freecodecamp.org/news/what-to-do-if-your-site-is-about-to-hit-vercels-free-image-optimization-cap/..." تین بیرونی میزبانوں کی طرف اشارہ کرنے والی خصوصیات:

src="(https://(?:cdn-media-0.freecodecamp.org|www.freecodecamp.org|cdn.hashnode.com)[^"]*)"

اس کے نتیجے میں 33 پوسٹس میں 691 تصویری حوالہ جات ہوئے۔ 2021 کے سبق کے پرانے اسکرین شاٹس شامل ہیں، ڈسک پارٹیشننگ واک تھرو سے لے کر CUDA سیٹ اپ گائیڈز تک سب کچھ۔ یہ سب کچھ دوسرے لوگوں کے سکوں (میرے) کے لیے ایک بار ذخیرہ کرنے اور یکساں طور پر پیش کیے جانے کے بجائے بہتر بنایا گیا ہے۔ اس سے پہلے یہ مسئلہ پیدا ہو رہا تھا۔

حل کے لیے میری تلاش میں، مجھے دو طریقے ملے جو فوری طور پر مسئلہ کو جلد حل کرنے میں میری مدد کر سکتے ہیں۔

اس مسئلے کو حل کرنے کے دو طریقے

آپشن 1: اصلاح بند کریں۔ پاس unoptimized کو next/image میرے CDN کے علاوہ دیگر ذرائع کے لیے۔ Vercel درخواست کو یکسر روک دے گا۔

اس صورت میں، براؤزر تصویر کو براہ راست freeCodeCamp سے کھینچتا ہے، اس میں کوئی ریائزنگ یا AVIF کنورژن نہیں ہوتا ہے، اور کوئی کوٹہ اثر نہیں ہوتا ہے۔ اس نے کہا، یہ صرف ایک چھوٹا سا فرق ہے جو چند منٹوں میں مکمل ہو سکتا ہے۔

آپشن 2: تصویر کے مالک ہوں۔ تمام 691 ڈاؤن لوڈ کریں اور انہیں Cloudflare R2 بالٹی میں دوبارہ ہوسٹ کریں جو آپ پہلے ہی اپنی سائٹ پر دیگر تمام تصاویر کے لیے استعمال کر رہے ہیں۔ src وہ خصوصیت جس کی طرف اشارہ کرتا ہے۔ cdn.fahimbinamin.comاور تین بیرونی میزبان remotePatterns مکمل طور پر

حل میں نے منتخب کیا

آپشن 1 پرکشش ہے کیونکہ اس میں بہت کم ٹنکرنگ کی ضرورت ہے۔ تاہم، اس کا مطلب یہ تھا کہ میرے بلاگ آرکائیوز کے ایک تہائی کے لیے ریسپانسیو ریائزنگ اور جدید فارمیٹنگ کو مستقل طور پر ترک کر دیا جائے، جس سے سائٹ کو فری کوڈ کیمپ کے CDN پر منحصر رکھا جائے اور وہ مخصوص URLs کبھی تبدیل نہ ہوں۔

آپشن 2 کی ابتدائی قیمت زیادہ ہے، لیکن اس سے میل کھاتا ہے کہ آپ کی سائٹ پر موجود دیگر تمام تصاویر پہلے سے کیسے کام کرتی ہیں۔ یہ اصلاح کے فوائد کو بھی برقرار رکھتا ہے اور بیرونی انحصار کو مکمل طور پر ختم کرتا ہے۔ تو میں نے آپشن 2 کا انتخاب کیا۔

ہجرت انجام دیں۔

مرحلہ 1: سب کچھ ڈاؤن لوڈ کریں۔

میں نے تمام پوسٹس کو براؤز کرنے، ایک ہی 3 میزبان ریگولر ایکسپریشنز سے ملنے، اور ہر ایک منفرد URL حاصل کرنے کے لیے ایک چھوٹی نوڈ اسکرپٹ لکھی۔

const HOST_RE =
  /src="(https://(?:cdn-media-0.freecodecamp.org|www.freecodecamp.org|cdn.hashnode.com)[^"]*)"/g;
 
// ...for each match, download to downloaded-images//
// and record oldUrl -> "images/writing//" in url-map.json

میں نے تنازعات سے بچنے کے لیے فائلوں کو خاص طور پر پوسٹ سلگ کے ذریعے ترتیب دیا۔ اس کی وجہ یہ ہے کہ ان میں سے بہت سے اسکرین شاٹس مشترکہ ناموں کا اشتراک کرتے ہیں جیسے: 2022-01-20_18-50.png بالکل مختلف ٹیوٹوریل کے ذریعے۔ آخر میں، ڈاؤن لوڈز کی تعداد 0 تھی، ناکامیوں کی تعداد 691 تھی، اور کل سائز تقریباً 105 MB تھا۔

مرحلہ 2: R2 پر اپ لوڈ کریں۔

ہدف کلید کا سابقہ ​​(images/writing//...) کو CS براؤزر کا استعمال کرتے ہوئے بالٹی پر اپ لوڈ کیا گیا تھا۔ R2 ایک S3-مطابقت پذیر API کو بے نقاب کرتا ہے، اور اس کا GUI کلائنٹ سینکڑوں نیسٹڈ فائلوں کو ڈیش بورڈ کے ذریعے فولڈرز کو گھسیٹنے سے زیادہ قابل اعتماد طریقے سے ہینڈل کرتا ہے۔

مرحلہ 3: مواد کو چھونے سے پہلے اسے چیک کریں۔

میں نے کچھ نئے اپ لوڈ کردہ URLs کو دوبارہ لکھنے سے پہلے چیک کیا۔

curl -s -o /dev/null -w "%{http_code}n" 
  "https://cdn.fahimbinamin.com/images/writing/automount-a-storage-partition-on-startup-in-linux/HDD-Partition.png"
# 200

مرحلہ 4: MDX کو دوبارہ بنائیں

دوسرا اسکرپٹ پڑھیں url-map.json تمام مماثل اشیاء کو تبدیل کر دیا گیا۔ src="https://www.freecodecamp.org/news/what-to-do-if-your-site-is-about-to-hit-vercels-free-image-optimization-cap/..." کو content/posts/*.mdx برابر کے طور پر cdn.fahimbinamin.com URL:

content = content.replace(HOST_RE, (match, url) => {
  const entry = urlMap[url];
  if (!entry) return match; // left untouched, logged for review
  return `src="https://www.freecodecamp.org/news/what-to-do-if-your-site-is-about-to-hit-vercels-free-image-optimization-cap/${CDN_BASE}/${entry.cdnPath}"`;
});

ہمارے ٹیسٹوں میں، ہم نے پایا کہ کل 33 فائلیں تبدیل کی گئی ہیں، اور 692 متبادل فائلیں (ایک تصویر کا ایک ہی پوسٹ میں دو بار حوالہ دیا گیا ہے) بغیر نقشے کے رہ گئے۔

مرحلہ 5: اپنی ترتیب کو صاف کریں۔

مزید نہیں میں نے تینوں کو ہٹا دیا کیونکہ ان میں بیرونی میزبانوں کے حوالے تھے۔ images.remotePatterns کو next.config.ts:

// Removed, no longer needed
{ protocol: "https", hostname: "cdn.hashnode.com", pathname: "/**" },
{ protocol: "https", hostname: "cdn-media-0.freecodecamp.org", pathname: "/**" },
{ protocol: "https", hostname: "www.freecodecamp.org", pathname: "/**" },

میں نے بعد میں ایک مکمل پروڈکشن کی تعمیر چلائی۔ تمام 43+ بلاگ پوسٹس پہلے سے پیش کردہ، صاف، لنٹ پاس شدہ، اور بدعنوانی سے پاک ہیں۔

طویل مدت میں یہ ایک بہتر حل کیوں ہے۔

کوٹہ کا مسئلہ درحقیقت ایک چھوٹی سی غلطی کی علامت تھا: فریق ثالث کے CDN کے ساتھ ایسا سلوک کرنا جیسے کہ یہ انفراسٹرکچر ہے جسے میں کنٹرول کرتا ہوں۔ یہ کچھ مہینوں تک ٹھیک تھا، لیکن میں نے اسے اس وقت تک قریب سے نہیں دیکھا جب تک کہ استعمال ایک حد سے تجاوز نہ کر جائے۔

unoptimized میں نے مسئلے کو حل کیے بغیر ہی وارننگ کو دور کر دیا۔ تاہم، میں یہ یقین کرتا رہتا کہ freeCodeCamp کا URL غیر معینہ مدت تک درست رہے گا اور مجھے اس کے لیے کوئی اصلاح نظر نہیں آئے گی۔

سیلف ہوسٹنگ کا مطلب یہ ہے کہ اس سائٹ پر موجود تمام تصاویر اب ایک ہی پائپ لائن سے گزرتی ہیں اور کیشے کے قواعد اور CDNs کا استعمال کرتی ہیں، قطع نظر اس کے کہ مواد اصل میں کہاں رہتا ہے۔ میں کوئی ایسی چیز نہیں چاہتا تھا جو خاموشی سے ٹوٹ جائے کیونکہ کسی اور نے URL کا ڈھانچہ تبدیل کر دیا تھا۔

اگلی بار آپ مختلف طریقے سے کیا کریں گے؟

دو remotePatterns FreeCodeCamp اور Hashnode اندراجات میں سے ہر ایک کو چند ماہ کے وقفے سے شامل کیا گیا تھا، کیونکہ بیک اپ پوسٹس میں تصاویر ٹوٹی ہوئی تھیں اور میزبان کو شامل کرنا سب سے تیز رفتار تھا۔

میں نے پہلے کبھی اپنے آپ سے نہیں پوچھا، "کیا واقعی اس کی میزبانی یہاں ہونی چاہیے، یا اسے شروع سے ہی میرے CDN پر لائیو ہونا چاہیے؟” اس سوال کو مواد سے بھرنے سے پہلے پوچھنا سستا ہے، اور جب آپ کے پاس پہلے سے ہی 691 تصاویر اور 33 پوسٹس ہیں جو ظاہری لائیو کی طرف اشارہ کرتی ہیں اس کا جواب دینا مہنگا ہے۔

اب جب کہ ہمارے پاس یہ قاعدہ لکھ دیا گیا ہے، مستقبل کے بیک فلز کو ایک بیک اپ سے پہلے ڈاؤن لوڈ اور دوبارہ ہوسٹ کیا جائے گا۔ ڈومین کے باہر ٹیگز پوائنٹ۔

نتیجہ

آخر تک پڑھنے کا بہت شکریہ۔ مجھے امید ہے کہ اگر آپ کو مستقبل میں اسی مسئلے کا سامنا کرنا پڑتا ہے تو یہ مضمون آپ کی مدد کرے گا۔

اس طرح کے مزید مواد کے لیے، مجھے LinkedIn پر فالو کریں اور اگر آپ اوپن سورس اور ترقی میں دلچسپی رکھتے ہیں، تو آپ میری ویب سائٹ چیک کر سکتے ہیں اور GitHub پر بھی مجھے فالو کر سکتے ہیں۔ اگر آپ پروگرامنگ اور ٹیکنالوجی سے متعلق ویڈیوز دیکھنا چاہتے ہیں تو آپ میرے یوٹیوب چینل کو بھی سبسکرائب کر سکتے ہیں۔