ઇમેજ ફોર્મેટ કન્વર્ટ કરો _

બ્રાઉઝર-આધારિત ઇમેજ કન્વર્ઝન કેવી રીતે કાર્ય કરે છે

દરેક રૂપાંતર એ સંપૂર્ણપણે JavaScript માં ચાલતી ચાર-પગલાંની પાઇપલાઇન છે. કોઈ કોડેક લાઇબ્રેરી ડાઉનલોડ થતી નથી અને કોઈ સર્વર સામેલ થતું નથી. બ્રાઉઝરની પોતાની Canvas API ડિકોડ, રીસાઇઝ અને રી-એન્કોડ બધું મેમરીમાં સંભાળે છે, પછી તમને એક Blob સોંપે છે જેને પેજ કાં તો પૂર્વાવલોકન કરી શકે અથવા zip કરી શકે. કારણ કે દરેક પગલું ટેબના સૅન્ડબૉક્સની અંદર જ રહે છે, મૂળ ફાઇલો ક્યારેય નેટવર્ક સુધી પહોંચતી નથી.

1. દરેક અપલોડ થયેલી ફાઇલને Blob તરીકે વાંચે છે અને એક object URL બનાવે છે જેથી બ્રાઉઝર બાઇટ્સને સર્વર પર કૉપિ કર્યા વગર અથવા ડિસ્ક પર સંગ્રહ્યા વગર, સ્થાનિક રીતે તેને ડિકોડ કરી શકે.
2. ડિકોડ થયેલી છબીને એક ઑફસ્ક્રીન Canvas એલિમેન્ટ પર દોરે છે, મૂળ પાસા-ગુણોત્તર જાળવી રાખીને કોઈ પણ રીસાઇઝ મર્યાદા લાગુ કરે છે. જો તમે મહત્તમ પહોળાઈ અથવા મહત્તમ પરિમાણ પસંદ કર્યું હોય, તો અહીં જ ડાઉનસ્કેલ થાય છે.
3. પિક્સેલને રી-એન્કોડ કરવા માટે canvas.toBlob(callback, targetMimeType, quality) કૉલ કરે છે. PNG આઉટપુટ હંમેશા લૉસલેસ હોય છે; JPEG અને WebP ગુણવત્તા સ્લાઇડરનું પાલન કરે છે, જે સીધું એન્કોડરની quantization સેટિંગ સાથે મેપ થાય છે.
4. આઉટપુટ પરિમાણો અને ફાઇલ કદ સાથે પહેલાં/પછીનું થંબનેલ બતાવે છે, પછી દરેક છબી માટે ડાઉનલોડ બટન અથવા આખા બેચ માટે એક જ 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 આઉટપુટ હજુ સમર્થિત નથી કારણ કે Canvas API નો AVIF એન્કોડર ફક્ત Chrome 105 અને પછીના સંસ્કરણોમાં હાજર છે અને Safari તથા Firefox માંથી ગાયબ છે. એક WebAssembly-આધારિત AVIF પાથ v1.1 માટે આયોજિત છે જેથી આ સુવિધા દરેક આધુનિક બ્રાઉઝરમાં કામ કરે.

શું આ મારા ડિવાઇસ પર થાય છે?

હા, સંપૂર્ણપણે. પેજ દરેક છબીને મેમરીમાં ડિકોડ અને રી-એન્કોડ કરવા માટે બ્રાઉઝરની મૂળ 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 સપોર્ટ ક્યારે આવશે?

canvas.toBlob(…, 'image/avif') દ્વારા AVIF એન્કોડિંગ આજે ફક્ત Chrome 105 અને પછીના સંસ્કરણોમાં કામ કરે છે; Safari અને Firefox તેને મૂળભૂત રીતે સમર્થન આપતા નથી. એક v1.1 રિલીઝ એક હળવા WebAssembly એન્કોડરનો ઉપયોગ કરીને એક ઐચ્છિક AVIF પાથ ઉમેરશે જેથી આ સુવિધા મૂળ સમાનતાની રાહ જોયા વગર દરેક આધુનિક બ્રાઉઝરમાં કામ કરે. ત્યાં સુધી, ફોર્મેટ પસંદગીકારમાં AVIF વિકલ્પ 'જલ્દી આવી રહ્યું છે' તરીકે બતાવાય છે અને WebP એન્કોડર એ ભલામણ કરેલ વિકલ્પ છે. WebP 2021 થી મોકલાયેલા દરેક બ્રાઉઝર દ્વારા સમર્થિત છે અને મોટાભાગની વાસ્તવિક-દુનિયાની છબીઓ માટે AVIF ના કદના 10 થી 20% ની અંદર ફાઇલો બનાવે છે.

તમારી છબીઓ છોડો, એક ફોર્મેટ પસંદ કરો, કન્વર્ટ કરો. બધું તમારા ટેબમાં ચાલે છે — કોઈ અપલોડ નહીં, કોઈ ખાતું નહીં, સર્વર કતારની રાહ નહીં.