છબીઓ રીસાઇઝ કરો _

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

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

1. દરેક અપલોડ થયેલી ફાઇલને Blob તરીકે વાંચે છે અને એક object URL બનાવે છે જેથી બ્રાઉઝર બાઇટ્સને સર્વર પર કૉપિ કર્યા વગર અથવા ડિસ્ક પર લખ્યા વગર તેને સ્થાનિક રીતે ડિકોડ કરી શકે.
2. તમે પસંદ કરેલા મોડ પરથી લક્ષ્ય પરિમાણો કાઢે છે — એક સૌથી-લાંબી-બાજુની મર્યાદા, એક ચોક્કસ પહોળાઈ અને ઊંચાઈ, અથવા એક ટકાવારી સ્કેલ. જ્યારે તમે એક જ ફીલ્ડ બદલો ત્યારે એસ્પેક્ટ-રેશિયો લૉક પ્રમાણ સાચાં રાખે છે.
3. લક્ષ્ય કદે એક offscreen Canvas બનાવે છે અને ડિકોડ થયેલા પિક્સેલને ફરી દોરવા માટે ctx.drawImage(source, 0, 0, width, height) કૉલ કરે છે. સ્કેલ કરેલા પરિણામને સરળ બનાવતું interpolation બ્રાઉઝર સંભાળે છે.
4. મૂળ ફૉર્મૅટમાં ફરી એન્કોડ કરવા માટે canvas.toBlob કૉલ કરે છે. PNG લૉસલેસ રહે છે, JPEG અને WebP ઊંચી ગુણવત્તાએ ફરી એન્કોડ થાય છે. પછી પૃષ્ઠ એક પહેલાં/પછીનું કાર્ડ બતાવે છે અને પ્રતિ-છબી ડાઉનલોડ અથવા fflate સાથે મેમરીમાં બનેલ એક જ ZIP આપે છે.

છબીઓ શા માટે રીસાઇઝ કરવી?

• વધુ પડતી મોટી છબીઓ ધીમા પૃષ્ઠનું સૌથી સામાન્ય કારણ છે. 600-પિક્સેલ પહોળા લેઆઉટમાં સીધો મૂકેલો 4000×3000 ફોન ફોટો સ્ક્રીન બતાવી શકે તેના કરતાં લગભગ 40 ગણા વધુ પિક્સેલ મોકલે છે. અપલોડ પહેલાં સૌથી લાંબી બાજુ 1600 px સુધી મર્યાદિત કરવાથી પૃષ્ઠનું વજન ખૂબ ઘટે છે અને Core Web Vitals LCP સુધરે છે.
• અપલોડ ફોર્મ કડક પરિમાણો લાગુ કરે છે. અવતાર સ્લોટ, ID-ફોટો પોર્ટલ, માર્કેટપ્લેસ લિસ્ટિંગ અને OG સોશિયલ કાર્ડ બધાં ચોક્કસ પિક્સેલ કદ માગે છે: Open Graph પૂર્વાવલોકન માટે 1200×630, એપ આઇકન માટે 512×512, થમ્બનેલ માટે 150×150. સંખ્યા બરાબર પકડો અને નકારાયેલા-અપલોડના ચક્કરમાંથી છૂટકારો મેળવો.
• ઇમેઇલ અને ચૅટ ટૂલ્સ ચૂપચાપ કોઈપણ મોટી વસ્તુને ફરી કૉમ્પ્રેસ કરે છે, જે કોઈ સ્વચ્છ સ્ક્રીનશૉટ બગાડી શકે છે. જાતે જ યોગ્ય પહોળાઈ સુધી રીસાઇઝ કરવાથી પરિણામ અનુમાનિત રહે છે, કોઈ બીજાની lossy પાઇપલાઇન પર છોડવાને બદલે.
• ગૅલેરી અને કૅટલૉગ માટે બેચ સુસંગતતા મહત્ત્વની છે. મિશ્ર-કદના ફોટાવાળું ફોલ્ડર એક જ 800×800 લક્ષ્યમાંથી ચલાવવાનો અર્થ છે કે દરેક કાર્ડ ગ્રિડ પર સરખું ગોઠવાય, કોઈ ભટકતી વિરાટ છબી લેઆઉટ તોડ્યા વગર.

