4 ضروری تصویری اصلاح کی تجاویز

Feb 3, 2026
کيسے

کچھ خوش قسمت ڈویلپرز اور اس مصنف کو اضافی عادی عثمان کی نئی تصویر کی اصلاح ای بک میں ترمیم کرنے کا موقع تھا، ضروری تصویر کی اصلاح ، جو آپ کو بالکل پڑھنا چاہئے.

  • بہتر کارکردگی کے لئے تصاویر کو بہتر بنانے کے 10 طریقے

چاہے آپ مکمل سائز کی تعمیر کر رہے ہیں ای کامرس ویب سائٹس یا صرف آپ کے لئے ایک آن لائن گھر بنانا ڈیزائن پورٹ فولیو ، اس آرٹیکل میں آپ Addy کی کتاب سے کچھ تجاویز سیکھیں گے جو آپ کی تصاویر کو لینر اور تیزی سے بنانے میں مدد ملے گی.

انتخابی اور ابتدائی اہم تصاویر بنیں

اپنی سائٹ پر نظر ڈالیں اور ایک اہم تصویر اثاثہ کی شناخت کریں. سب سے زیادہ کے لئے، یہ ایک علامت (لوگو) یا ہیرو کی تصویر ہوگی جسے آپ جتنی جلدی ممکن ہو پیش کرنا چاہتے ہیں.

یہ کہاں ہے preload. وسائل اشارہ آتا ہے. preload. کلائنٹ پر اشارہ کرنے کا ایک طریقہ ہے کہ براؤزر کے پارسر سے پہلے کسی اثاثہ کو حاصل کیا جاسکتا ہے. آپ اسے بہت کچھ کے لئے استعمال کر سکتے ہیں، لیکن یہ اہم امیجری کو لوڈ کرنے کے لئے شاندار طور پر کام کرتا ہے. یہاں ایچ ٹی ایم ایل میں استعمال میں اس کا ایک مثال ہے & lt؛ سر اور جی ٹی؛ ایک ہیرو بینر تصویر پری لوڈ کرنے کے لئے عنصر: 

<link rel="preload" href="/img/logo.svg" as="image">

آپ HTTP ہیڈر میں Preload بھی استعمال کر سکتے ہیں: 

Link: </img/logo.svg>; rel=preload; as=image

ذیل میں آپ کروم میں ایک ہی صفحے کے دو اسکرین شاٹ رول دیکھ سکتے ہیں. ایک منظر کا استعمال preload. ایک ہیرو بینر کی تصویر کو لوڈ کرنے کے لئے، جبکہ دوسرا نہیں.

The effect of using preload on a hero banner

ایک ہیرو بینر پر preload کا استعمال کرنے کا اثر

مثال کے طور پر preload. ، بینر کی تصویر براؤزر ونڈو میں نصف سیکنڈ تیزی سے ظاہر ہوتا ہے. تمام فوری طور پر ایک لائنر کی وجہ سے جس نے براؤزر کو ایک سر شروع کیا.

خود بخود آپ کے SVG آرٹ ورک کو آسان بنانا

Illustrator’s Simplify tool, showing the number of anchor points before and after as Curve Precision is lowered

Illustrator کی آسان آلہ، لنگر پوائنٹس کی تعداد ظاہر کرنے سے پہلے اور بعد میں وکر صحت سے متعلق کم ہے

SVGs کو بہتر بنانے کی دوسری تصویر کی اقسام کے مقابلے میں مختلف ہے، کیونکہ JPEGS یا PNGS کے برعکس، SVGS متن، خاص طور پر XML مارک اپ پر مشتمل ہے. اس کا مطلب یہ ہے کہ عام اصلاحات آپ ٹیکسٹ پر مبنی اثاثوں پر لاگو ہوتے ہیں (مثال کے طور پر، منجمد، GZIP / Brotli کمپریشن) اور SVGS پر بھی لاگو کیا جانا چاہئے. اس سے باہر، آپ SVGs کے سائز کو نیچے ٹاپ کرنے کے لئے Svgo جیسے آپٹمائزر استعمال کرسکتے ہیں.

لیکن اگر آپ صرف ویکٹر آرٹ ورک استعمال نہیں کر رہے ہیں، لیکن یہ تخلیق کرتے ہیں؟ اگر آپ ایک Illustrator صارف ہیں تو، آپ خود کار طریقے سے اپنے آرٹ ورک کو آسان ڈائیلاگ ونڈو کے ذریعہ راستے میں لنگر پوائنٹس کی مقدار کو کم کرنے کے لئے آسان کرسکتے ہیں.

