బ్రౌజర్-ఆధారిత చిత్ర కన్వర్షన్ ఎలా పనిచేస్తుంది
ప్రతి కన్వర్షన్ పూర్తిగా JavaScript లో రన్ అవ్వే నాలుగు-అడుగుల పైప్లైన్. కోడెక్ లైబ్రరీ డౌన్లోడ్ కాదు మరియు సర్వర్ పాల్గొంటుంది. బ్రౌజర్ సొంత Canvas API మెమరీలో డీకోడ్, రీసైజ్, మరియు రీ-ఎన్కోడ్ నిర్వహిస్తుంది, అప్పుడు పేజ్ ప్రివ్యూ చేయగల లేదా zip చేయగల Blob ఇస్తుంది. ప్రతి అడుగు ట్యాబ్ సాండ్బాక్స్ లోపల జీవిస్తుంది కాబట్టి, అసలు ఫైళ్ళు నెట్వర్క్కు చేరవు.
- ప్రతి అప్లోడ్ చేయబడిన ఫైల్ను Blob గా చదివి ఒక object URL క్రియేట్ చేయండి, తద్వారా బ్రౌజర్ దానిని స్థానికంగా డీకోడ్ చేయగలదు, సర్వర్కు బైట్లు కాపీ చేయకుండా లేదా డిస్క్కు పెర్సిస్ట్ చేయకుండా.
- అసలు ఆస్పెక్ట్ రేషియో నిలుపుకుంటూ రీసైజ్ కాన్స్ట్రెయింట్ వర్తిస్తూ డీకోడ్ చేసిన చిత్రాన్ని ఆఫ్స్క్రీన్ Canvas ఎలిమెంట్లో డ్రా చేయండి. మీరు మ్యాక్స్ వెడల్పు లేదా మ్యాక్స్ డైమెన్షన్ ఎంచుకుంటే, డౌన్స్కేల్ ఇక్కడ జరుగుతుంది.
- పిక్సెల్లు రీ-ఎన్కోడ్ చేయడానికి
canvas.toBlob(callback, targetMimeType, quality)కాల్ చేయండి. PNG అవుట్పుట్ ఎల్లప్పుడూ లాస్లెస్; JPEG మరియు WebP క్వాలిటీ స్లైడర్ గౌరవిస్తాయి, ఇది నేరుగా ఎన్కోడర్ క్వాంటైజేషన్ సెట్టింగ్కు మ్యాప్ అవుతుంది. - అవుట్పుట్ డైమెన్షన్లు మరియు ఫైల్ సైజుతో బిఫోర్/ఆఫ్టర్ థంబ్నెయిల్ చూపించండి, అప్పుడు ప్రతి చిత్రానికి డౌన్లోడ్ బటన్ లేదా మొత్తం బ్యాచ్ కోసం సింగిల్ ZIP అందించండి. ZIP పూర్తిగా ట్యాబ్లో రన్ అయ్యే 8 KB లైబ్రరీ fflate ఉపయోగించి మెమరీలో నిర్మించబడుతుంది.
చిత్ర ఫార్మాట్లు ఎందుకు కన్వర్ట్ చేయాలి?
- PNG నుండి WebP కి మారడం 0.8 క్వాలిటీలో కనిపించే క్వాలిటీ నష్టం లేకుండా సాధారణ ఫైల్ సైజులు 25 నుండి 35% తగ్గిస్తుంది, ఇది పేజ్ వెయిట్ నేరుగా తగ్గిస్తుంది మరియు Core Web Vitals LCP స్కోర్లు మెరుగుపరుస్తుంది.
- PNG JPEG తీసివేసిన చోట ట్రాన్స్పారెన్సీ నిలుపుతుంది. PNG నుండి JPEG కి వెళ్ళడం ట్రాన్స్పేరెంట్ పిక్సెల్లను తెల్ల బ్యాక్గ్రౌండ్కు వ్యతిరేకంగా రెండర్ చేస్తుంది, ఇది మొదటి స్థానంలో PNG అంగీకరించలేని డెస్టినేషన్కు సరిగ్గా ఏమి కావాలో అది.
- సోషల్ ప్లాట్ఫారమ్లు మరియు యాడ్ నెట్వర్క్లకు ఖచ్చితమైన ఫార్మాట్ అవసరాలు ఉన్నాయి. Facebook మరియు LinkedIn ఫోటో అప్లోడ్లకు JPEG ఇష్టపడతాయి, Twitter OG ప్రివ్యూ పైప్లైన్ WebP అంగీకరిస్తుంది. అప్లోడ్ చేయడానికి ముందు క్విక్ కన్వర్షన్ పాస్ రిజెక్టెడ్-క్రియేటివ్ పింగ్-పాంగ్ నివారిస్తుంది.
- CMS లేదా DAM కు అప్లోడ్ చేయడానికి ముందు మిక్స్డ్-ఫార్మాట్ చిత్రాల బ్యాచ్ను సింగిల్ అవుట్పుట్ ఫార్మాట్కు స్టాండర్డైజ్ చేయడం ఇంజెస్ట్ పైప్లైన్ నుండి ఫార్మాట్-హ్యాండ్లింగ్ బ్రాంచ్లు తొలగిస్తుంది.
సాధారణ అప్లికేషన్లు
సోర్స్ ఫార్మాట్ మరియు డెస్టినేషన్ ఎక్స్పెక్టేషన్లు మ్యాచ్ కానప్పుడు ఫార్మాట్ కన్వర్షన్ వస్తుంది. మేము మళ్ళీ మళ్ళీ చూసే మూడు పాటర్న్లు.
- Shopify లేదా WooCommerce స్టోర్ కోసం ప్రొడక్ట్ ఫోటోలు తయారు చేయడం. JPEG అసలులు పబ్లిక్ స్టోర్ఫ్రంట్ కోసం WebP 0.85 క్వాలిటీలో కన్వర్ట్ చేయబడతాయి, అయితే WebP రిజెక్ట్ చేసే ప్రింట్-రెడీ ఎగ్జ్పోర్ట్లు మరియు మార్కెట్ప్లేస్ లిస్టింగ్ కోసం PNG కాపీలు పక్కన ఉంచబడతాయి.
- React లేదా Next.js బిల్డ్లో ప్రవేశించే ముందు డిజైనర్-సప్లైడ్ PNG ఎగ్జ్పోర్ట్లను JPEG లేదా WebP కి కన్వర్ట్ చేయడం. ఫ్రేమ్వర్క్ చిత్ర పైప్లైన్ చిన్న సోర్స్ పిక్కప్ చేస్తుంది మరియు ప్రొడక్షన్ బండిల్ ప్రతి రూట్ తక్కువ బైట్లు షిప్ చేస్తుంది.
- QA రన్ నుండి స్క్రీన్షాట్ల ఫోల్డర్ బ్యాచ్-ప్రాసెస్ చేయడం. PNG నుండి JPEG 0.9 క్వాలిటీలో సాధారణంగా 50-స్క్రీన్షాట్ ఆర్కైవ్ బగ్ ట్రాకర్ టికెట్కు అటాచ్ చేయడానికి ముందు దాదాపు 120 MB నుండి 20 MB కంటే తక్కువకు తగ్గిస్తుంది.
పని చేసిన ఉదాహరణ: 2 MB PNG నుండి 300 KB WebP
2400×1600 పిక్సెల్స్ వద్ద 2 MB PNG హీరో చిత్రం మార్కెటింగ్ లాండింగ్ పేజ్లలో సాధారణ పేలోడ్. కన్వర్షన్ నిజమైన పేజ్లో ఎంత సేవ్ చేస్తుందో దానికి ఇది ఒక సరైన బెంచ్మార్క్.
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 మరియు తర్వాత మాత్రమే ఉంది. WebAssembly-ఆధారిత AVIF పాత్ v1.1 కోసం ప్లాన్ చేయబడింది.
ఇది నా పరికరంలో జరుగుతుందా?
అవును, పూర్తిగా. పేజ్ మెమరీలో ప్రతి చిత్రాన్ని డీకోడ్ మరియు రీ-ఎన్కోడ్ చేయడానికి బ్రౌజర్ నేటివ్ Canvas API మరియు Web File API ఉపయోగిస్తుంది. ఏ చిత్ర డేటా సర్వర్కు పంపబడదు, తాత్కాలిక అప్లోడ్ లేదు, క్లౌడ్ రౌండ్-ట్రిప్ లేదు. మీరే DevTools తెరిచి, Network పానెల్కు మారి, కన్వర్షన్ రన్ చేయడం ద్వారా వెరిఫై చేయవచ్చు.
PNG మరియు JPEG మధ్య క్వాలిటీ ట్రేడ్-ఆఫ్ ఏమిటి?
PNG లాస్లెస్ ఫార్మాట్. ప్రతి పిక్సెల్ ఎన్కోడ్ సైకిల్ ద్వారా ఖచ్చితంగా నిలుస్తుంది, ఇది స్క్రీన్షాట్లు, UI క్యాప్చర్లు, మరియు షార్ప్ ఎడ్జ్లు లేదా పెద్ద ఫ్లాట్-కలర్ రీజియన్లు ఉన్న చిత్రాలకు PNG సరైన ఎంపిక చేస్తుంది. JPEG DCT కంప్రెషన్ ఉపయోగిస్తుంది మరియు కంటికి అరుదుగా కనిపించే ఫైన్ డీటెయిల్ తీసివేస్తుంది. WebP లాస్లెస్ మరియు లాసీ మోడ్లలో రెండింటిలోనూ రన్ అవుతుంది; ఈ క్వాలిటీ స్లైడర్ లాసీ ఎన్కోడర్ నడపుతుంది.
AVIF సపోర్ట్ ఎప్పుడు వస్తుంది?
canvas.toBlob(…, 'image/avif') ద్వారా AVIF ఎన్కోడింగ్ ఈరోజు Chrome 105 మరియు తర్వాత మాత్రమే పని చేస్తుంది; Safari మరియు Firefox నేటివ్గా సపోర్ట్ చేయవు. v1.1 రిలీజ్ నేటివ్ పారిటీ కోసం వేచి ఉండకుండా ప్రతి మోడర్న్ బ్రౌజర్లో ఫీచర్ పని చేసేలా లైట్వెయిట్ WebAssembly ఎన్కోడర్ ఉపయోగించి ఆప్ట్-ఇన్ AVIF పాత్ జోడిస్తుంది. అప్పటి వరకు, WebP ఎన్కోడర్ సిఫారసు చేయబడిన ప్రత్యామ్నాయం.
మీ చిత్రాలు డ్రాప్ చేయండి, ఫార్మాట్ ఎంచుకోండి, కన్వర్ట్ చేయండి. అన్నీ మీ ట్యాబ్లో రన్ అవుతాయి. అప్లోడ్ లేదు, అకౌంట్ లేదు, సర్వర్ క్యూ కోసం వేచి ఉండటం లేదు.