Web Image Optimization Guide

වෙබ් රූප ආකෘති තේරුම් ගැනීම

නිවැරදි රූප ආකෘතිය තෝරා ගැනීම වෙබ් ප්‍රශස්තකරණයේ පදනම වේ. සෑම ආකෘතියක්ම විවිධ අරමුණු සඳහා සේවය කරන අතර අද්විතීය වාසි ලබා දෙයි. JPEG බොහෝ වර්ණ සහිත ඡායාරූප සහ සංකීර්ණ රූප සඳහා ඉතා යෝග්‍ය වන අතර, විශිෂ්ට සම්පීඩන අනුපාත පිරිනමන නමුත් පාඩු ලැබීමේ වියදමින්. PNG විනිවිදභාවය, තියුණු දාර සහ සීමිත වර්ණ පුවරු සහිත රූපවල විශිෂ්ට වන අතර, ගොනු ප්‍රමාණයන් විශාල වුවද එය ලාංඡන සහ චිත්‍රක සඳහා පරිපූර්ණ කරයි. WebP ඊළඟ පරම්පරාවේ වෙබ් පින්තූර නියෝජනය කරයි, උසස් තත්ත්වයේ පවත්වා ගනිමින් JPEG සහ PNG යන දෙකටම සාපේක්ෂව උසස් සම්පීඩනයක් සපයයි. එය පාඩු සහ පාඩු රහිත සම්පීඩනය, විනිවිදභාවය සහ සජීවිකරණය යන දෙකටම සහය දක්වයි. කෙසේ වෙතත්, බ්‍රවුසර සහාය, පුළුල් වුවද, විශ්වීය නොවේ. AVIF ඊටත් වඩා අලුත් වන අතර, JPEG වලට වඩා 50% දක්වා කුඩා සම්පීඩන අනුපාත පිරිනමයි, නමුත් බ්‍රවුසරය භාවිතා කිරීම තවමත් වර්ධනය වෙමින් පවතී. ලාංඡන, අයිකන සහ සරල රූප සටහන් වැනි දෛශික ග්‍රැෆික්ස් සඳහා, SVG අසමසම වේ. දෛශික ආකෘතියක් ලෙස, SVG රූප ගුණාත්මක නැතිවීමකින් තොරව අසීමිත ලෙස පරිමාණය වන අතර බොහෝ විට කුඩා ගොනු ප්‍රමාණ ඇත. ඒවා කේතය සමඟ සංස්කරණය කළ හැකි අතර අන්තර්ක්‍රියාකාරීත්වයට සහය වන අතර, ඒවා නවීන වෙබ් නිර්මාණ සඳහා ඇදහිය නොහැකි තරම් බහුකාර්ය කරයි.

• JPEG: ඡායාරූප සහ සංකීර්ණ රූප සඳහා හොඳම
• PNG: විනිවිදභාවය සහ තියුණු දාර සහිත ග්‍රැෆික්ස් සඳහා වඩාත් සුදුසුය
• WebP: උසස් සම්පීඩනය සහිත නවීන ආකෘතිය
• AVIF: සුවිශේෂී සම්පීඩනය සහිත නවතම ආකෘතිය
• SVG: පරිමාණය කළ හැකි දෛශික ග්‍රැෆික්ස් සහ අයිකන සඳහා පරිපූර්ණයි

රූප සම්පීඩන ශිල්පීය ක්‍රම සහ තත්ත්ව සැකසුම්

ගොනු ප්‍රමාණය සමඟ රූපයේ ගුණාත්මකභාවය තුලනය කිරීම සඳහා සම්පීඩනය අවබෝධ කර ගැනීම ඉතා වැදගත් වේ. JPEG වැනි ආකෘති මගින් භාවිතා කරන Lossy සම්පීඩනය, ගොනු ප්‍රමාණය අඩු කිරීමට රූප දත්ත ස්ථිරවම ඉවත් කරයි. ප්රධාන දෙය නම් පිළිගත හැකි දෘශ්ය ගුණාත්මක භාවය පවත්වා ගනිමින් සම්පීඩනය උපරිම වන මිහිරි ස්ථානය සොයා ගැනීමයි. බොහෝ වෙබ් පින්තූර සඳහා, 75-85% අතර JPEG තත්ත්ව සැකසුම විශිෂ්ට ශේෂයක් සපයයි, නමුත් මෙය රූප අන්තර්ගතය මත පදනම්ව වෙනස් විය හැක. PNG සහ සමහර WebP රූප මගින් භාවිතා කරන Lossless සම්පීඩනය, කිසිදු ගුණාත්මක අලාභයකින් තොරව ගොනු ප්‍රමාණය අඩු කරයි. මෙය පරමාදර්ශී ලෙස පෙනුනද, පාඩු රහිත ලිපිගොනු සාමාන්‍යයෙන් ඒවායේ පාඩු ලබන සගයන්ට වඩා විශාල වේ. මෙය ඉ-වාණිජ්‍යය සඳහා නිෂ්පාදන ඡායාරූප හෝ තවදුරටත් සංස්කරණය කෙරෙන පින්තූර වැනි ගුණාත්මක බව ප්‍රමුඛ වන රූප සඳහා පාඩු රහිත සම්පීඩනය වඩාත් සුදුසු වේ. උසස් සම්පීඩන ශිල්පීය ක්‍රමවලට ප්‍රගතිශීලී JPEG පැටවීම ඇතුළත් වන අතර, එය වැඩිවන ගුණාත්මක අවසරපත්‍රවල රූප පෙන්වයි, සහ මිනිස් ඇස්වලට සංවේදී නොවන වර්ණ තොරතුරු අඩු කරන ක්‍රෝමා උප නියැදීම ඇතුළත් වේ. නවීන මෙවලම් ද සංජානනීය ප්‍රශස්තකරණය ලබා දෙයි, මිනිස් ඇස වැඩිපුරම දකින දේ මත පදනම්ව සම්පීඩනය සකස් කරයි, බොහෝ විට සාම්ප්‍රදායික තත්ත්ව සැකසුම් වලට වඩා හොඳ ප්‍රතිඵල ලබා ගනී.

