બ્રાઉઝર-આધારિત ઇમેજ કન્વર્ઝન કેવી રીતે કાર્ય કરે છે
દરેક કન્વર્ઝન એ તમારા બ્રાઉઝરમાં ચાલતી ચાર-પગલાની પાઇપલાઇન છે. JPEG અને PNG માટે બ્રાઉઝરનું પોતાનું Canvas API સીધું એન્કોડ સંભાળે છે. Safari પર WebP અને દરેક બ્રાઉઝર પર AVIF માટે પેજ માંગ પર એક હળવું WebAssembly કોડેક લોડ કરે છે — તેમ છતાં બધું સ્થાનિક, તમારી ઇમેજ ક્યારેય ઉપકરણ છોડતી નથી.
- દરેક અપલોડ થયેલી ફાઇલને Blob તરીકે વાંચે છે અને એક object URL બનાવે છે જેથી બ્રાઉઝર બાઇટ્સને સર્વર પર કૉપિ કર્યા વગર અથવા ડિસ્ક પર સંગ્રહ્યા વગર, સ્થાનિક રીતે તેને ડિકોડ કરી શકે.
- ડિકોડ થયેલી છબીને એક ઑફસ્ક્રીન Canvas એલિમેન્ટ પર દોરે છે, મૂળ પાસા-ગુણોત્તર જાળવી રાખીને કોઈ પણ રીસાઇઝ મર્યાદા લાગુ કરે છે. જો તમે મહત્તમ પહોળાઈ અથવા મહત્તમ પરિમાણ પસંદ કર્યું હોય, તો અહીં જ ડાઉનસ્કેલ થાય છે.
- PNG, JPEG અને Chrome/Firefox WebP માટે પિક્સેલ ફરીથી એન્કોડ કરવા
canvas.toBlob(callback, targetMimeType, quality)કૉલ કરો. Safari WebP અને AVIF એન્કોડિંગ માટે, પ્રથમ ઉપયોગ પર WebAssembly કોડેક વર્કર લોડ થાય છે અને બેકગ્રાઉન્ડ થ્રેડમાં એન્કોડ સંભાળે છે. PNG આઉટપુટ હંમેશા લોસલેસ છે; JPEG, WebP અને AVIF ગુણવત્તા સ્લાઇડરનું પાલન કરે છે, જે સીધું એન્કોડરની ક્વોન્ટાઇઝેશન સેટિંગ પર મેપ થાય છે. - આઉટપુટ પરિમાણો અને ફાઇલ કદ સાથે પહેલાં/પછીનું થંબનેલ બતાવે છે, પછી દરેક છબી માટે ડાઉનલોડ બટન અથવા આખા બેચ માટે એક જ ZIP આપે છે. ZIP fflate નો ઉપયોગ કરીને મેમરીમાં બનાવાય છે, જે 8 KB ની એક લાઇબ્રેરી છે જે સંપૂર્ણપણે ટેબમાં જ ચાલે છે.
ઇમેજ ફોર્મેટ શા માટે બદલવા?
- PNG થી WebP પર સ્વિચ કરવાથી 0.8 ગુણવત્તાએ કોઈ દૃશ્યમાન ગુણવત્તા-હાનિ વગર સામાન્ય ફાઇલ કદ 25 થી 35% સુધી ઘટે છે, જે સીધી રીતે પેજ વજન ઘટાડે છે અને Core Web Vitals LCP સ્કોર સુધારે છે. આઠ મુખ્ય (hero) છબીઓ વાળા સામાન્ય પ્રોડક્ટ-ડિટેલ પેજ પર, એ 4 MB ના પ્રથમ રેન્ડર અને 2.6 MB ના રેન્ડર વચ્ચેનો ફરક છે.
- PNG પારદર્શકતા જાળવી રાખે છે જ્યાં JPEG તેને છોડી દે છે. PNG થી JPEG જવાથી પારદર્શક પિક્સેલ સફેદ પૃષ્ઠભૂમિ સામે રેન્ડર થાય છે, જે બરાબર એ જ છે જે તમે ઇચ્છો છો જ્યારે ગંતવ્ય (એક ઇમેઇલ ક્લાયન્ટ, એક જૂનું CMS, એક પ્રિન્ટ ટેમ્પલેટ) શરૂઆતમાં જ PNG સ્વીકારી શકતું ન હોય.
- સોશિયલ પ્લેટફોર્મ અને જાહેરાત નેટવર્કોની કડક ફોર્મેટ આવશ્યકતાઓ હોય છે. Facebook અને LinkedIn ફોટો અપલોડ માટે JPEG પસંદ કરે છે, Twitter ની OG પૂર્વાવલોકન પાઇપલાઇન WebP સ્વીકારે છે, અને કેટલાક પ્રોગ્રામેટિક જાહેરાત સર્વર JPEG ન હોય એવી કોઈ પણ વસ્તુ નકારે છે. અપલોડ પહેલાં એક ઝડપી રૂપાંતર ફેરી નકારાયેલ ક્રિએટિવની આગળ-પાછળની ઝંઝટ ટાળે છે.
- CMS અથવા DAM પર અપલોડ કરતા પહેલાં મિશ્ર-ફોર્મેટ છબીઓ (PNG સ્ક્રીનશોટ, JPEG ફોટો, ડિઝાઇનરના WebP એક્સપોર્ટ) ના બેચને એક જ આઉટપુટ ફોર્મેટમાં માનકીકૃત કરવાથી ઇન્જેસ્ટ પાઇપલાઇનમાંથી ફોર્મેટ-હેન્ડલિંગ શાખાઓ દૂર થાય છે. એક ફોર્મેટ અંદર, એક ફોર્મેટ બહાર, પછીના તબક્કાઓમાં ઘણા ઓછા શરતી કોડ પાથ.
સામાન્ય ઉપયોગ
ફોર્મેટ રૂપાંતર ત્યારે જ ઊભું થાય છે જ્યારે સ્રોત ફોર્મેટ અને ગંતવ્યની અપેક્ષાઓ મેળ ખાતી ન હોય. ત્રણ પૅટર્ન જે અમે વારંવાર જોઈએ છીએ.
- Shopify અથવા WooCommerce સ્ટોર માટે ઉત્પાદન ફોટો તૈયાર કરવા. JPEG મૂળ સાર્વજનિક સ્ટોરફ્રન્ટ માટે 0.85 ગુણવત્તાએ WebP માં રૂપાંતરિત થાય છે, જ્યારે PNG નકલો પ્રિન્ટ-રેડી એક્સપોર્ટ અને WebP હજુ પણ નકારતી હોય એવી માર્કેટપ્લેસ યાદીઓ માટે અલગ રખાય છે.
- React અથવા Next.js બિલ્ડમાં પ્રવેશે તે પહેલાં ડિઝાઇનરે પૂરા પાડેલા PNG એક્સપોર્ટને JPEG અથવા WebP માં રૂપાંતરિત કરવા. ફ્રેમવર્કની છબી પાઇપલાઇન એક નાનો સ્રોત ઉપાડે છે અને પ્રોડક્શન બંડલ દરેક રૂટ દીઠ ઓછા બાઇટ્સ મોકલે છે.
- QA રનના સ્ક્રીનશોટના ફોલ્ડરની બેચ-પ્રક્રિયા. PNG થી 0.9 ગુણવત્તાએ JPEG સામાન્ય રીતે 50-સ્ક્રીનશોટના આર્કાઇવને લગભગ 120 MB થી ઘટાડીને 20 MB ની નીચે લાવે છે, એ પહેલાં કે તે બગ ટ્રૅકર ટિકિટ સાથે જોડાય.
ઉદાહરણ: 2 MB PNG → 300 KB WebP
2400×1600 પિક્સેલ પર એક 2 MB PNG મુખ્ય (hero) છબી માર્કેટિંગ લેન્ડિંગ પેજ પર એક સામાન્ય પેલોડ છે. વાસ્તવિક પેજ પર રૂપાંતર શું બચાવે છે તેના માટે એ એક યોગ્ય માપદંડ છે.
PNG ને અપલોડ ઝોનમાં છોડો, ટાર્ગેટ ફોર્મેટ તરીકે WebP પસંદ કરો, ગુણવત્તા 0.8 પર સેટ કરો, અને પિક્સેલ પરિમાણોને અડધા કરવા માટે મહત્તમ પહોળાઈ 1200 પર સેટ કરો. Canvas પાઇપલાઇન છબીને પાસા-ગુણોત્તર જાળવી રાખીને 1200×800 પર દોરે છે, પછી WebP માં રી-એન્કોડ કરે છે. આઉટપુટ કાર્ડ પરિણામ બતાવે છે, સામાન્ય રીતે 280 થી 320 KB ની રેન્જમાં, જે મૂળની તુલનામાં લગભગ 85% ઘટાડો છે. એક જ ફાઇલ મેળવવા માટે કાર્ડ પર ડાઉનલોડ કરો ક્લિક કરો, અથવા જો તમે એક જ ફેરીમાં અનેક છબીઓ રૂપાંતરિત કરી હોય તો પૅનલના તળિયે .zip ડાઉનલોડ કરો ક્લિક કરો. આખો રાઉન્ડ-ટ્રિપ, છોડવાથી ડાઉનલોડ સુધી, આ કદની છબી માટે થોડા સો મિલિસેકન્ડમાં ચાલે છે અને પેજ પોતે લોડ થઈ ગયા પછી શૂન્ય બૅન્ડવિડ્થ વાપરે છે.
કયા ફોર્મેટ સપોર્ટ થાય છે?
ઇનપુટ બાજુએ, બ્રાઉઝર ડિકોડ કરી શકે તે કોઈપણ ફોર્મેટ સ્વીકારવામાં આવે છે: PNG, JPEG, WebP, GIF અને BMP લગભગ દરેક ફાઇલને આવરી લે છે જે ડિઝાઇનર અથવા સ્ક્રીનશોટ ટૂલ બનાવે છે. આઉટપુટ ફોર્મેટ PNG (હંમેશા લોસલેસ), JPEG, WebP અને AVIF છે. AVIF આઉટપુટ WebAssembly એન્કોડર દ્વારા સમર્થિત છે જે દરેક બ્રાઉઝરમાં માંગ પર લોડ થાય છે — કોઈ નેટિવ Canvas એન્કોડરની જરૂર નથી.
શું આ મારા ડિવાઇસ પર થાય છે?
હા, સંપૂર્ણપણે. પેજ દરેક છબીને મેમરીમાં ડિકોડ અને રી-એન્કોડ કરવા માટે બ્રાઉઝરની મૂળ Canvas API અને Web File API વાપરે છે. કોઈ છબી ડેટા સર્વર પર મોકલાતો નથી, કોઈ કામચલાઉ અપલોડ નહીં, કોઈ ક્લાઉડ રાઉન્ડ-ટ્રિપ નહીં. તમે જાતે ચકાસી શકો છો: DevTools ખોલો, Network પૅનલ પર સ્વિચ કરો, અને એક રૂપાંતર ચલાવો. તમને દેખાશે એ એકમાત્ર બહારની વિનંતીઓ પ્રારંભિક પેજ લોડ અને જાહેરાત કૉલ હશે. છબી-આકારની કોઈ વસ્તુ ટેબ છોડતી નથી.
PNG અને JPEG વચ્ચે ગુણવત્તાનો તફાવત શું છે?
PNG એક લૉસલેસ ફોર્મેટ છે. દરેક પિક્સેલ એન્કોડ ચક્રમાંથી બરાબર ટકી રહે છે, જે PNG ને સ્ક્રીનશોટ, UI કેપ્ચર, અને તીક્ષ્ણ કિનારીઓ અથવા મોટા સપાટ-રંગના વિસ્તારો વાળી કોઈ પણ છબી માટે યોગ્ય પસંદગી બનાવે છે. JPEG DCT સંકોચન વાપરે છે અને બારીક વિગતો છોડી દે છે જે આંખ ભાગ્યે જ નોંધે છે, જે તેને ફોટોગ્રાફ માટે યોગ્ય પસંદગી બનાવે છે. ગુણવત્તા 0.8 એ એક સામાન્ય આદર્શ બિંદુ છે જ્યાં મૂળથી દૃશ્ય ફરક શોધવો મુશ્કેલ છે પણ ફાઇલ PNG સમકક્ષ કરતાં 4 થી 6 ગણી નાની પડે છે. WebP લૉસલેસ અને લૉસી બંને મોડમાં કામ કરી શકે છે; અહીંની ગુણવત્તા સ્લાઇડર લૉસી એન્કોડર ચલાવે છે, અને 0.85 ગુણવત્તાએ WebP સામાન્ય રીતે કુદરતી-ફોટો સામગ્રી પર JPEG ને 25 થી 30% થી હરાવે છે.
AVIF આઉટપુટ કેવી રીતે કામ કરે છે?
AVIF એન્કોડિંગ WebAssembly કોડેકનો ઉપયોગ કરે છે જે તમે પ્રથમ વખત AVIF ફોર્મેટ પસંદ કરો ત્યારે માંગ પર લોડ થાય છે — કોઈ પ્લગઇન નહીં, કોઈ બ્રાઉઝર ફ્લેગ નહીં, ભવિષ્યના Chrome રિલીઝની રાહ નહીં. WASM બાઈનરી અમારા પોતાના ઓરિજિનથી સર્વ થાય છે, તમારી ઇમેજ સંપૂર્ણપણે બેકગ્રાઉન્ડ થ્રેડમાં એન્કોડ કરે છે અને ડાઉનલોડ માટે તૈયાર એક પ્રમાણભૂત image/avif બ્લોબ પરત કરે છે. એકમાત્ર નેટવર્ક વિનંતી એ કોડેકની પોતાની એક વખતની ફેચ છે; કોઈ ઇમેજ ડેટા તમારા ઉપકરણને ક્યારેય છોડતો નથી. એકવાર લોડ થયા પછી, એન્કોડર સત્ર માટે કેશ રહે છે જેથી અનુગામી કન્વર્ઝન ઝડપી હોય. AVIF ફાઇલો સામાન્ય રીતે સમકક્ષ ગુણવત્તામાં WebP કરતાં 20–30% નાની અને JPEG કરતાં 50% નાની હોય છે, જે તેમને પ્રદર્શન-સંવેદનશીલ સાઇટ્સ માટે શ્રેષ્ઠ પસંદગી બનાવે છે.
તમારી છબીઓ છોડો, એક ફોર્મેટ પસંદ કરો, કન્વર્ટ કરો. બધું તમારા ટેબમાં ચાલે છે — કોઈ અપલોડ નહીં, કોઈ ખાતું નહીં, સર્વર કતારની રાહ નહીં.