చాలా వెబ్ యాప్‌లు ఇప్పటికీ ఇమేజ్ అప్‌లోడ్‌లను ఒక 'బ్లాక్ బాక్స్' లాగా నిర్వహిస్తున్నాయి. వినియోగదారు ఒక ఫైల్‌ను డ్రాప్ చేస్తారు, బ్రౌజర్ దానిని పంపిస్తుంది, మరియు సర్వర్ ఆ పేలోడ్‌ను అంగీకరిస్తుంది లేదా ఎవరూ ఊహించని 413 ఎర్రర్‌ను చూపిస్తుంది. బ్రౌజర్-సైడ్ కంప్రెషన్ ఈ సమీకరణాన్ని మారుస్తుంది. ఇది డేటా నెట్‌వర్క్‌లోకి వెళ్లే ముందే పేలోడ్‌లను తగ్గించే అవకాశం ఇస్తుంది, దీనివల్ల వేగవంతమైన అప్‌లోడ్‌లు, తక్కువ బ్యాండ్‌విడ్త్ ఖర్చులు మరియు తక్కువ సర్వర్ టైమ్-అవుట్‌లు సాధ్యమవుతాయి. కానీ ఈ విషయంలో తప్పులు జరగడం చాలా సులభం. మీరు కంప్రెషన్‌ను కేవలం "quality" అని పేరున్న ఒక మ్యాజిక్ స్లైడర్‌లా భావిస్తే, వికృతమైన చిత్రాలు, సాగదీసిన థంబ్‌నెయిల్స్ మరియు అయోమయపరిచే యూజర్ ఎక్స్‌పీరియన్స్‌లను అందిస్తారు. మెరుగైన విధానం ఏమిటంటే, మొత్తం ప్రక్రియను ఒక పైప్‌లైన్‌గా పరిగణించడం.

స్లైడర్ల గురించి కాకుండా, పైప్‌లైన్‌ల గురించి ఆలోచించండి

పనిని విడివిడి దశలుగా విభజించండి. ఇన్‌పుట్ ఎలిమెంట్ నుండి ఫైల్‌ను చదవండి. ఇమేజ్‌ను మీ టార్గెట్ డైమెన్షన్‌లకు తగ్గించండి (scale down). కొత్త Blobను ఎన్‌కోడ్ చేయండి. ఆపై ఫలితాన్ని వినియోగదారుకు చూపండి (render). ప్రతి దశ ఒకే పనిని చేస్తుంది మరియు దాని అవుట్‌పుట్‌ను తదుపరి దశకు పంపిస్తుంది. ఈ విభజన కేవలం కోడ్‌ను శుభ్రంగా ఉంచడానికే కాదు, ఇది యూనిట్ టెస్టింగ్‌ను కూడా సులభతరం చేస్తుంది. ఫైల్ ఇన్‌పుట్‌ను తాకకుండానే, మీరు ఒక తెలిసిన బఫర్‌ను స్కేలింగ్ దశకు పంపవచ్చు. సర్వర్ రౌండ్ ట్రిప్ కోసం వేచి చూడకుండానే, మీ ఎన్‌కోడర్ 200 KB కంటే తక్కువ పరిమాణంలో JPEGని ఇస్తుందో లేదో మీరు ధృవీకరించవచ్చు. ఏదైనా విఫలమైనప్పుడు, ఏ దశలో తప్పు జరిగిందో మీకు ఖచ్చితంగా తెలుస్తుంది.

ఈ బాధ్యతలను వేరుగా ఉంచడం వల్ల అప్‌లోడ్‌ల సమయంలో అనూహ్య సమస్యలు రాకుండా ఉంటాయి. మీరు స్కేలింగ్ మరియు ఎన్‌కోడింగ్‌ను ఒకే క్లిష్టమైన ఫంక్షన్‌లో కలిపివేస్తే, మధ్యలో వచ్చే డీకోడింగ్ ఎర్రర్ మీ అప్‌లోడ్ క్యూను అస్థిర స్థితిలోకి నెట్టవచ్చు. పైప్‌లైన్ ప్రతి దశ వద్ద ధృవీకరించేలా (validate) మిమ్మల్ని ప్రోత్సహిస్తుంది. ఫైల్‌ను డీకోడ్ చేయలేకపోతే, మీరు కాన్వాస్‌ను సృష్టించకముందే దానిని గుర్తించవచ్చు. ఎన్‌కోడ్ చేసిన Blob చాలా పెద్దదిగా ఉంటే, సర్వర్‌కు నిల్వ చేయమని అడగకముందే దానిని పట్టుకోవచ్చు.

కోడ్ రాయకముందే ఒక ఒప్పందాన్ని (Contract) నిర్వచించండి

