చిత్రాల పరిమాణం మార్చండి _

బ్రౌజర్-ఆధారిత చిత్ర రీసైజింగ్ ఎలా పనిచేస్తుంది

ప్రతి రీసైజ్ పూర్తిగా JavaScript లో రన్ అయ్యే ఒక చిన్న పైప్‌లైన్. కోడెక్ లైబ్రరీ డౌన్‌లోడ్ కాదు మరియు సర్వర్ పాల్గొంటుంది. బ్రౌజర్ సొంత Canvas API ఫైల్ డీకోడ్ చేసి, లక్ష్య పరిమాణంలో తిరిగి తయారు చేసి, మెమరీలో రీ-ఎన్‌కోడ్ చేసి, ఒక Blob ఇస్తుంది — పేజ్ ప్రివ్యూ లేదా zip చేయడానికి. ప్రతి అడుగు ట్యాబ్ సాండ్‌బాక్స్ లోపల జీవిస్తుంది కాబట్టి, అసలు ఫైళ్ళు నెట్‌వర్క్‌కు చేరవు.

1. ప్రతి అప్‌లోడ్ చేయబడిన ఫైల్‌ను Blob గా చదివి ఒక object URL క్రియేట్ చేయండి, తద్వారా బ్రౌజర్ దానిని స్థానికంగా డీకోడ్ చేయగలదు, సర్వర్‌కు బైట్లు కాపీ చేయకుండా.
2. మీరు ఎంచుకున్న మోడ్ నుండి లక్ష్య కొలతలు నిర్ణయించండి — పొడవైన భుజం పరిమితి, సరిగ్గా వెడల్పు మరియు ఎత్తు, లేదా శాతం స్కేల్. నిష్పత్తి లాక్ ఒక ఫీల్డ్ మార్చినప్పుడు అనుపాతం సరిగ్గా ఉంచుతుంది.
3. లక్ష్య పరిమాణంలో ఒక offscreen Canvas క్రియేట్ చేసి, డీకోడ్ చేయబడిన పిక్సెల్లు తిరిగి తయారు చేయడానికి ctx.drawImage(source, 0, 0, width, height) కాల్ చేయండి. బ్రౌజర్ ఇంటర్‌పోలేషన్ నిర్వహిస్తుంది, స్కేల్ చేయబడిన ఫలితాన్ని మృదువుగా చేస్తుంది.
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 లక్ష్యంలో రన్ చేయడం అంటే గ్రిడ్‌లో ప్రతి కార్డ్ ఒకే రేఖలో ఉంటుంది, ఏ పెద్ద చిత్రం లేఔట్ పాడు చేయకుండా.

సాధారణ అప్లికేషన్లు

సోర్స్ కొలతలు మరియు డెస్టినేషన్ అంచనాలు సరిపోలనప్పుడు రీసైజింగ్ వస్తుంది. మూడు నమూనాలు పదే పదే కనిపిస్తాయి.

• Shopify లేదా WooCommerce స్టోర్ కోసం ప్రొడక్ట్ ఫోటోలు తయారు చేయడం. 4000 పిక్సెల్ కెమేరా ఒరిజినల్స్ ఫోల్డర్ 1600 px పొడవైన భుజం వరకు పరిమితం చేయబడుతుంది స్టోర్‌ఫ్రంట్ వేగంగా లోడ్ అవడానికి, నిష్పత్తి అలాగే ఉంచి ఏదీ సాగినట్లు కనిపించకుండా.
• ఒక మాస్టర్ ఫైల్ నుండి సోషల్ మరియు యాప్ అసెట్‌లు తయారు చేయడం. Open Graph కార్డ్‌కు సరిగ్గా 1200×630 సెట్ చేయండి, తర్వాత యాప్ ఐకాన్‌కు 512×512, ఏ భారీ ఎడిటర్ తెరవకుండా కొన్ని క్లిక్‌లలో ప్రతి ఒక్కటి ఎగ్జ్‌పోర్ట్ చేయండి.
• టికెట్‌కు అటాచ్ చేయడానికి ముందు QA లేదా సపోర్ట్ స్క్రీన్‌షాట్ల బ్యాచ్ తగ్గించడం. 50-షాట్ ఫోల్డర్‌ను 50% కు స్కేల్ చేయడం సాధారణంగా బగ్ ట్రాకర్‌లోకి వెళ్ళడానికి ముందు ఆర్కైవ్ సైజు దాదాపు మూడు వంతులు తగ్గిస్తుంది.