විභේදනය සහ ප්‍රතිචාරාත්මක රූප ප්‍රශස්තකරණය

නවීන වෙබ් නිර්මාණය ස්මාර්ට් ෆෝන් සිට 4K මොනිටර දක්වා සෑම දෙයකම හැපෙනසුළු පෙනුමක් ඇති රූප ඉල්ලා සිටී. ප්රධාන දෙය වන්නේ පික්සල් ඝනත්වය සහ උපාංග හැකියාවන් අවබෝධ කර ගැනීමයි. 1200px පළල රූපයක් ඩෙස්ක්ටොප් නැරඹීම සඳහා පරිපූර්ණ විය හැක, නමුත් එය 375px ජංගම තිරයක් සඳහා අධික ලෙස කිල් කරයි, කලාප පළල නාස්ති කිරීම සහ පැටවීමේ කාලය මන්දගාමී වේ. බහු රූප ප්‍රමාණයන් නිර්මාණය කිරීම සෑම උපාංගයකටම සුදුසු ප්‍රමාණයේ රූපයක් ලැබීම සහතික කරයි. තිර ප්‍රමාණය සහ විභේදනය මත පදනම්ව විවිධ රූප සැපයීම සඳහා ප්‍රතිචාරාත්මක රූප HTML හි srcset ගුණාංගය සහ පින්තූර මූලද්‍රව්‍යය භාවිතා කරයි. මෙම ක්‍රමය මගින් ජංගම දුරකථන භාවිතා කරන්නන් සඳහා 50% හෝ ඊට වැඩි ප්‍රමාණයකින් රූප ගෙවීම අඩු කළ හැක. උදාහරණයක් ලෙස, ඔබට ජංගම උපාංග සඳහා 400px රූපයක්, ටැබ්ලට් පරිගණක සඳහා 800px සහ ඩෙස්ක්ටොප් තිර සඳහා 1200px ලබා දිය හැක. රෙටිනා තිර වැනි අධි-ඝනත්ව සංදර්ශක සඳහා හැපෙනසුළු පෙනුම සඳහා 2x විභේදන රූප අවශ්‍ය වේ. රූපයේ ප්‍රමාණය ඔබේ වෙබ් අඩවියේ සැබෑ සංදර්ශක මානයන් ද සලකා බැලිය යුතුය. පරිශීලකයාගේ තිරය කුමක් වුවත්, 300px පළලින් දර්ශනය වන රූපයක් 1200px පළලක් අවශ්‍ය නොවේ. සෑම විටම පින්තූර ඒවායේ සැබෑ සංදර්ශක ප්‍රමාණය සඳහා ප්‍රශස්ත කරන්න, සහ විශාල ප්‍රමාණයේ රූප ලබා දෙනවාට වඩා කුඩා පරිමාණයන් හැසිරවීමට CSS භාවිතා කිරීම සලකා බලන්න.

කාර්ය සාධන බලපෑම සහ පැටවීමේ උපාය මාර්ග

