బ్రౌజర్-ఆధారిత చిత్ర కంప్రెషన్ ఎలా పనిచేస్తుంది
ప్రతి కంప్రెషన్ పాస్ పూర్తిగా JavaScript లో రన్ అవుతుంది. ఏ కోడెక్ లైబ్రరీ డౌన్లోడ్ కాదు మరియు ఏ సర్వర్ పాల్గొనదు. బ్రౌజర్ సొంత Canvas API చిత్రాన్ని డీకోడ్ చేసి, తక్కువ క్వాలిటీలో రీ-ఎన్కోడ్ చేసి, పేజ్ ప్రివ్యూ చేయగల, డౌన్లోడ్ చేయగల, లేదా zip చేయగల Blob మీకు ఇస్తుంది. ప్రతి అడుగు ట్యాబ్ సాండ్బాక్స్ లోపల ఉండటం వల్ల, అసలు ఫైళ్ళు నెట్వర్క్కు ఎప్పటికీ చేరవు.
- ప్రతి అప్లోడ్ చేయబడిన ఫైల్ను Blob గా చదివి ఒక object URL క్రియేట్ చేయండి, తద్వారా బ్రౌజర్ దానిని స్థానికంగా డీకోడ్ చేయగలదు, సర్వర్కు బైట్లు కాపీ చేయకుండా లేదా డిస్క్కు రాయకుండా.
- డీకోడ్ చేసిన చిత్రాన్ని దాని అసలు పిక్సెల్ డైమెన్షన్లలో ఆఫ్స్క్రీన్ Canvas ఎలిమెంట్పై డ్రా చేయండి, రీ-ఎన్కోడింగ్ కోసం సిద్ధంగా.
- పిక్సెల్లను రీ-ఎన్కోడ్ చేయడానికి
canvas.toBlob(callback, mimeType, quality)కాల్ చేయండి. క్వాలిటీ మోడ్లో స్లైడర్ విలువ నేరుగా ఎన్కోడర్ క్వాంటైజేషన్ సెట్టింగ్కు మ్యాప్ అవుతుంది; టార్గెట్-సైజు మోడ్లో అవుట్పుట్ blob మీ బైట్ బడ్జెట్ లోపల సరిపోయే వరకు పేజ్ క్వాలిటీ విలువను బైసెక్ట్ చేస్తుంది. - అసలు సైజు, కంప్రెస్ చేసిన సైజు, మరియు సేవింగ్స్ శాతంతో బిఫోర్/ఆఫ్టర్ రీడౌట్ చూపించండి, అప్పుడు ప్రతి చిత్రానికి డౌన్లోడ్ లేదా మొత్తం బ్యాచ్ కోసం ఒక సింగిల్ ZIP అందించండి. ZIP మొదటి వాడకంలో లోడ్ అయ్యే 8 KB లైబ్రరీ fflate ఉపయోగించి మెమరీలో నిర్మించబడుతుంది.
చిత్రాలను ఎందుకు కంప్రెస్ చేయాలి?
- చిన్న చిత్రాలు వేగంగా లోడ్ అవుతాయి. 4 MB హీరో చిత్రాన్ని 600 KB కి తగ్గించడం Largest Contentful Paint ను నేరుగా మెరుగుపరుస్తుంది, ఇది Google ర్యాంకింగ్కు ఉపయోగించే Core Web Vitals లో ఒకటి. అనేక ఫోటోలు ఉన్న పేజ్లో సేవింగ్ వేగవంతమైన మొదటి పెయింట్గా పెరుగుతుంది.
- తర్వాత అప్లోడ్ పరిమితులు ఉన్నాయి. చాలా CMS ప్లాట్ఫారమ్లు, టికెటింగ్ టూల్స్, మరియు ఇమెయిల్ సిస్టమ్లు 1 లేదా 2 MB పైన ఏదైనా తిరస్కరిస్తాయి, మరియు ఒక క్విక్ కంప్రెషన్ పాస్ మీరు పూర్తి ఎడిటర్ తెరవకుండానే ఫోటోను పరిమితి కింద తీసుకొస్తుంది.
- బ్యాండ్విడ్త్ మరియు స్టోరేజ్ స్కేల్లో డబ్బు ఖర్చు అవుతాయి. ఫుల్-సైజు PNG కు బదులు క్వాలిటీ 0.8 వద్ద WebP షిప్ చేయడం చిత్ర పేలోడ్ను మూడవ వంతు లేదా అంతకంటే ఎక్కువ తగ్గించగలదు, ఇది CDN ఎగ్రెస్ బిల్లులను మరియు మీ సందర్శకుల మొబైల్ డేటా వాడకాన్ని తగ్గిస్తుంది.
- కొన్ని చిత్రాలు అస్సలు అప్లోడ్ చేయకూడదు. ఇక్కడ ప్రతిదీ మీ బ్రౌజర్లో రన్ అవుతుంది కాబట్టి, ID స్కాన్లు, వైద్య చిత్రాలు, మరియు అంతర్గత స్క్రీన్షాట్లు మీ పరికరంలోనే ఉంటాయి. చింతించడానికి లూప్లో TinyPNG వంటి థర్డ్-పార్టీ సర్వర్ లేదు.
సాధారణ అప్లికేషన్లు
ఒక చిత్రం అది వెళ్ళే ప్రదేశం కంటే పెద్దగా ఉన్నప్పుడల్లా కంప్రెషన్ వస్తుంది. మేము మళ్ళీ మళ్ళీ చూసే మూడు పాటర్న్లు.
- ఆన్లైన్ స్టోర్ కోసం ప్రొడక్ట్ ఫోటోలు తయారు చేయడం. JPEG అసలులు క్వాలిటీ 0.8 కి (లేదా 200 KB టార్గెట్కు) కంప్రెస్ చేయబడతాయి, తద్వారా స్టోర్ఫ్రంట్ వేగంగా ఉండి మొబైల్లో Core Web Vitals క్లియర్ చేస్తుంది.
- బగ్ ట్రాకర్ లేదా wiki కి అటాచ్ చేయడానికి ముందు స్క్రీన్షాట్లను కుదించడం. క్వాలిటీ 0.85 వద్ద JPEG కి కన్వర్ట్ చేసిన PNG క్యాప్చర్ల బ్యాచ్ తరచుగా పదుల మెగాబైట్ల నుండి కొన్ని MB కి పడిపోతుంది.
- ఫోటోను అప్లోడ్ పరిమితి కింద తీసుకురావడం — 1 MB పైన ఫైళ్ళను తిరస్కరించే ఉద్యోగ దరఖాస్తు పోర్టల్, కఠినమైన అటాచ్మెంట్ పరిమితి ఉన్న ఇమెయిల్ సిస్టమ్, లేదా బైట్ బడ్జెట్కు సరిపోవాల్సిన ఫోరమ్ అవతార్.
పని చేసిన ఉదాహరణ: 4 MB JPEG నుండి 400 KB
ఫోన్ కెమెరా నుండి నేరుగా వచ్చే 4 MB JPEG అనేది అప్లోడ్ పరిమితులను తట్టుకొని పేజ్లను నెమ్మదిగా చేసే సాధారణ పేలోడ్. కంప్రెషన్ ఏమి సేవ్ చేస్తుందో దానికి ఇది ఒక సరైన బెంచ్మార్క్.
JPEG ను అప్లోడ్ జోన్లో డ్రాప్ చేయండి, ఫార్మాట్ను JPEG పైనే వదిలేయండి, మరియు క్వాలిటీ స్లైడర్ను 0.7 కి లాగండి లేదా టార్గెట్-సైజు మోడ్కు మారి 400 KB టైప్ చేయండి. క్వాలిటీ మోడ్లో Canvas పైప్లైన్ ఒకసారి రీ-ఎన్కోడ్ చేసి ఫలితం చూపిస్తుంది, ఫోటోను బట్టి సాధారణంగా 500 నుండి 700 KB చుట్టూ. టార్గెట్-సైజు మోడ్లో పేజ్ కొన్ని క్వాలిటీ విలువలు ప్రయత్నించి, ఇప్పటికీ 400 KB లోపల సరిపోయే అత్యధిక విలువపై స్థిరపడి, సేవింగ్స్ శాతం రిపోర్ట్ చేస్తుంది. సింగిల్ ఫైల్ తీసుకోవడానికి కార్డ్లో డౌన్లోడ్ క్లిక్ చేయండి, లేదా మీరు ఒకేసారి అనేక చిత్రాలు కంప్రెస్ చేస్తే .zip డౌన్లోడ్ క్లిక్ చేయండి. ఈ సైజు చిత్రానికి మొత్తం రౌండ్-ట్రిప్ ఒక సెకండ్ కంటే చాలా తక్కువలో రన్ అవుతుంది మరియు పేజ్ లోడ్ ముగిసిన తర్వాత సున్నా బ్యాండ్విడ్త్ వినియోగిస్తుంది.
క్వాలిటీ మోడ్ మరియు టార్గెట్-సైజు మోడ్ మధ్య తేడా ఏమిటి?
క్వాలిటీ మోడ్ మీకు 0.1 నుండి 1.0 వరకు ఒక స్లైడర్ ఇస్తుంది, ఇది JPEG లేదా WebP ఎన్కోడర్ క్వాంటైజేషన్ సెట్టింగ్కు మ్యాప్ అవుతుంది — తక్కువ సంఖ్యలు అంటే చిన్న ఫైళ్ళు మరియు ఎక్కువ కనిపించే ఆర్టిఫాక్ట్లు. టార్గెట్-సైజు మోడ్ సమస్యను తిప్పేస్తుంది: మీరు కిలోబైట్లలో సైజు పేర్కొంటారు మరియు పేజ్ క్వాలిటీ విలువను బైసెక్ట్ చేస్తుంది, మీ బడ్జెట్ లోపల సరిపోయే అత్యధిక క్వాలిటీ కనుగొనే వరకు కొన్నిసార్లు ఎన్కోడ్ చేస్తుంది. కఠినమైన పరిమితి ముఖ్యమైనప్పుడు (1 MB అప్లోడ్ పరిమితి అనుకోండి) టార్గెట్-సైజు సౌకర్యవంతమైనది; మీకు ఊహించదగిన దృశ్య ఫలితం కావాలంటే క్వాలిటీ మోడ్ వేగంగా మరియు మెరుగైనది. PNG లాస్లెస్, కాబట్టి దానికి ఏ మోడ్ వర్తించదు.
ఇది నా పరికరంలో జరుగుతుందా?
అవును, పూర్తిగా. పేజ్ ప్రతి చిత్రాన్ని మెమరీలో డీకోడ్ మరియు రీ-ఎన్కోడ్ చేయడానికి బ్రౌజర్ నేటివ్ Canvas API మరియు Web File API ఉపయోగిస్తుంది. ఏ చిత్ర డేటా సర్వర్కు పంపబడదు, తాత్కాలిక అప్లోడ్ లేదు, క్లౌడ్ రౌండ్-ట్రిప్ లేదు. మీరే వెరిఫై చేయవచ్చు: DevTools తెరిచి, Network పానెల్కు మారి, ఒక కంప్రెషన్ రన్ చేయండి. మీరు చూసే ఏకైక అవుట్బౌండ్ రిక్వెస్ట్లు మొదటి పేజ్ లోడ్ మరియు యాడ్ కాల్స్. చిత్రం ఆకారంలో ఏదీ ట్యాబ్ను వదిలిపోదు.
PNG ను కంప్రెస్ చేయడం కొన్నిసార్లు ఎందుకు దాదాపు తగ్గించదు?
PNG ఒక లాస్లెస్ ఫార్మాట్, కాబట్టి Canvas API దానిని చిన్నదిగా చేయడానికి వివరాలను విసిరివేయలేదు — అది అదే పిక్సెల్లను మాత్రమే రీ-ప్యాక్ చేయగలదు. ఫోటోగ్రాఫ్లకు, PNG అప్పటికే పెద్దది మరియు లాస్లెస్ రీ-ఎన్కోడ్ చాలా తక్కువ సేవ్ చేస్తుంది. నిజమైన లాభం అవుట్పుట్ ఫార్మాట్ను JPEG లేదా WebP కి మార్చడం నుండి వస్తుంది, ఇవి ఫోటోలకు సరిపోయే లాసీ కంప్రెషన్ ఉపయోగించి సాధారణంగా 4 నుండి 10 రెట్లు చిన్నదిగా వస్తాయి. మీకు లాస్లెస్ క్వాలిటీ లేదా ట్రాన్స్పారెన్సీ అవసరమైనప్పుడు మాత్రమే PNG ఉంచండి; లేకపోతే ఫోటోలకు JPEG లేదా ఉత్తమ సైజు-నుండి-క్వాలిటీ సమతుల్యత కోసం WebP ఎంచుకోండి.
నేను ఏ ఫార్మాట్ ఎంచుకోవాలి?
ఫోటోగ్రాఫ్లకు, క్వాలిటీ 0.8 వద్ద WebP ఉత్తమ సైజు-నుండి-క్వాలిటీ సమతుల్యత ఇస్తుంది మరియు 2021 నుండి షిప్ అయిన ప్రతి బ్రౌజర్ దీనిని సపోర్ట్ చేస్తుంది; డెస్టినేషన్ పాతదైనా లేదా కఠినమైనదైనా అయినప్పుడు JPEG సురక్షితమైన యూనివర్సల్ ఫాల్బ్యాక్. మీకు లాస్లెస్ క్వాలిటీ లేదా ఆల్ఫా ఛానల్ అవసరమైనప్పుడు మాత్రమే PNG ఎంచుకోండి — లైన్ ఆర్ట్, UI స్క్రీన్షాట్లు, ట్రాన్స్పారెన్సీ ఉన్న లోగోలు. మీరు పేజ్ స్పీడ్ కోసం ఆప్టిమైజ్ చేస్తూ మీ ఆడియన్స్ మోడర్న్ బ్రౌజర్లు వాడితే, WebP దాదాపు ఎల్లప్పుడూ సరైన ఎంపిక; మీరు పాత CMS లేదా WebP తిరస్కరించే ప్రింట్ పైప్లైన్కు ఫీడ్ చేస్తుంటే, JPEG తో కొనసాగండి.
మీ చిత్రాలు డ్రాప్ చేయండి, ఒక క్వాలిటీ స్థాయి లేదా టార్గెట్ సైజు ఎంచుకోండి, కంప్రెస్ చేయండి. అన్నీ మీ ట్యాబ్లో రన్ అవుతాయి. అప్లోడ్ లేదు, అకౌంట్ లేదు, సర్వర్ క్యూ కోసం వేచి ఉండటం లేదు.