పని చేసిన ఉదాహరణ: 4000 px ఫోటో నుండి 1600 px వెబ్ చిత్రం

ఫోన్ నుండి నేరుగా వచ్చిన 4000×3000 ఫోటో ఏ వెబ్ లేఔట్ అవసరానికంటే చాలా పెద్దదైన సాధారణ పేలోడ్. రీసైజింగ్ ఏమి ఆదా చేస్తుందో దానికి ఇది సహేతుకమైన బెంచ్‌మార్క్.

ఫోటోను అప్‌లోడ్ జోన్‌లో డ్రాప్ చేయండి, మోడ్‌ను పొడవైన భుజాన్ని పరిమితం చేయిపై వదలండి, మరియు విలువను 1600 సెట్ చేయండి. Canvas పైప్‌లైన్ నిష్పత్తి నిలుపుకుంటూ 1600×1200 వద్ద చిత్రాన్ని తిరిగి తయారు చేసి, అసలు ఫార్మాట్‌లో రీ-ఎన్‌కోడ్ చేస్తుంది. అవుట్‌పుట్ కార్డ్ కొత్త కొలతలు మరియు ఫైల్ సైజు చూపిస్తుంది, ఇది ఒక సాధారణ JPEG కోసం అనేక మెగాబైట్‌ల నుండి కొన్ని వందల కిలోబైట్‌లకు తగ్గుతుంది. సింగిల్ ఫైల్ తీసుకోవడానికి కార్డ్‌లో డౌన్‌లోడ్ క్లిక్ చేయండి, లేదా మీరు ఒకే పాస్‌లో అనేక చిత్రాలు రీసైజ్ చేస్తే .zip డౌన్‌లోడ్ క్లిక్ చేయండి. ఈ పరిమాణ చిత్రం కోసం డ్రాప్ నుండి డౌన్‌లోడ్ వరకు పూర్తి రౌండ్-ట్రిప్ ఒక సెకన్ అంశంలో రన్ అవుతుంది మరియు పేజ్ లోడ్ అయిన తర్వాత సున్నా బ్యాండ్‌విడ్త్ ఉపయోగిస్తుంది.

ఏ రీసైజ్ మోడ్‌లు అందుబాటులో ఉన్నాయి?

మూడు. పొడవైన భుజాన్ని పరిమితం చేయి వెడల్పు లేదా ఎత్తులో పొడవైన దాన్ని ఒక పిక్సెల్ విలువకు పరిమితం చేసి, మరొకటి మ్యాచ్ అవడానికి స్కేల్ చేస్తుంది — ఇది ఎప్పటికీ వంకర చేయదు కాబట్టి సురక్షిత డిఫాల్ట్. సరిగ్గా వెడల్పు × ఎత్తు మీకు రెండు సంఖ్యలు టైప్ చేయడానికి అనుమతిస్తుంది, మొదటి ఫీల్డ్ మార్చినప్పుడు రెండవది సోర్స్ నిష్పత్తి నుండి లెక్కించే నిష్పత్తి లాక్‌తో — ఫారమ్ సరిగ్గా అసమాన పరిమాణం కావాలంటే లాక్ ఆఫ్ చేయండి. శాతంతో స్కేల్ చేయి రెండు కొలతలను ఒక ఫ్యాక్టర్‌తో గుణిస్తుంది, మొత్తం బ్యాచ్‌ను ఒకేసారి సగానికి తగ్గించడానికి లేదా రెట్టింపు చేయడానికి అనుకూలం. ఆరు వన్-క్లిక్ ప్రిసెట్‌లు (1920×1080 నుండి 150×150 థంబ్‌నెయిల్ వరకు) అత్యంత సాధారణ లక్ష్యాలను కవర్ చేస్తాయి.

ఇది నా పరికరంలో జరుగుతుందా?