ఎవరైనా canvas draw call రాయకముందే, నియమాలను రాసి టీమ్‌తో పంచుకోండి. అంగీకరించబడిన MIME రకాలను ఎంచుకోండి. మీరు JPEG, PNG, WebP, లేదా AVIFలను అనుమతిస్తారా? ఒక్కో దానికీ ఆల్ఫా ఛానెల్స్, బ్రౌజర్ సపోర్ట్ మరియు CPU ఖర్చు వంటి అంశాలపై ప్రభావం ఉంటుంది. గరిష్ట ఇన్‌పుట్ పరిమాణాన్ని నిర్ణయించండి. ఫ్లాగ్‌షిప్ ఫోన్ నుండి వచ్చిన 30 MB రా ఫోటోను మెమరీలో పూర్తిగా డీకోడ్ చేయడానికి ప్రయత్నిస్తే, పాత లాప్‌టాప్ ఫ్రీజ్ అవ్వడం లేదా క్రాష్ అవ్వడం జరుగుతుంది. గరిష్ట అవుట్‌పుట్ డైమెన్షన్‌లను నిర్వచించండి. మీ UI ఎప్పుడూ 2048 పిక్సెల్‌ల కంటే ఎక్కువ వెడల్పు ఉన్న చిత్రాలను ప్రదర్శించకపోతే, 6000 పిక్సెల్‌ల వెడల్పు ఉన్న ఫోటోను పైప్‌లైన్ ద్వారా పంపాల్సిన అవసరం లేదు.

అన్నిటికంటే ముఖ్యంగా, డీకోడింగ్ వైఫల్యాల కోసం సిద్ధంగా ఉండండి. పాడైపోయిన ఫైల్, విభిన్నమైన కలర్ ప్రొఫైల్ లేదా అసంపూర్తిగా జరిగిన అప్‌లోడ్ Image constructorలో ఎర్రర్‌ను కలిగించవచ్చు. మీ పైప్‌లైన్‌లో స్పష్టమైన catch block మరియు వినియోగదారుడికి అర్థమయ్యే ఎర్రర్ మెసేజ్ ఉండాలి. బ్రౌజర్ నిశ్శబ్దంగా ఆగిపోయి, ఏమీ జరగకుండా వినియోగదారుడు స్పిన్నర్‌ను చూస్తూ కూర్చునేలా చేయకండి.

ఇమేజ్‌ను గౌరవించండి

చిత్రం వికృతంగా (distortion) కనిపిస్తే అది ప్రొఫెషనల్‌గా ఉండదు. ఆస్పెక్ట్ రేషియోను అలాగే ఉంచి, పొడవైన వైపును పరిమితం చేయండి. మీ టార్గెట్ బాక్స్ 1024 x 1024 పిక్సెల్‌లు అయితే, 4000 x 3000 ఫోటో 1024 x 768 పరిమాణంలో ఉండాలి, 1024 x 1024 కాదు. పొడవైన అంచు నుండి స్కేల్ ఫ్యాక్టర్‌ను లెక్కించి, చిన్న అంచు దానికి అనుగుణంగా ఉండేలా చూడండి. దీనివల్ల చిత్రాలు వింత ఆకారాల్లో సాగదీయబడవు.

అసలు ఎక్స్‌పోర్ట్ కోసం, కాన్వాస్ toBlob మెథడ్‌ను ఉపయోగించండి. ఇది అవుట్‌పుట్ ఫార్మాట్ మరియు క్వాలిటీ సెట్టింగ్‌లపై మీకు ప్రత్యక్ష నియంత్రణను ఇస్తుంది, మరియు ఇది అసింక్రోనస్‌గా (asynchronously) పనిచేస్తుంది కాబట్టి మెయిన్ థ్రెడ్‌ను బ్లాక్ చేయదు. ఒక ఆఫ్‌స్క్రీన్ కాన్వాస్‌ను సృష్టించి, దానిపై రీసైజ్ చేసిన చిత్రాన్ని గీయండి, ఆపై మీకు నచ్చిన టైప్ మరియు క్వాలిటీ విలువతో canvas.toBlobను కాల్ చేయండి. ఆ కొత్త Blobనే మీరు మీ అప్‌లోడ్ లాజిక్ లేదా స్టోరేజ్ APIకి పంపిస్తారు.

ఆధారాలను చూపండి

కంప్రెషన్ అనేది కనిపించని పని. మీరు గణాంకాలను చూపించకపోతే, వినియోగదారులు ఆ ప్రక్రియను నమ్మరు. అసలు ఫైల్‌ను ఫలితంతో పోల్చుకునేలా ఒక ఇంటర్‌ఫేస్‌ను రూపొందించండి. అసలు ఫైల్ సైజు, కొత్త ఫైల్ సైజు, కొత్త డైమెన్షన్లు మరియు చివరి ఫార్మాట్ టైప్‌ను ప్రదర్శించండి. 4.2 MB ఫోన్ ఫోటో 380 KB WebP కి తగ్గడం చూస్తే, మీరు వారి చిత్రాన్ని రహస్యంగా పాడు చేస్తున్నారనే భయం పోతుంది.

