වෙබ් බ්රවුසරයේම පවතින කුඩා පරිසරයක් තුළ PNG හෝ JPEG ගොනුවක් ඇදගෙන, WebP හෝ AVIF ආකාරයට පරිවර්තනය කරන උපාය මෘදුකාංගයක් නිර්මාණය කරමින් සිටියදී, අපි අසමත් බවක් නොදැක්කාම ගොනුවක් බාගත වීමේ සිදුවීමක් සොයාගත්තෙමු.
මෙම පරිවර්තකයේ මූලික අදහස වන්නේ, රූපය බ්රවුසරයෙන් පිටතට යාමක් නොකර, සෘජුව canvas වෙත ඇඳීම, එය ඉලක්ක ආකාරයට encode කර Blob එකක් ලබා ගැනීමයි. කේතය සරලයි: createImageBitmap (ඇත්නම්) භාවිතා කර bitmap එකක් ලබාගෙන, canvas.getContext('2d') සමඟ drawImage කර, පසුසේ canvas.toBlob(callback, mimeType, quality) කියා ඉල්ලීමක් දමා අවශ්ය ආකාරයේ Blob එකක් ගන්නා විදිහ.
ඒත් මෙහි වැදගත් ගැටලුවක් තිබේ. බ්රවුසරය ඔබ ඉල්ලූ mime type (උදා: image/webp හෝ image/avif) encode නොකළහොත්, දෝෂයක් හෝ ප්රතිඵලයක් නැතිව PNG ආකාරයට පසුබැසී, callback එකට PNG Blob එකක් ලබා දේ. කන්සෝලයේ හෝ promise එකේ කිසිදු reject නොවීම නිසා, මෙම අසාර්ථකතාවය පාරිභෝගිකයාට පෙනෙන්නේ නැත.
මෙම නිශ්ශබ්ද PNG පසුබැසීමේ ප්රතිඵලය, පරිවර්තකයේ ප්රධාන අරමුණ – “අඩු ප්රමාණයේ නවීන ආකාරයේ රූපයක් ලබා දීම” – සම්පූර්ණයෙන්ම අහෝසි කරයි. AVIF සහ WebP වැනි ආකාරයන් PNG තරම් බර නොවී, ඡායාරූප අඩු කරයි. PNG වෙත පසුබැසීමේදී බාගත කරන ගොනුව මුලින් තිබූ ගොනුවට වඩා බර වීමට ඉඩ ඇත, එමෙන්ම පරිශීලකයා “කුඩා ගොනුවක් ලැබුනා” යන වැරදි හැඟීමක් දැනේ.
ශ්රී ලංකාවට ඇති වැදගත්කම
- ඩිවලොපර්ලා – බ්රවුසරයේ encode හැකියාව පරීක්ෂා නොකර code ලියන විට, අනිසි PNG ගොනු නිර්මාණය කර, පාරිභෝගික අත්දැකීම අඩු කරයි.
- විද්යාල/විශ්වවිද්යාල සිසුන් – වෙබ් පදනම් පරිවර්තන වැඩපිළිවෙළක් ඉගෙන ගත හැකි නමුත්, නිශ්ශබ්ද fallback ගැන නොදැනීමෙන් වැරදි අවබෝධයක් ගොඩනඟයි.
- ව්යාපාරිකයන් – වෙබ් අඩවි හෝ e‑commerce පණිවිඩයන්හි රූප සම්පීඩනයේ වැරදි encoding නිසා ලොඩ් වේගය අඩු වීම, පාරිභෝගික අතුරුදන් වීම වැනි ව්යාපාරික අලාභයක් සිදුවේ.
- ඉදිරි කාලීන ව්යාපෘති – encode support වෙනස් වන බැවින්, browser/version matrix එකක් තැනීමේ අවශ්යතාවය පවතී; එය අත්යවශ්ය තාක්ෂණික අධ්යයනයක්.
මෙම ගැටලුවට විසඳුම සරලයි: canvas.toBlob වෙතින් ලැබෙන Blob එකේ type ගුණය පරීක්ෂා කර, ඉල්ලූ mime type එකට නොගැලපේ නම් error එකක් throw කර UI එකේ “ඔබේ බ්රවුසරය මෙම ආකාරය encode කළ නොහැක” යන පණිවිඩයක් පෙන්වන්න. මෙයින් පරිශීලකයාට සැබෑ තොරතුරු ලැබෙන අතර, අධික බාගත ගොනු ප්රමාණය ගැන අසමත් නොවෙයි.
අවසන් වශයෙන්, client‑side image conversion භාවිතා කරන ඕනෑම ව්යාපෘතියක, encode fallback පිළිබඳ අවධානයක් දී, නිවැරදි error handling එක් කිරීම අත්යවශ්ය වේ. එසේ නොකළහොත්, “නිශ්ශබ්ද PNG fallback” ඔබේ පරිශීලක අත්දැකීමේ සීග්රමය පරාජය කරනු ඇත.
