ከመለጠፍ በፊት ፎቶዎችን ማሳነስ
ስልኮች ፎቶዎችን እንደ 4-8 MB JPG ወይም HEIC ያስቀምጣሉ። እንደ WebP በ 75% ጥራት ዳግም ኢንኮድ ማድረግ ያንን ወደ ~1 MB ያለ የሚታይ ኪሳራ ይቀንሳል — ለብሎግ ልጥፎች፣ የመድረክ ስቀላዎች እና ኢሜይል ፍጹም።
PNG, JPG, WebP እና AVIFን ይቀይሩ — ይጎትቱ፣ ይጣሉ፣ ያውርዱ። ሁሉም ነገር በአሳሽዎ ውስጥ ይሄዳል፤ የምስል ባይቶች ከትርዎ ፈጽሞ አይወጡም።
PNG, JPG, WebP እና AVIFን ይቀይሩ — ይጎትቱ፣ ይጣሉ፣ ያውርዱ። ሁሉም ነገር በአሳሽዎ ውስጥ ይሄዳል፤ የምስል ባይቶች ከትርዎ ፈጽሞ አይወጡም።
አይ። መሳሪያው በሙሉ በዚህ ገጽ ውስጥ የሚሄድ JavaScript ነው። ምስሉ በ createImageBitmap ይፈታል፣ በ canvas ላይ ይሳላል እና በ canvas.toBlob ዳግም ኢንኮድ ይደረጋል — እያንዳንዱ ደረጃ በአሳሽ-አካባቢ ነው። DevTools → Networkን ይክፈቱ እና ይመልከቱ፦ ሲቀየር አንድም ጥያቄ አይተኮስም። ለግል ፎቶዎች፣ ቅጽበታዊ ገጽ እይታዎች፣ የንድፍ ፋይሎች እና ሚስጥራዊ ሰነዶች ደህና።
PNG ኪሳራ የለሽ ነው — እያንዳንዱን ፒክሰል በትክክል ያስቀምጣል። JPG ኪሳራ ያለው እና ለስላሳ ሽግግሮች ላሉ ፎቶዎች ምርጥ ነው። PNGዎ ቅጽበታዊ ገጽ እይታ፣ የመስመር ጥበብ ወይም ብዙ ጠንካራ የቀለም ብሎኮች ካለው JPG በትክክል ከ PNG የበለጠ መጥፎ ይጨመቃል እና ፋይሉ ይበልጣል። ለቅጽበታዊ ገጽ እይታዎች እና UI ንብረቶች በ PNG ይቆዩ ወይም WebPን ይጠቀሙ። JPG ለፎቶግራፎች ያበራል።
ፎቶዎች ቦታ እና ፊቶችን ይይዛሉ፣ ቅጽበታዊ ገጽ እይታዎች ምስክርነቶችን ሊይዙ ይችላሉ፣ የንድፍ ኮምፖች ያልታወጁ የምርት ባህሪያት ናቸው። ከእነዚህ ውስጥ ማንኛውንም በሌላ ሰው አገልጋይ ላይ መለጠፍ ጸጥ ያለ የውሂብ መፍሰስ ነው። የ iKit መቀየሪያ በአሳሽ ትርዎ ውስጥ አስቀድሞ የተጫነ JavaScript ነው።
ለንድፍ አውጪዎች፣ ገንቢዎች እና የተሳሳተ የፋይል ቅርጸት እንዳላቸው ለተነገራቸው ሁሉ ተገንብቷል — በሁለት ጠቅታ ይቀይሩ፣ በአገልጋይ ላይ ሳይጠብቁ።
PNG, JPG, WebP እና AVIF — በማንኛውም አቅጣጫ ይቀይሩ። የተደባለቁ ቅርጸቶች ያሉበትን አቃፊ ይጣሉ እና ሁሉም ወደ አንድ የታለመ ቅርጸት በአንድ ጊዜ ይቀየር።
በምስል ኪሳራ ቅርጸቶች (JPG / WebP / AVIF) ላይ ጥራትን ከ40% እስከ 100% በቀጥታ መቆጣጠሪያ ያስተካክሉ። PNG ሁልጊዜ ፒክሰል-ፍጹም ኪሳራ የለሽ ነው።
ለውጡ በአሳሽዎ ውስጥ በ canvas API በኩል ይከሰታል። ምንም ስቀላ የለም፣ ምንም ምዝግብ ማስታወሻ የለም፣ ምንም ሶስተኛ ወገን የለም። በ DevTools → Network ሊረጋገጥ ይችላል፦ ዜሮ ጥያቄዎች።
WebP እና AVIF በተመሳሳይ ጥራት ከ JPG/PNG ከ25-50% ያነሱ ፋይሎችን ብዙ ጊዜ ያመነጫሉ። AVIF ኢንኮድ ለማድረግ Chrome 85+ ወይም Safari 16.4+ ይፈልጋል፤ ባህሪውን እንመረምራለን እና እንነግርዎታለን።
በአንድ ጊዜ በደርዘን የሚቆጠሩ ምስሎችን ይቀይሩ፣ ከዚያ "ሁሉንም አውርድ" ላይ ጠቅ ያድርጉ ለማስቀመጥ። እያንዳንዱ ፋይል የመጀመሪያ ስሙን ከአዲሱ ቅጥያ ጋር ያቆያል።
ገጹ ከተጫነ በኋላ ሁሉም ለውጥ በአካባቢው ነው — በአውሮፕላን፣ በባቡር፣ በድርጅት ፋየርዎል ጀርባ ወይም አውታረ መረቡ ሳይገናኝ ይሰራል።
በዚህ ዑደት ውስጥ ምንም አገልጋይ የለም — አሳሽዎ የምንፈልጋቸውን ሁሉንም ኮዴኮች አስቀድሞ ያመጣል።
createImageBitmap(file)ን እንጠራለን፣ ይህም ጥሬ ባይቶችን ወደ ሊሳል የሚችል bitmap ለመለወጥ የአሳሹን ቤተኛ የምስል ኮዴክ ይጠቀማል። PNG, JPG, WebP, AVIF, GIF, BMP — <img> ሊያሳይ የሚችለው ሁሉ ይህ ሊፈታ ይችላል።
አዲስ <canvas> በምስሉ ተፈጥሯዊ ስፋት × ቁመት ይመጠናል እና bitmap በሙሉ ጥራት ይሳላል። ምንም ድጋሚ ናሙና የለም፣ ምንም መጠን መቀየር የለም — ፒክሰል-ለ-ፒክሰል።
canvas.toBlob('image/webp', 0.82) የ canvas ፒክሰሎችን ለተመረጠው ቅርጸት ለአሳሹ ኢንኮደር ያስረክባል እና Blob ይመልሳል። የ MIME ሕብረቁምፊው በቅርጸቶች መካከል የምንቀይረው ብቸኛው ነገር ነው።
URL.createObjectURL(blob)ን እንጠራለን አካባቢያዊ URL ለማግኘት፣ ለማውረጃ መልህቅ እናስራዋለን እና ተጠቃሚው አውታረ መረቡን ፈጽሞ ያልነካ ፋይል ያገኛል።
የምስል መቀየሪያን የሚደርሱባቸው እውነተኛ ሁኔታዎች።
ስልኮች ፎቶዎችን እንደ 4-8 MB JPG ወይም HEIC ያስቀምጣሉ። እንደ WebP በ 75% ጥራት ዳግም ኢንኮድ ማድረግ ያንን ወደ ~1 MB ያለ የሚታይ ኪሳራ ይቀንሳል — ለብሎግ ልጥፎች፣ የመድረክ ስቀላዎች እና ኢሜይል ፍጹም።
አንዳንድ CMSዎች (እና ብዙ የቢሮ መተግበሪያዎች) ከ alpha ጋር PNGዎችን አይቀበሉም ወይም በእንግዳ የጀርባ ፍሰት ያቀርቧቸዋል። ጠፍጣፋ ዳራ ካለው ወደ JPG ይቀይሩ፣ ይለጥፉ፣ ተጠናቀቀ።
የእርስዎን logo.png እና hero.jpg በ WebP / AVIF ስሪቶች ይተኩ እና በ <picture> በኩል ያቅርቡ። የ Lighthouse ውጤቶች ይዘላሉ፣ LCP ይወድቃል፣ ለዓይን የሚታይ የጥራት ኪሳራ የለም።
24 MB የንድፍ ኮምፕ PNG አግኝተዋል? ድሩ ያንን አያስፈልገውም። ወደ JPG በ 88% ይቀይሩ — በተለምዶ 1-2 MB እና በስሜት ህዋሳዊ ተመሳሳይ፣ የመጠን በጀቱ ተመልሷል።
ፎቶዎች ቦታ እና ፊቶችን ይይዛሉ፣ ቅጽበታዊ ገጽ እይታዎች ምስክርነቶችን ሊይዙ ይችላሉ፣ የንድፍ ኮምፖች ያልታወጁ የምርት ባህሪያት ናቸው። ከእነዚህ ውስጥ ማንኛውንም በሌላ ሰው አገልጋይ ላይ መለጠፍ ጸጥ ያለ የውሂብ መፍሰስ ነው። የ iKit መቀየሪያ በአሳሽ ትርዎ ውስጥ አስቀድሞ የተጫነ JavaScript ነው።
ከ iKit ብሎግ ጥልቅ ትምህርቶች እና የመሳሪያ ንፅፅሮች።
When converting to a smaller format isn't enough — true lossless and visually lossless PNG compression in the browser.
Batch-compress dozens of images and bundle them into a single ZIP — no upload, no watermark.
አይ። መሳሪያው በሙሉ በዚህ ገጽ ውስጥ የሚሄድ JavaScript ነው። ምስሉ በ createImageBitmap ይፈታል፣ በ canvas ላይ ይሳላል እና በ canvas.toBlob ዳግም ኢንኮድ ይደረጋል — እያንዳንዱ ደረጃ በአሳሽ-አካባቢ ነው። DevTools → Networkን ይክፈቱ እና ይመልከቱ፦ ሲቀየር አንድም ጥያቄ አይተኮስም። ለግል ፎቶዎች፣ ቅጽበታዊ ገጽ እይታዎች፣ የንድፍ ፋይሎች እና ሚስጥራዊ ሰነዶች ደህና።
PNG ኪሳራ የለሽ ነው — እያንዳንዱን ፒክሰል በትክክል ያስቀምጣል። JPG ኪሳራ ያለው እና ለስላሳ ሽግግሮች ላሉ ፎቶዎች ምርጥ ነው። PNGዎ ቅጽበታዊ ገጽ እይታ፣ የመስመር ጥበብ ወይም ብዙ ጠንካራ የቀለም ብሎኮች ካለው JPG በትክክል ከ PNG የበለጠ መጥፎ ይጨመቃል እና ፋይሉ ይበልጣል። ለቅጽበታዊ ገጽ እይታዎች እና UI ንብረቶች በ PNG ይቆዩ ወይም WebPን ይጠቀሙ። JPG ለፎቶግራፎች ያበራል።
JPG፦ ሁለንተናዊ ተኳዃኝነት (እያንዳንዱ መሣሪያ፣ እያንዳንዱ CMS)፣ ለፎቶዎች ጥሩ ነው። WebP፦ በእኩል ጥራት ከ JPG ~25% ያነሰ፣ በሁሉም ዘመናዊ አሳሾች ይደገፋል፣ ደህንነቱ የተጠበቀ "ከ JPG-የተሻለ" ምርጫ። AVIF፦ ከ WebP ሌላ 20-30% ያነሰ፣ ግን ኢንኮዲንግ ቀርፋፋ ነው እና Chrome/Safari/Firefox ብቻ ይፈቱታል (Safari 16.4+ ይፈልጋል)። `
በ canvas.toBlob በኩል AVIF ኢንኮዲንግ Chrome 85+, Safari 16.4+ ወይም የቅርብ ጊዜ Firefox (image.avif.compliance_strictness ሲቀየር) ይፈልጋል። መፍታት (ማሳያ) በስፋት ይደገፋል፣ ግን AVIFን መጻፍ የተገነባ ኢንኮደር ይፈልጋል። iKit ባህሪውን ይመረምራል እና አሳሽዎ ኢንኮድ ማድረግ ካልቻለ አማራጩን ያሰናክላል። መፍትሄ፦ ወደ WebP ይቀይሩ ወይም በ Chromium ላይ የተመሰረተ አሳሽ ይጠቀሙ።
PNG, WebP እና AVIF ሁሉ የ alpha-ቻናል ግልጽነትን ይይዛሉ። JPG አይይዝም — ግልጽ PNGን ወደ JPG መቀየር ዳራውን በነጭ (ወይም canvas በነባሪነት በሚያቀርበው) ይሞላዋል። ግልጽነት ከፈለጉ ወደ WebP ወይም PNG ይቀይሩ፣ በፍጹም ወደ JPG አይቀይሩ።