පින්තූර සැලකිය යුතු ලෙස වෙබ් අඩවියේ ක්‍රියාකාරිත්වයට බලපායි, බොහෝ විට මුළු පිටු බරෙන් 50-70% නියෝජනය කරයි. පරිශීලක අත්දැකීමට සහ සෙවුම් යන්ත්‍ර ශ්‍රේණිගත කිරීම්වලට සෘජුවම බලපාන, මන්දගාමී පූරණය වන වෙබ් අඩවිවල ප්‍රධාන වැරදිකරුවන් අතර විශාල, ප්‍රශස්ත නොකළ පින්තූර වේ. පැටවීමේ කාලයෙහි සෑම අමතර තත්පරයකටම 32% දක්වා ඉහළ යා හැකි අතර, රූප ප්‍රශස්තකරණය ව්‍යාපාර-විවේචනාත්මක සලකා බැලීමක් කරයි. කම්මැලි පැටවීම යනු දර්ශන තොටට ඇතුළු වීමට ආසන්න වන තෙක් රූප පැටවීම ප්‍රමාද කරන ප්‍රබල තාක්‍ෂණයකි. මෙය ආරම්භක පිටු පැටවීමේ වේලාවන් නාටකාකාර ලෙස වැඩි දියුණු කරයි, විශේෂයෙන් රූපය අධික පිටු සඳහා. නවීන බ්‍රවුසරයන් loading=”lazy” ගුණාංගය සමඟ ස්වදේශීය කම්මැලි පැටවීම සඳහා සහය දක්වන අතර JavaScript පුස්තකාල වඩාත් දියුණු පාලනයක් සහ පුළුල් බ්‍රවුසර සහායක් සපයයි. රූප පූර්ව පූරණය කිරීමේ ක්‍රමෝපායන් මඟින් පරිශීලක අත්දැකීම වැඩිදියුණු කළ හැක. තීරනාත්මක ඉහළ-නැමුණු රූප වේගවත්ම පැටවීම සඳහා ප්‍රශස්ත කළ යුතු අතර, නැමීමට පහළින් ඇති පින්තූර කම්මැලි ලෙස පැටවිය හැක. සම්පූර්ණ විභේදන රූප පූරණය වන අතරතුර ක්ෂණික දෘශ්‍ය ප්‍රතිපෝෂණ සැපයීමට අඩු ගුණාත්මක රූප ස්ථාන දරණ (LQIP) හෝ නොපැහැදිලි සිට තියුණු බලපෑම් භාවිතා කිරීම සලකා බලන්න. ප්‍රගතිශීලී JPEG කේතනය මඟින් අඩු ගුණාත්මක භාවයෙන් රූප ඉක්මනින් දිස් වීමට ඉඩ සලසයි, පසුව වැඩි දත්ත පැටවීමක් ලෙස තියුණු වේ.

SEO සහ ප්‍රවේශ්‍යතා සලකා බැලීම්

සෙවුම් යන්ත්‍ර පිටු වේගය ශ්‍රේණිගත කිරීමේ සාධකයක් ලෙස සලකයි, SEO සාර්ථකත්වය සඳහා රූප ප්‍රශස්තිකරණය තීරණාත්මක කරයි. නිසි ලෙස ප්‍රශස්තිකරණය කරන ලද පින්තූර වඩා හොඳ සෙවුම් ශ්‍රේණිගත කිරීම් සහ පරිශීලක අත්දැකීම් සඳහා දායක වෙමින් පිටු වේගයෙන් පූරණය කිරීමට උපකාරී වේ. අතිරේකව, රූප ගොනු නාම සහ විකල්ප පෙළ සෙවුම් යන්ත්‍ර සඳහා වටිනා සන්දර්භයක් සපයන අතර, ඔබේ අන්තර්ගතය රූප සෙවුම් ප්‍රතිඵලවල දිස්වීමට උදවු කරයි. ප්‍රවේශ්‍යතාව සඳහා තිර කියවන්නන් සහ දෘශ්‍යාබාධිත පරිශීලකයින් සඳහා රූප අන්තර්ගතය විස්තර කරන කල්පනාකාරී විකල්ප පෙළ අවශ්‍ය වේ. විකල්ප පෙළ විස්තරාත්මක නමුත් සංක්ෂිප්ත විය යුතුය, රූපයේ ඇති දේ සහ එහි අරමුණ සන්දර්භය තුළ පැහැදිලි කරයි. තොරතුරු වටිනාකමක් එකතු නොකරන අලංකාර රූප සඳහා, තිර කියවනය අනවශ්‍ය ලෙස ප්‍රකාශ කිරීම වැළැක්වීමට හිස් alt ගුණාංග (alt=””) භාවිතා කරන්න. ව්‍යුහගත දත්ත සහ යෝජනා ක්‍රම සලකුණු මඟින් සෙවුම් යන්ත්‍ර ඔබේ පින්තූර තේරුම් ගන්නා සහ ප්‍රදර්ශනය කරන ආකාරය වැඩිදියුණු කළ හැක. නිසි රූප අඩවි සිතියම් සෙවුම් යන්ත්‍රවලට ඔබේ පින්තූර වඩාත් ඵලදායී ලෙස සොයා ගැනීමට සහ සුචිගත කිරීමට උදවු කරයි. “red-running-shoes-front-view.jpg” වැනි විස්තරාත්මක නම් වලට පක්ෂව “image1.jpg” වැනි සාමාන්‍ය නම් මග හැර, ගොනු නම් කිරීමේ සම්මුතීන් අදාළ වන විට විස්තරාත්මක සහ මූල පද වලින් පොහොසත් විය යුතුය.