అవును, పూర్తిగా. పేజ్ మెమరీలో ప్రతి చిత్రాన్ని డీకోడ్, తిరిగి తయారు చేసి మరియు రీ-ఎన్‌కోడ్ చేయడానికి బ్రౌజర్ నేటివ్ Canvas API మరియు Web File API ఉపయోగిస్తుంది. ఏ చిత్ర డేటా సర్వర్‌కు పంపబడదు, తాత్కాలిక అప్‌లోడ్ లేదు, క్లౌడ్ రౌండ్-ట్రిప్ లేదు. మీరే వ్యక్తిగతంగా DevTools తెరిచి, Network పానెల్‌కు మారి, రీసైజ్ రన్ చేయడం ద్వారా వెరిఫై చేయవచ్చు. మీకు కనిపించే ఏకైక అవుట్‌బౌండ్ రిక్వెస్ట్‌లు ప్రారంభ పేజ్ లోడ్ మరియు యాడ్ కాల్‌లు. స్కాన్ చేయబడిన ID లు, మెడికల్ ఇమేజ్‌లు మరియు మీరు ఎప్పుడూ అప్‌లోడ్ చేయదలుచుకోని ఇతర సామగ్రికి ఇది సురక్షితం.

రీసైజింగ్ నాణ్యత తగ్గిస్తుందా?

చిత్రాన్ని చిన్నది చేయడం (డౌన్‌స్కేలింగ్) అద్భుతంగా కనిపిస్తుంది — బ్రౌజర్ సోర్స్ పిక్సెల్లను తక్కువ పిక్సెల్లలో సగటు చేస్తుంది, కాబట్టి వివరాలు స్పష్టంగా ఉంటాయి మరియు ఫైల్ చాలా చిన్నది అవుతుంది. సోర్స్ రిజల్యూషన్ పైన పెద్దది చేయడం (అప్‌స్కేలింగ్) ఎప్పుడూ కాప్చర్ కాని వివరాలు కనుగొనలేదు, కాబట్టి చిన్న చిత్రం పైకి స్కేల్ చేస్తే మసకగా కనిపిస్తుంది; ఇది ప్రతి రీసైజర్ యొక్క పరిమితి, ఈ ఒక్కదాని మాత్రమే కాదు. అవుట్‌పుట్ సోర్స్ ఫార్మాట్ ఉంచుతుంది: PNG లాస్‌లెస్‌గా ఉంటుంది, JPEG మరియు WebP అధిక నాణ్యత సెట్టింగ్‌లో రీ-ఎన్‌కోడ్ అవుతాయి.

ఏ ఫైల్ ఫార్మాట్‌లు సపోర్ట్ చేయబడతాయి?

ఇన్‌పుట్ వైపు, బ్రౌజర్ డీకోడ్ చేయగల ఏ ఫార్మాట్ అయినా అంగీకరించబడుతుంది: PNG, JPEG, WebP, GIF, మరియు BMP దాదాపు ప్రతి ఫోన్, కెమేరా లేదా స్క్రీన్‌షాట్ టూల్ తయారు చేసే ఫైల్ కవర్ చేస్తాయి. Canvas ఎన్‌కోడర్ సపోర్ట్ చేసే చోట అవుట్‌పుట్ సోర్స్ ఫార్మాట్ నిలుపుతుంది — PNG, JPEG, మరియు WebP నేరుగా రౌండ్-ట్రిప్ చేస్తాయి. Canvas API డీకోడ్ చేయగలిగే కానీ రీ-ఎన్‌కోడ్ చేయలేని GIF మరియు BMP, లాస్‌లెస్ PNG గా సేవ్ చేయబడతాయి. రీసైజ్ చేయబడిన ఫైల్ పేరులో కొత్త కొలతలు ఉంటాయి (ఉదాహరణకు photo-1600x1200.jpg) తద్వారా బ్యాచ్ సులభంగా సార్ట్ చేయవచ్చు.

మీ చిత్రాలు డ్రాప్ చేయండి, పరిమాణం ఎంచుకోండి, రీసైజ్ చేయండి. అన్నీ మీ ట్యాబ్‌లో రన్ అవుతాయి. అప్‌లోడ్ లేదు, అకౌంట్ లేదు, సర్వర్ క్యూ కోసం వేచి ఉండటం లేదు.