સામાન્ય ઉપયોગ

જ્યારે પણ સ્રોત પરિમાણ અને ગંતવ્યની અપેક્ષાઓ મેળ ન ખાય ત્યારે રીસાઇઝિંગ ઊભું થાય છે. ત્રણ pattern વારંવાર દેખાય છે.

• કોઈ Shopify અથવા WooCommerce સ્ટોર માટે પ્રોડક્ટ ફોટો તૈયાર કરવા. 4000-પિક્સેલના કૅમેરા મૂળનું ફોલ્ડર 1600 px ની સૌથી લાંબી બાજુ સુધી મર્યાદિત થાય છે જેથી સ્ટોરફ્રન્ટ ઝડપથી લોડ થાય, જ્યારે એસ્પેક્ટ રેશિયો અકબંધ રહે છે જેથી કંઈ ખેંચાયેલું ન દેખાય.
• એક માસ્ટર ફાઇલમાંથી સોશિયલ અને એપ એસેટ્સ બનાવવા. Open Graph કાર્ડ માટે ચોક્કસ 1200×630 સેટ કરો, પછી એપ આઇકન માટે 512×512, ભારે એડિટર ખોલ્યા વગર દરેકને બે-ચાર ક્લિકમાં એક્સપોર્ટ કરો.
• કોઈ ટિકિટ સાથે જોડતા પહેલાં QA અથવા સપોર્ટ સ્ક્રીનશૉટના બેચને નાનો કરવો. 50-શૉટના ફોલ્ડરને 50% પર સ્કેલ કરવાથી bug tracker માં જતા પહેલાં આર્કાઇવ કદ સામાન્ય રીતે લગભગ ત્રણ-ચતુર્થાંશ ઘટે છે.

એક વ્યવહારુ ઉદાહરણ: 4000 px ફોટોથી 1600 px વેબ છબી

ફોન પરથી સીધો આવેલો 4000×3000 ફોટો એક સામાન્ય પેલોડ છે જે કોઈપણ વેબ લેઆઉટની જરૂરિયાત કરતાં ઘણો મોટો છે. રીસાઇઝિંગ શું બચાવે છે તેના માટે એ એક યોગ્ય માપદંડ છે.

ફોટોને અપલોડ ઝોનમાં મૂકો, મોડને સૌથી લાંબી બાજુ મર્યાદિત કરો પર જ રાખો, અને મૂલ્ય 1600 સેટ કરો. Canvas પાઇપલાઇન છબીને એસ્પેક્ટ રેશિયો જાળવીને 1600×1200 પર ફરી દોરે છે, પછી મૂળ ફૉર્મૅટમાં ફરી એન્કોડ કરે છે. આઉટપુટ કાર્ડ નવાં પરિમાણ અને ફાઇલ કદ બતાવે છે, જે સામાન્ય JPEG માટે કેટલાક મેગાબાઇટથી ઘટીને થોડાક સો કિલોબાઇટ સુધી આવી જાય છે. એક ફાઇલ મેળવવા માટે કાર્ડ પર Download ક્લિક કરો, અથવા જો તમે એક જ વારમાં અનેક છબીઓ રીસાઇઝ કરી હોય તો Download .zip ક્લિક કરો. મૂકવાથી ડાઉનલોડ સુધીનો આખો round-trip એક સેકંડના અંશમાં ચાલે છે અને પૃષ્ઠ પોતે લોડ થઈ ગયા પછી શૂન્ય બેન્ડવિડ્થ વાપરે છે.

કયા રીસાઇઝ મોડ ઉપલબ્ધ છે?

