બ્રાઉઝર-આધારિત ઇમેજ કૉમ્પ્રેશન કેવી રીતે કાર્ય કરે છે
દરેક કૉમ્પ્રેશન પાસ સંપૂર્ણપણે JavaScript માં ચાલે છે. કોઈ codec લાઇબ્રેરી ડાઉનલોડ થતી નથી અને કોઈ સર્વર સામેલ થતું નથી. બ્રાઉઝરની પોતાની Canvas API છબીને ડિકોડ કરે છે, તેને ઓછી ગુણવત્તાએ રી-એન્કોડ કરે છે, અને તમને એક Blob સોંપે છે જેને પૃષ્ઠ પૂર્વાવલોકન કરી શકે, ડાઉનલોડ કરી શકે અથવા zip કરી શકે. કારણ કે દરેક પગલું ટેબના sandbox ની અંદર જ રહે છે, મૂળ ફાઇલો ક્યારેય નેટવર્ક સુધી પહોંચતી નથી.
- દરેક અપલોડ થયેલી ફાઇલને Blob તરીકે વાંચે છે અને એક object URL બનાવે છે જેથી બ્રાઉઝર બાઇટ્સને સર્વર પર કૉપિ કર્યા વગર અથવા ડિસ્ક પર લખ્યા વગર તેને સ્થાનિક રીતે ડિકોડ કરી શકે.
- ડિકોડ થયેલી છબીને તેના મૂળ પિક્સેલ પરિમાણો પર એક offscreen Canvas એલિમેન્ટ પર દોરે છે, જે રી-એન્કોડિંગ માટે તૈયાર હોય છે.
- પિક્સેલને રી-એન્કોડ કરવા માટે
canvas.toBlob(callback, mimeType, quality)કૉલ કરે છે. ગુણવત્તા મોડમાં સ્લાઇડરનું મૂલ્ય સીધું એન્કોડરની quantization સેટિંગ સાથે મેપ થાય છે; લક્ષ્ય-કદ મોડમાં પૃષ્ઠ ગુણવત્તા મૂલ્યને ત્યાં સુધી દ્વિભાજિત કરે છે જ્યાં સુધી આઉટપુટ blob તમારા બાઇટ બજેટની નીચે ન બેસે. - મૂળ કદ, કૉમ્પ્રેસ કરેલું કદ અને બચત ટકાવારી સાથે એક પહેલાં/પછીનું રીડઆઉટ બતાવે છે, પછી દરેક છબી માટે ડાઉનલોડ અથવા આખા બેચ માટે એક જ ZIP આપે છે. ZIP fflate નો ઉપયોગ કરીને મેમરીમાં બનાવાય છે, જે પ્રથમ ઉપયોગ પર લોડ થતી 8 KB ની એક લાઇબ્રેરી છે.
છબીઓ શા માટે કૉમ્પ્રેસ કરવી?
- નાની છબીઓ ઝડપથી લોડ થાય છે. એક 4 MB હીરો છબીને 600 KB સુધી કાપવાથી Largest Contentful Paint સીધી રીતે સુધરે છે, જે Google રેન્કિંગ માટે વાપરતા Core Web Vitals પૈકી એક છે. અનેક ફોટો વાળા પૃષ્ઠ પર આ બચત ભેગી થઈને ઝડપી પ્રથમ paint બને છે.
- અપલોડ અને જોડાણ મર્યાદાઓ બધે જ છે. ઘણા CMS પ્લેટફોર્મ, ટિકિટિંગ ટૂલ અને ઇમેઇલ સિસ્ટમ 1 અથવા 2 MB થી મોટી ફાઇલો નકારે છે. એક ઝડપી કૉમ્પ્રેશન પાસ આખું એડિટર ખોલ્યા વગર ફોટોને મર્યાદાની નીચે લાવે છે.
- મોટા પાયે બેન્ડવિડ્થ અને સ્ટોરેજ પૈસા ખર્ચે છે. પૂર્ણ-કદના PNG ને બદલે 0.8 ગુણવત્તાએ WebP મોકલવાથી છબી પેલોડ એક તૃતીયાંશ અથવા વધુ ઘટી શકે છે, જે તમારા મુલાકાતીઓ માટે CDN egress બિલ અને મોબાઇલ ડેટા વપરાશ ઘટાડે છે.
- સંવેદનશીલ છબીઓ માટે ગોપનીયતા મહત્ત્વની છે. કારણ કે અહીં બધું તમારા બ્રાઉઝરમાં ચાલે છે, ID સ્કૅન, મેડિકલ છબીઓ અને આંતરિક સ્ક્રીનશોટ તમારા ઉપકરણ પર જ રહે છે — ચિંતા કરવા માટે TinyPNG જેવા કોઈ તૃતીય-પક્ષ સર્વર પર કોઈ અપલોડ થતું નથી.
સામાન્ય ઉપયોગ
જ્યારે પણ કોઈ છબી તે જ્યાં જઈ રહી છે તે જગ્યા કરતાં મોટી હોય ત્યારે કૉમ્પ્રેશન ઊભું થાય છે. ત્રણ pattern જે અમે વારંવાર જોઈએ છીએ.
- કોઈ ઑનલાઇન સ્ટોર માટે ઉત્પાદન ફોટો તૈયાર કરવા. JPEG મૂળને 0.8 ગુણવત્તાએ (અથવા 200 KB લક્ષ્યે) કૉમ્પ્રેસ કરાય છે જેથી સ્ટોરફ્રન્ટ ઝડપી રહે અને મોબાઇલ પર Core Web Vitals પાર કરે.
- કોઈ bug tracker અથવા wiki સાથે જોડતા પહેલાં સ્ક્રીનશોટ નાના કરવા. 0.85 ગુણવત્તાએ JPEG માં રૂપાંતરિત કરેલા PNG કેપ્ચરનો એક બેચ ઘણીવાર દસેક મેગાબાઇટથી ઘટીને એક-બે મેગાબાઇટ રહી જાય છે.
- કોઈ ફોટોને અપલોડ મર્યાદાની નીચે લાવવો — એક નોકરી અરજી પોર્ટલ જે 1 MB થી મોટી ફાઇલો નકારે છે, ઘટ્ટ જોડાણ મર્યાદા વાળી એક ઇમેઇલ સિસ્ટમ, અથવા એક ફોરમ અવતાર જેને બાઇટ બજેટમાં બેસવાનું હોય.
એક વ્યવહારુ ઉદાહરણ: 4 MB JPEG થી 400 KB
ફોન કૅમેરામાંથી સીધો આવેલો 4 MB JPEG એક સામાન્ય પેલોડ છે જે અપલોડ મર્યાદાઓમાં અટકે છે અને પૃષ્ઠ ધીમું કરે છે. કૉમ્પ્રેશન શું બચાવે છે તેના માટે એ એક યોગ્ય માપદંડ છે.
JPEG ને અપલોડ ઝોનમાં મૂકો, ફૉર્મૅટ JPEG પર જ રાખો, અને કાં તો ગુણવત્તા સ્લાઇડરને 0.7 સુધી નીચે ખેંચો અથવા લક્ષ્ય-કદ મોડ પર સ્વિચ કરીને 400 KB ટાઇપ કરો. ગુણવત્તા મોડમાં Canvas પાઇપલાઇન એક વાર રી-એન્કોડ કરે છે અને પરિણામ બતાવે છે, ફોટોના આધારે સામાન્ય રીતે 500 થી 700 KB ની વચ્ચે. લક્ષ્ય-કદ મોડમાં પૃષ્ઠ થોડાં ગુણવત્તા મૂલ્યો અજમાવે છે, સૌથી ઊંચા મૂલ્ય પર ઠરે છે જે હજુ પણ 400 KB ની નીચે બેસે છે, અને બચત ટકાવારી જણાવે છે. એક ફાઇલ મેળવવા માટે કાર્ડ પર Download ક્લિક કરો, અથવા જો તમે એક જ વારમાં અનેક છબીઓ કૉમ્પ્રેસ કરી હોય તો Download .zip ક્લિક કરો. આ કદની છબી માટે આખો round-trip એક સેકંડ કરતાં ઘણો ઓછા સમયમાં ચાલે છે અને પૃષ્ઠ પોતે લોડ થઈ ગયા પછી શૂન્ય બેન્ડવિડ્થ વાપરે છે.
ગુણવત્તા મોડ અને લક્ષ્ય-કદ મોડ વચ્ચે શું તફાવત છે?
ગુણવત્તા મોડ તમને 0.1 થી 1.0 સુધી એક સ્લાઇડર આપે છે જે JPEG અથવા WebP એન્કોડરની quantization સેટિંગ સાથે મેપ થાય છે — ઓછી સંખ્યા એટલે નાની ફાઇલો અને વધુ દૃશ્યમાન artifacts. લક્ષ્ય-કદ મોડ સમસ્યાને ઊલટાવી દે છે: તમે કિલોબાઇટમાં એક કદ જણાવો છો અને પૃષ્ઠ ગુણવત્તા મૂલ્યને દ્વિભાજિત કરે છે, થોડી વાર એન્કોડ કરતું જ્યાં સુધી તે સૌથી ઊંચી ગુણવત્તા ન શોધી લે જે હજુ પણ તમારા બજેટની નીચે બેસે. લક્ષ્ય-કદ ત્યારે કામ આવે છે જ્યારે એક કઠોર મર્યાદા મહત્ત્વની હોય (ધારો કે 1 MB ની અપલોડ મર્યાદા); ગુણવત્તા મોડ ઝડપી છે અને ત્યારે વધુ સારો જ્યારે તમને ફક્ત એક અનુમાનિત દૃશ્ય પરિણામ જોઈતું હોય. PNG લૉસલેસ છે, તેથી બેમાંથી કોઈ મોડ તેને લાગુ પડતો નથી.
શું આ મારા ડિવાઇસ પર થાય છે?
હા, સંપૂર્ણપણે. પૃષ્ઠ દરેક છબીને મેમરીમાં ડિકોડ અને રી-એન્કોડ કરવા માટે બ્રાઉઝરની મૂળ Canvas API અને Web File API વાપરે છે. કોઈ છબી ડેટા સર્વર પર મોકલાતો નથી, કોઈ કામચલાઉ અપલોડ નહીં, કોઈ cloud round-trip નહીં. તમે જાતે ચકાસી શકો છો: DevTools ખોલો, Network panel પર સ્વિચ કરો, અને એક કૉમ્પ્રેશન ચલાવો. તમને દેખાશે એ એકમાત્ર બહારની વિનંતીઓ પ્રારંભિક પૃષ્ઠ લોડ અને જાહેરાત કૉલ હશે. છબી-આકારની કોઈ વસ્તુ ટેબ છોડતી નથી.
PNG કૉમ્પ્રેસ કરવાથી ક્યારેક તે ભાગ્યે જ કેમ નાનો થાય છે?
PNG એક લૉસલેસ ફૉર્મૅટ છે, તેથી Canvas API તેને નાનો કરવા માટે વિગતો ફેંકી શકતી નથી — તે ફક્ત એ જ પિક્સેલ ફરી પેક કરી શકે છે. ફોટોગ્રાફ માટે, PNG પહેલેથી જ મોટો હોય છે અને લૉસલેસ રી-એન્કોડ બહુ ઓછું બચાવે છે. ખરો ફાયદો આઉટપુટ ફૉર્મૅટ JPEG અથવા WebP માં બદલવાથી આવે છે, જે ફોટો માટે યોગ્ય lossy કૉમ્પ્રેશન વાપરે છે અને નિયમિતપણે 4 થી 10 ગણા નાના પડે છે. PNG ફક્ત ત્યારે જ રાખો જ્યારે તમને લૉસલેસ ગુણવત્તા અથવા પારદર્શકતા જોઈએ; નહીંતર ફોટો માટે JPEG અથવા શ્રેષ્ઠ કદ-થી-ગુણવત્તા સંતુલન માટે WebP પસંદ કરો.
મારે કયું ફૉર્મૅટ પસંદ કરવું જોઈએ?
ફોટોગ્રાફ માટે, 0.8 ગુણવત્તાએ WebP શ્રેષ્ઠ કદ-થી-ગુણવત્તા સંતુલન આપે છે અને 2021 થી મોકલાયેલા દરેક બ્રાઉઝર દ્વારા સમર્થિત છે; જ્યારે કોઈ ગંતવ્ય જૂનું અથવા વધુ કડક હોય ત્યારે JPEG સલામત સાર્વત્રિક વિકલ્પ છે. PNG ફક્ત ત્યારે જ પસંદ કરો જ્યારે તમને લૉસલેસ ગુણવત્તા અથવા એક આલ્ફા ચૅનલ જોઈએ — line art, UI સ્ક્રીનશોટ, પારદર્શકતા વાળા logo. જો તમે પૃષ્ઠ ગતિ માટે ઑપ્ટિમાઇઝ કરી રહ્યા હો અને તમારા પ્રેક્ષકો આધુનિક બ્રાઉઝર વાપરતા હોય, તો WebP લગભગ હંમેશા સાચી પસંદગી છે; જો તમે કોઈ જૂના CMS અથવા WebP નકારતી પ્રિન્ટ પાઇપલાઇનને આપી રહ્યા હો, તો JPEG સાથે જ રહો.
તમારી છબીઓ મૂકો, એક ગુણવત્તા સ્તર અથવા લક્ષ્ય કદ પસંદ કરો, કૉમ્પ્રેસ કરો. બધું તમારા ટેબમાં ચાલે છે. કોઈ અપલોડ નહીં, કોઈ ખાતું નહીં, સર્વર કતારની કોઈ રાહ નહીં.