یہ ڈائیلاگ میں پایا جا سکتا ہے Illustrator CC. اعتراض اور GT پر جانے کی طرف سے مینو؛ راہ اور جی ٹی؛ آسان بنائیں. وکر کی صحت سے متعلق کم کرنے کی طرف سے (اور اختیاری طور پر زاویہ کی حد کو ایڈجسٹ کرنے کے لۓ)، آپ کے آرٹ ورک میں اضافی راستہ پوائنٹس کو دور کرنے کے لئے ممکن ہے. اس مثال میں، آپ نوٹ کریں گے کہ وکر کی صحت سے متعلق کم از کم 6٪ کے طور پر کم از کم 54 راہ پوائنٹس کو ہٹاتا ہے. عدلیہ سے استعمال کیا جاتا ہے، یہ آپ کے آرٹ ورک کی ظاہری شکل کو بہتر بنا سکتا ہے.

The savings that path simplification can afford

بچت جو راستہ آسان بنانے کے لئے برداشت کر سکتا ہے

حکمت سے لفظ - محتاط رہو کہ آپ اس آلے کے ساتھ کس طرح جارحانہ طور پر حاصل کرتے ہیں. کم وکر صحت سے زیادہ بہت زیادہ، اور آپ کو ایک بار احتیاط سے تیار کردہ آرٹ ورک ایک بلب میں تحلیل کرے گا. صحیح توازن کو ہڑتال کرو، اگرچہ، اور آپ انعامات حاصل کریں گے.

ویڈیو پر متحرک GIFs تبدیل کریں

With FFmpeg you can turn flabby GIFs into svelte video

FFMPEG کے ساتھ آپ فلبیبی GIFs Svelete ویڈیو میں تبدیل کر سکتے ہیں

ہم سب ایک اچھا متحرک GIF سے محبت کرتے ہیں. وہ مؤثر طریقے سے تقریبا کسی جذبے کو پہنچاتے ہیں، لیکن وہ واقعی بہت بڑے ہوسکتے ہیں. تصویری اصلاحات جیسے جیسے Gifsicle اضافی کلوبائٹس کو دور کرنے میں مدد مل سکتی ہے، لیکن ٹکٹ ان GIFs کو ویڈیوز میں تبدیل کرنے اور HTML5 میں ان کو سرایت کرنا ہے. & lt؛ ویڈیو اور جی ٹی؛ ٹیگ. The. FFMPEG. کمان لائن کی افادیت اس کام کے لئے اچھی طرح سے مناسب ہے: 

 FFMpeg -i متحرک. جی آئی ایف-بی: V 512K متحرک. ویبم
FFMPEG -I متحرک. جی آئی بی: V 512K متحرک
FFMPEG -i متحرک. جی آئی بی: V 512K متحرک. ایم پی 4

مندرجہ بالا حکم ایک ذریعہ GIF لے لو ( متحرک. جیف )-میں-میں دلیل، اور آؤٹ پٹ ویڈیوز کے طور پر 512Kbps کے متغیر بٹریٹ کے ساتھ آؤٹ پٹ ویڈیوز. ہمارے اپنے امتحان میں، ہم 989 کلو گرام متحرک GIF لینے کے قابل تھے اور اسے 155KB MP4، 109KB OGV اور 85 کلو میٹر ویب ایم کو کم کرنے میں کامیاب تھے. تمام ویڈیو فائلوں کو ذریعہ GIF کے معیار میں موازنہ کیا گیا تھا. کی وجہ سے & lt؛ ویڈیو اور جی ٹی؛ براؤزرز میں ٹیگ کی حمایت، یہ تین ویڈیو فارمیٹس اس طرح استعمال کیا جا سکتا ہے: 

 & lt؛ ویڈیو preload = "کوئی بھی" اور جی ٹی؛
  & lt؛ ذریعہ SRC = "/ ویڈیوز / متحرک. ویبم" قسم = "ویڈیو / ویب ایم" اور جی ٹی؛
  & lt؛ ذریعہ src = "/ ویڈیوز / متحرک .ogV" قسم = "ویڈیو / OGG" اور جی ٹی؛
  & lt؛ ذریعہ SRC = "/ ویڈیوز / متحرک .mp4" قسم = "ویڈیو / اتارنا Mp4" اور GT؛