ત્રણ. સૌથી લાંબી બાજુ મર્યાદિત કરો પહોળાઈ કે ઊંચાઈમાંથી લાંબીને એક પિક્સેલ મૂલ્ય સુધી મર્યાદિત કરે છે અને બીજી બાજુને મેળ ખવડાવવા સ્કેલ કરે છે, જે સલામત ડિફૉલ્ટ છે કારણ કે તે ક્યારેય વિકૃત કરતું નથી. ચોક્કસ પહોળાઈ × ઊંચાઈ તમને બંને સંખ્યા ટાઇપ કરવા દે છે, એક એસ્પેક્ટ-રેશિયો લૉક સાથે જે તમે પહેલી બદલતા જાઓ ત્યારે બીજી ફીલ્ડ મૂળ રેશિયો પરથી ફરી ગણે છે — જ્યારે કોઈ ફોર્મ ચોક્કસ બિન-પ્રમાણસર કદ માગે ત્યારે લૉક બંધ કરો. ટકાવારી પ્રમાણે સ્કેલ બંને પરિમાણને એક જ ગુણક વડે ગુણે છે, આખા બેચને એક જ વારમાં અડધો કે બમણો કરવા માટે કામનું. છ એક-ક્લિક પ્રીસેટ્સ (1920×1080 થી 150×150 થમ્બનેલ સુધી) સૌથી સામાન્ય લક્ષ્યો આવરી લે છે.

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

હા, સંપૂર્ણપણે. પૃષ્ઠ દરેક છબીને મેમરીમાં ડિકોડ, ફરી દોરવા અને ફરી એન્કોડ કરવા માટે બ્રાઉઝરની મૂળ Canvas API અને Web File API વાપરે છે. કોઈ છબી ડેટા સર્વર પર મોકલાતો નથી, કોઈ કામચલાઉ અપલોડ નહીં, કોઈ cloud round-trip નહીં. તમે જાતે ચકાસી શકો છો: DevTools ખોલો, Network panel પર સ્વિચ કરો, અને એક રીસાઇઝ ચલાવો. તમને દેખાશે એ એકમાત્ર બહારની વિનંતીઓ પ્રારંભિક પૃષ્ઠ લોડ અને જાહેરાત કૉલ હશે. છબી-આકારની કોઈ વસ્તુ ટેબ છોડતી નથી, જે આ બાબતને સ્કૅન કરેલા ID, મેડિકલ છબીઓ અને એવી બીજી સામગ્રી માટે સલામત બનાવે છે જે તમે ક્યારેય અપલોડ ન કરવા માગો.

શું રીસાઇઝિંગ ગુણવત્તા ઘટાડશે?

છબી નાની કરવી (ડાઉનસ્કેલ) ઉત્તમ દેખાય છે — બ્રાઉઝર સ્રોત પિક્સેલની સરેરાશ ઓછા પિક્સેલમાં કાઢે છે, તેથી વિગત તીક્ષ્ણ રહે છે અને ફાઇલ ઘણી નાની થાય છે. સ્રોત રિઝોલ્યૂશનથી મોટું કરવું (અપસ્કેલ) ક્યારેય નહીં કેપ્ચર થયેલી વિગત શોધી શકતું નથી, તેથી મોટી કરેલી નાની છબી નરમ દેખાશે; એ દરેક રીસાઇઝરની મર્યાદા છે, ખાસ આ એકની નહીં. આઉટપુટ સ્રોત ફૉર્મૅટ રાખે છે: PNG લૉસલેસ રહે છે, જ્યારે JPEG અને WebP ઊંચી ગુણવત્તા સેટિંગે ફરી એન્કોડ થાય છે જેથી મૂળથી દૃશ્યમાન તફાવત શોધવો મુશ્કેલ બને.

તે કયા ફાઇલ ફૉર્મૅટ સપોર્ટ કરે છે?

ઇનપુટ બાજુએ, બ્રાઉઝર ડિકોડ કરી શકે એવું કોઈપણ ફૉર્મૅટ સ્વીકાર્ય છે: PNG, JPEG, WebP, GIF અને BMP ફોન, કૅમેરા કે સ્ક્રીનશૉટ ટૂલ બનાવે એ લગભગ દરેક ફાઇલ આવરી લે છે. આઉટપુટ સ્રોત ફૉર્મૅટ જાળવે છે જ્યાં Canvas એન્કોડર સપોર્ટ કરે છે — PNG, JPEG અને WebP સીધાં round-trip થાય છે. GIF અને BMP, જેને Canvas API ડિકોડ કરી શકે પણ ફરી એન્કોડ ન કરી શકે, તેને બદલે લૉસલેસ PNG તરીકે સાચવાય છે. રીસાઇઝ કરેલા ફાઇલનામમાં નવાં પરિમાણ સામેલ હોય છે (ઉદાહરણ તરીકે photo-1600x1200.jpg) જેથી બેચ સૉર્ટ કરવો સહેલો રહે.

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