ఈ పారదర్శకత ట్రబుల్షూటింగ్ (troubleshooting) చేయడంలో కూడా సహాయపడుతుంది. అప్‌లోడ్ విఫలమైందని వినియోగదారు ఫిర్యాదు చేసినప్పుడు, మీరు మొదటగా తనిఖీ చేసేది అవుట్‌పుట్ డైమెన్షన్లు మీ సర్వర్ పరిమితిని మించిపోయాయా లేదా ఫార్మాట్ PNG నుండి JPEGకి మారి ఆల్ఫా ఛానెల్‌ను కోల్పోయిందా అనేది. సపోర్ట్ టికెట్ ఓపెన్ చేసే ముందే వినియోగదారు స్వయంగా సమస్యను గుర్తించేలా ఆ డేటాను UIలో ఉంచండి.

రీ-కంప్రెషన్ కంటే ప్రిసెట్స్ మేలు

ఒకే చిత్రాన్ని రెండుసార్లు కంప్రెస్ చేయకండి. లాసీ ఎన్‌కోడర్ (lossy encoder) ద్వారా ప్రతిసారీ వివరాలు తగ్గుతూ వస్తాయి మరియు బ్లాకీ ఆర్టిఫాక్ట్స్ (blocky artifacts) ఏర్పడతాయి. వినియోగదారు పదేపదే "optimize" బటన్‌ను నొక్కితే, మూడవ తరం చిత్రం ఒక ఫోటోకాపీ యొక్క ఫోటోకాపీలా కనిపిస్తుంది. దానికి బదులుగా, ప్రతి అవుట్‌పుట్‌ను అసలు సోర్స్ ఫైల్ నుండి రూపొందించండి మరియు ప్రిసెట్‌లను అందించండి:

  • Smaller file: తంబ్నైల్స్ లేదా వేగవంతమైన ప్రివ్యూల కోసం క్వాలిటీని తగ్గించి, డైమెన్షన్లను కఠినంగా పరిమితం చేయండి.
  • Balanced: సోషల్ ఫీడ్స్ మరియు గ్యాలరీలకు అనుకూలంగా ఉండేలా, సహేతుకమైన డైమెన్షన్లతో మధ్యస్థ క్వాలిటీని లక్ష్యంగా పెట్టుకోండి.
  • More detail: ఫోటోగ్రఫీ, ఆర్ట్‌వర్క్ లేదా ప్రింట్ ప్రివ్యూల కోసం క్వాలిటీని ఎక్కువగా ఉంచి, పెద్ద డైమెన్షన్లను అలాగే ఉంచండి.

యూజర్ వివిధ ప్రిసెట్‌ల మధ్య మారేటప్పుడు క్వాలిటీ క్రమంగా తగ్గుతూ పోకుండా ఉండటానికి, ఒరిజినల్ Blob ను మెమరీలో నిల్వ చేయండి. ఎల్లప్పుడూ మూల (source) నుండి మాత్రమే జనరేట్ చేయండి, చివరి అవుట్‌పుట్ నుండి కాదు.

మీ యూజర్లు అప్‌లోడ్ చేసే విధంగానే టెస్ట్ చేయండి

ఫైబర్ కనెక్షన్ మరియు 32 GB RAM ఉన్న మీ డెవలప్‌మెంట్ మెషీన్ వాస్తవ ప్రపంచం కాదు. నిజమైన యూజర్లు ఉపయోగించే అసలు ఫైల్స్‌తో టెస్ట్ చేయండి. iOS మరియు Android ఫోన్ల ఫోటోలు వేర్వేరు మెటాడేటా ఓరియంటేషన్లను ఉపయోగిస్తాయి మరియు అవి HEIC మూలాల నుండి రావచ్చు. లోగోలు మరియు ఐకాన్ల వంటి ట్రాన్స్‌పరెంట్ అసెట్స్ JPEG కన్వర్షన్‌లో భిన్నంగా ప్రవర్తిస్తాయి, ఎందుకంటే JPEG కేవలం ఆల్ఫా ఛానెల్‌లను (alpha channels) సపోర్ట్ చేయదు. భారీ ఫైల్స్ 2 GB RAM ఉన్న పరికరాల్లో మెమరీ పరిమితులను బయటపెడతాయి. నెమ్మదైన మొబైల్ CPUలు toBlob కాల్ నిజంగా ఎంత సమయం తీసుకుంటుందో స్పష్టంగా చూపుతాయి.

CPU మరియు నెట్‌వర్క్‌ను త్రొటిల్ (throttle) చేయడానికి Chrome DevTools ఉపయోగించండి. ఐదేళ్ల క్రితం నాటి Android ఫోన్‌తో ప్రయత్నించండి. ఎన్‌కోడింగ్ చేసేటప్పుడు మీ పైప్‌లైన్ UIని మూడు సెకన్ల పాటు లాక్ చేస్తే, ఇంటర్‌ఫేస్ స్పందించేలా (responsive) ఉండటానికి మీరు భారీ పనులను Web Worker లోకి మార్చాల్సి ఉంటుంది.

ముందుగా ప్రాథమిక అంశాలను విడుదల చేయండి

ప్రతి ఫార్మాట్‌ను సపోర్ట్ చేయాలని అనిపించడం సహజమే మరియు