& lt؛ / ویڈیو اور جی ٹی؛

اگر آپ اس راستے پر جانے کا فیصلہ کرتے ہیں تو، آپ کو حکم دینے کا یقین رکھو & lt؛ ذریعہ اور جی ٹی؛ ٹیگز تاکہ سب سے زیادہ زیادہ سے زیادہ فارمیٹ سب سے پہلے بیان کی جاسکتی ہے، اور کم از کم بہترین مقرر کیا گیا ہے. زیادہ تر معاملات میں، اس کا مطلب یہ ہے کہ آپ سب سے پہلے ویب ایم ویڈیوز کے ساتھ شروع کریں گے، لیکن ہر ویڈیو کے آؤٹ پٹ فائل کا سائز چیک کریں اور جو کچھ بھی سب سے چھوٹی ہے اس کے ساتھ جائیں، اور جو کچھ بھی سب سے بڑا ہے اس کے ساتھ ختم کریں.

اگر آپ کے پاس FFMPEG نہیں ہے یا نہیں جانتے کہ یہ کیا ہے، اس کی جانچ پڑتال کر . زیادہ تر آپریٹنگ سسٹم پیکیج مینیجرز، جیسے ہومبرو یا چاکلیٹ کے ذریعہ انسٹال کرنا آسان ہے.

intersectionobserver کے ساتھ سست لوڈ

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

شکر ہے، چوک مبصر API ہمیں ایک آسان اور زیادہ مؤثر طریقہ فراہم کرنے کے لئے زیادہ موثر طریقہ فراہم کرتا ہے جب عناصر Viewport میں ہیں. یہاں کچھ بنیادی سست لوڈنگ تصویر مارک اپ کا ایک مثال ہے: 

 & lt؛ img class = "سست" ڈیٹا-SRC = "/ تصاویر / سست لوڈ کردہ image.jpg" src = "/ تصاویر / placeholder.jpg" alt = "میں سست ہوں." چوڑائی = "320" اونچائی = "240" اور جی ٹی؛

یہاں، ہم میں ایک جگہ ہولڈر تصویر لوڈ کرتے ہیں SRC. خاصیت، اور پھر اس تصویر کے لئے یو آر ایل کو ذخیرہ کریں جسے ہم سستے میں لوڈ کرنا چاہتے ہیں ڈیٹا SRC. وصف. سب سے اوپر یہ سب سے اوپر، ہم دیتے ہیں & lt؛ img & gt؛ عنصر کے ساتھ آسان رسائی کے لئے سست کی ایک کلاس queryselectorall. . وہاں سے، ہم صرف اس کوڈ کا استعمال کرتے ہیں:

[1 9 1] دستاویز. ایڈیڈیوینٹلسٹینر ("ڈومیکنٹ لوڈڈڈڈ"، فنکشن () { اگر ونڈو اور amp؛ & amp؛ & amp؛ & amp؛ & amp؛ @ amp؛ "chersectionratio" میں ونڈو .ینٹریپبسرورینٹری. پروٹوٹائپ میں "amportionratio". عناصر = دستاویز. QuerySelectorall ("img.lazy")؛ var imageobserver = نیا intersectionobserver (تقریب (اندراج، مبصر) { Entries.Foreach (تقریب (داخلہ) { اگر (entry.isintersecting) { Entry.target.Setatribute ("SRC"، entry.target.getettribute ("ڈیٹا-ایس آر سی"))؛ Entry.target.classlist.remove ("سست")؛ imageobserver.unobserve (entry.target)؛ } })؛ })؛ عناصر .فیسچ (فنکشن (تصویر) { Imageobserver.ObServe (تصویر)؛ })؛ } })؛

یہاں، ہم نے کوڈ کو بند کر دیا دستاویز آبجیکٹ domcontentloaded. تقریب. یہ کوڈ چیک کرتا ہے کہ موجودہ براؤزر کی طرف سے انٹرویو مبصر کی حمایت کی جاتی ہے. اگر یہ پتہ چلتا ہے کہ یہ ہے، ہم سب پر قبضہ کرتے ہیں img. ایک کلاس کے ساتھ عناصر سست کے ساتھ queryselectorall. اور پھر ان کے مبصرین کو منسلک کریں.

مبصرر اس عناصر کے حوالے سے حوالہ جات پر مشتمل ہیں جو ہم دیکھ رہے ہیں ( اندراجات ) اور مبصر خود ( مبصر ). یہ کوڈ ہر مبصر اندراج پر ہوتا ہے Isintersecting. قدر. جبکہ مشاہدہ عنصر Viewport سے باہر ہے، Isintersecting. واپسی 0. . جیسا کہ عنصر قریبیپورٹ میں داخل ہوتا ہے، اگرچہ، اس سے زیادہ سے زیادہ قیمت واپس آ جائے گی 0. . یہ اس وقت ہے کہ ہم تصویر کی مواد کو تبدیل کرتے ہیں ڈیٹا SRC. میں خاصیت SRC. خاصیت، اور اسے ہٹا دیں سست کلاس. دی گئی تصویری سست بوجھ کے بعد، مبصر اس سے مبصر کے ساتھ ہٹا دیا جاتا ہے Unobserve. طریقہ.

یہ عمل طومار ہینڈلرز کے ارد گرد گھومنے سے زیادہ آسان ہے، لیکن چونکہ چوک مبصرین یونیورسل سپورٹ سے لطف اندوز نہیں کرتا، آپ کو ان پر واپس آنا ہوگا. اگر آپ ایک سکرپٹ پر قبضہ کرنے اور جانے کے لئے تیار ہیں تو، ہم نے ایک سست لوڈر لکھا ہے جو چوکی مبصر کا استعمال کرتا ہے، لیکن Yesteryear کے طریقوں پر بھی واپس آتا ہے. آپ اسے پکڑ سکتے ہیں یہاں .

یہ مضمون اصل میں 301 کے معاملے میں شائع کیا گیا تھا نیٹ ویب ڈیزائنرز اور ڈویلپرز کے لئے دنیا کی بہترین فروخت میگزین. مسئلہ 301 خریدیں یا یہاں سبسکرائب کریں .

متعلقہ مضامین:

  • SVG کے لئے مکمل گائیڈ
  • ویکٹر کے اوزار کا استعمال کرتے ہوئے: ایک ویب ڈیزائنر کے نقطہ نظر
  • جاوا اسکرپٹ کے ساتھ متحرک SVG

کيسے - انتہائی مشہور مضامین

ایڈوب XD: آٹو متحرک خصوصیت کا استعمال کیسے کریں

کيسے Feb 3, 2026

(تصویری کریڈٹ: ایڈوب) پروٹوٹائپ کھیل میں دیر سے داخلہ کے باوجود، �..

ایچ ٹی ایم ایل کوڈ کیسے لکھنا

کيسے Feb 3, 2026

(تصویری کریڈٹ: مستقبل) جدید ویب سائٹس کو بہت سے ایچ ٹی ایم ایل کوڈ ..

آپ کے پینٹنگز میں پیمانے پر کیسے حاصل کرنے کے لئے

کيسے Feb 3, 2026

اس سبق میں ہم کچھ بنیادی اصولوں پر جائیں گے جو بڑے پیمانے پر اپنے ٹکڑے ٹکڑے میں بڑے پیمانے پر خیال سے گفتگو..

زبرش میں مجسمہ حقیقت پسندانہ اناتومی

کيسے Feb 3, 2026

صفحہ 1 کا 2: صفحہ 1 صفحہ 1 صفحہ 2. اگر آپ ص..

مخلوق اناتومی کس طرح ماسٹر

کيسے Feb 3, 2026

جب یہ بات آتی ہے قابل اعتماد مخلوق ڈرائنگ ، آپ کو کنکال، پٹھوں ا..

ایپلی کیشنز کی تعمیر کریں جو آف لائن کام کرتے ہیں

کيسے Feb 3, 2026

ایک طویل وقت کے لئے، آف لائن کی فعالیت، پس منظر کی مطابقت پذیری اور دھکا..

VR میں ایک کردار کو کس طرح مجسمہ

کيسے Feb 3, 2026

صفحہ 1 کا 2: صفحہ 1 صفحہ 1 ..

سنیما 4 ڈی میں بال کیسے بنائیں

کيسے Feb 3, 2026

کارلوس Ortega Elizalde اور Lois Van Baarle کے تصوراتی، بہترین کردار آرٹ کی طرف سے حوص�..

اقسام