ప్రతిస్పందించే చిత్రాలను ఉపయోగించి పేజీ లోడ్ వేగాన్ని ఎలా పెంచాలి
Pratispandince Citralanu Upayoginci Peji Lod Veganni Ela Pencali
వెబ్‌సైట్‌ను అమలు చేస్తున్నప్పుడు, డెవలపర్‌లు సాధారణంగా అన్ని స్క్రీన్ పరిమాణాల కోసం ఒకే చిత్రాన్ని ఉపయోగించుకుంటారు, ఇది మంచి పద్ధతి కాదు ఎందుకంటే పునఃపరిమాణం కోసం బ్రౌజర్‌పై ఆధారపడలేము. అటువంటి పరిస్థితిలో, సంబంధిత పరికరానికి తగిన పరిమాణం మరియు నాణ్యతతో చిత్రం డౌన్‌లోడ్ చేయబడిందని నిర్ధారిస్తూ ప్రతిస్పందించే చిత్రాలు అమలులోకి వస్తాయి, తద్వారా పేజీ లోడింగ్ వేగం పెరుగుతుంది.
ప్రతిస్పందించే చిత్రాలను ఉపయోగించి పేజీ లోడ్ వేగాన్ని ఎలా పెంచాలి?
ప్రతిస్పందించే చిత్రాల ద్వారా పేజీ లోడ్ వేగాన్ని మెరుగుపరచడానికి, క్రింది పద్ధతులను పరిగణించండి:
ఉదాహరణ 1: “srcset” అట్రిబ్యూట్ ఉపయోగించి రెస్పాన్సివ్ ఇమేజ్‌ల ద్వారా పేజీ లోడ్ వేగాన్ని పెంచండి
ప్రతిస్పందించే చిత్రాలను వర్తింపజేయడానికి అత్యంత అనుకూలమైన విధానం ఏమిటంటే ' srcset 'లో కూడబెట్టిన లక్షణం' ” ట్యాగ్. ఈ లక్షణం వివిధ చిత్ర పరిమాణాలను పేర్కొనడానికి ప్రోగ్రామర్‌ను అనుమతిస్తుంది మరియు వినియోగదారు స్క్రీన్ పరిమాణానికి సంబంధించి బ్రౌజర్ స్వయంచాలకంగా అత్యంత అనుకూలమైన చిత్రాన్ని ఎంచుకుంటుంది. క్రింది ప్రదర్శన:
DOCTYPE html > < html > < తల > < మెటా అక్షర సమితి = 'utf-8' > < మెటా పేరు = 'వ్యూపోర్ట్' విషయము = 'వెడల్పు=పరికర వెడల్పు, ప్రారంభ-స్థాయి=1' > < శీర్షిక > శీర్షిక > తల > < శరీరం > < img src = 'F:\జాబ్ టెక్నికల్ ఆర్టికల్స్\imgre.png' ప్రతిదీ = 'ప్రతిస్పందించే చిత్రం' srcset = 'F:\JOB టెక్నికల్ ఆర్టికల్స్\imgre.png 400w, F:\JOB టెక్నికల్ ఆర్టికల్స్\imgre.png 800w, F:\JOB TECHNICAL ఆర్టికల్స్\imgre.png 1200w' /> శరీరం > html >
ఈ కోడ్‌లో:
ది ' srcset ”అట్రిబ్యూట్ ప్రతిసారీ చిత్రం యొక్క మార్గం మరియు విభిన్న వెడల్పులను కలిగి ఉంటుంది.
ఇది చిత్రం ' F:\జాబ్ టెక్నికల్ ఆర్టికల్స్\imgre.png 400వా '' వెడల్పు ఉన్న చిత్ర మార్గాన్ని సూచిస్తుంది 400 ”పిక్సెల్స్.
ఈ సమాచారం ఆధారంగా, బ్రౌజర్ వినియోగదారు స్క్రీన్ పరిమాణం ఆధారంగా డౌన్‌లోడ్ చేయడానికి అత్యంత అనుకూలమైన చిత్రాన్ని విశ్లేషిస్తుంది, చిన్న స్క్రీన్‌లు చిన్న చిత్రాలను ప్రదర్శిస్తాయి, తద్వారా బ్యాండ్‌విడ్త్‌ను సంరక్షిస్తుంది.
అవుట్‌పుట్
ఉదాహరణ 2: విభిన్న పిక్సెల్ సాంద్రతలను పేర్కొనడం ద్వారా ప్రతిస్పందించే చిత్రాల ద్వారా పేజీ లోడ్ వేగాన్ని మెరుగుపరచండి
ఈ ఉదాహరణలో, హై-రిజల్యూషన్ డిస్‌ప్లేల కోసం వివిధ పిక్సెల్ సాంద్రతలతో పాటు ఇమేజ్ పాత్ పేర్కొనబడుతుంది. దీని ద్వారా సాధించవచ్చు ' srcset 'లక్షణం, క్రింద ప్రదర్శించబడింది:
DOCTYPE html > < html > < తల > < మెటా అక్షర సమితి = 'utf-8' > < మెటా పేరు = 'వ్యూపోర్ట్' విషయము = 'వెడల్పు=పరికర వెడల్పు, ప్రారంభ-స్థాయి=1' > < శీర్షిక > శీర్షిక > తల > < శరీరం > < img src = 'F:\జాబ్ టెక్నికల్ ఆర్టికల్స్\imgre.png' ప్రతిదీ = 'ప్రతిస్పందించే చిత్రం' srcset = 'F:\JOB టెక్నికల్ ఆర్టికల్స్\imgre.png 1x, F:\JOB టెక్నికల్ ఆర్టికల్స్\imgre.png 1.5x, F:\JOB టెక్నికల్ ఆర్టికల్స్\imgre.png 2x' /> శరీరం > html >
ఈ కోడ్ స్నిప్పెట్‌లో, విభిన్న పిక్సెల్ సాంద్రతలతో చిత్ర మార్గాన్ని మూడుసార్లు పేర్కొనండి. వివిధ స్క్రీన్‌లలో అత్యుత్తమ నాణ్యతను నిర్ధారించడానికి బ్రౌజర్ అత్యంత సముచితమైన/అనుకూలమైన చిత్రాన్ని ఎంచుకునే విధంగా ఉంటుంది.
గమనిక: ది ' 1x ” పిక్సెల్ డిఫాల్ట్ విలువ కాబట్టి ఇది ఇమేజ్ యొక్క మార్గంతో అనుబంధించాలా వద్దా అనేది వినియోగదారుకు ఎంపిక.
అవుట్‌పుట్
ఉదాహరణ 3: 'పరిమాణాలు' లక్షణాన్ని ఉపయోగించి ప్రతిస్పందించే చిత్రాల ద్వారా పేజీ లోడ్ వేగాన్ని మెరుగుపరచండి
కొన్ని సందర్భాల్లో, స్క్రీన్‌పై అసలు ఇమేజ్ పరిమాణం స్క్రీన్ వెడల్పు నుండి మారుతూ ఉండే పరిమితి ఉండవచ్చు. ఈ సమస్యను పరిష్కరించడానికి, ' పరిమాణాలు ” మీడియా ప్రశ్నలకు లేదా స్థిర పరిమాణానికి సంబంధించి చిత్ర పరిమాణాన్ని చేర్చడానికి లక్షణాన్ని ఉపయోగించవచ్చు. కోడ్ ప్రదర్శన క్రింద ఉంది:
DOCTYPE html > < html > < తల > < మెటా అక్షర సమితి = 'utf-8' > < మెటా పేరు = 'వ్యూపోర్ట్' విషయము = 'వెడల్పు=పరికర వెడల్పు, ప్రారంభ-స్థాయి=1' > < శీర్షిక > శీర్షిక > తల > < శరీరం > < img src = 'F:\జాబ్ టెక్నికల్ ఆర్టికల్స్\imgre.png' ప్రతిదీ = 'ప్రతిస్పందించే చిత్రం' srcset = 'F:\JOB టెక్నికల్ ఆర్టికల్స్\imgre.png 50w, F:\JOB టెక్నికల్ ఆర్టికల్స్\imgre.png 800w, F:\JOB టెక్నికల్ ఆర్టికల్స్\imgre.png 1200w' పరిమాణాలు = '(గరిష్ట-వెడల్పు: 800px) 100vw, 800px' /> శరీరం > html >
ఈ కోడ్ బ్లాక్‌లో, ' పరిమాణాలు ” లక్షణం మీడియా ప్రశ్నలు మరియు పరిమాణాలను ఏకీకృతం చేస్తుంది. ఇది వినియోగదారు స్క్రీన్ వెడల్పుకు సంబంధించి ఇమేజ్ పరిమాణాన్ని ఎంచుకోవడానికి బ్రౌజర్‌కు మార్గనిర్దేశం చేస్తుంది. చిత్రం(లు) లక్ష్య గరిష్ట వెడల్పును మించకుండా ఇది నిర్ధారిస్తుంది.
అవుట్‌పుట్
'పరిమాణాలు' లక్షణాన్ని ఉపయోగిస్తున్నప్పుడు ముఖ్యమైన పరిగణనలు
'ని ఉపయోగించడంలో కొన్ని పరిమితులు ఉన్నాయి. పరిమాణాలు 'లక్షణం అలాగే క్రింద జాబితా చేయబడింది:
'లో బహుళ మీడియా ప్రశ్నలను ఉపయోగించినప్పుడు పరిమాణాలు ” లక్షణం, మొదటి నిజమైన మీడియా ప్రశ్న ఎంపిక చేయబడిందని నిర్ధారించుకోండి. అలాగే, మీడియా ప్రశ్నలు చాలా నిర్దిష్టమైన వాటి నుండి కనీసం నిర్దిష్టమైన వాటి వరకు ఆర్డర్ చేయబడి ఉన్నాయని నిర్ధారించుకోండి.
పేరెంట్ ఎలిమెంట్ వెడల్పు గురించి తెలుసుకునే వరకు శాతాలలో పేర్కొన్నది ఎంత విస్తృతంగా ఉంటుందో బ్రౌజర్‌కు తెలియనందున 'పరిమాణాలు' లక్షణం శాతం పరిమాణాలకు మద్దతు ఇవ్వదు.
ఉదాహరణ 4: “” మూలకాన్ని ఉపయోగించి ప్రతిస్పందించే చిత్రాల ద్వారా పేజీ లోడ్ వేగాన్ని మెరుగుపరచండి
ది ' <చిత్రం> ” మూలకం ప్రోగ్రామర్‌ని విభిన్న స్క్రీన్ పరిమాణాలలో బహుళ చిత్రాలను ప్రదర్శించడానికి మరియు అమలు చేయడానికి అనుమతిస్తుంది. పరికరం ఆధారంగా కంటెంట్ మారుతున్న సందర్భాల్లో ఇది సహాయకరంగా ఉంటుంది. కోడ్ ప్రదర్శన క్రింద ఉంది:
DOCTYPE html > < html > < తల > < మెటా అక్షర సమితి = 'utf-8' > < మెటా పేరు = 'వ్యూపోర్ట్' విషయము = 'వెడల్పు=పరికర వెడల్పు, ప్రారంభ-స్థాయి=1' > < శీర్షిక > శీర్షిక > తల > < శరీరం > < చిత్రం > < మూలం మీడియా = '(గరిష్ట-వెడల్పు: 100px)' srcset = 'F:\JOB టెక్నికల్ ఆర్టికల్స్\imgbanner.png' /> < img src = 'F:\జాబ్ టెక్నికల్ ఆర్టికల్స్\imgre.png' ప్రతిదీ = 'ప్రతిస్పందించే చిత్రం' /> చిత్రం > శరీరం > html >
ఈ కోడ్ లైన్ల ప్రకారం:
పేర్కొనండి ' <చిత్రం> 'సంచితం చేసే మూలకం' ” విభిన్న చిత్రాల కోసం మూలకాలు మరియు వినియోగదారు స్క్రీన్ పరిమాణం ఆధారంగా తగినదాన్ని ఎంచుకోవడానికి బ్రౌజర్‌ని అనుమతించండి.
అలాగే, ఏదీ లేకుంటే “ 'ఎలిమెంట్స్ స్క్రీన్ పరిమాణానికి అనుకూలంగా ఉంటాయి, 'లో పేర్కొన్న చిత్రం ” ట్యాగ్ ఫాల్‌బ్యాక్‌గా పనిచేస్తుంది.
ఇది ఫలితంగా ఊహించని సందర్భంలో ప్రత్యామ్నాయ చిత్రాన్ని జోడిస్తుంది, తద్వారా మెరుగుపరచబడిన పేజీ లోడ్ వేగాన్ని నిర్వహిస్తుంది.
అవుట్‌పుట్
ముగింపు
'ని ఉపయోగించి ప్రతిస్పందించే చిత్రాల ద్వారా పేజీ లోడ్ వేగాన్ని మెరుగుపరచవచ్చు srcset 'లక్షణం, వివిధ పిక్సెల్ సాంద్రతలను పేర్కొంటూ,' పరిమాణాలు 'లక్షణం, లేదా' ద్వారా <చిత్రం> ' మూలకం. ది ' <చిత్రం> ”అదే ఇమేజ్‌కి అదనపు ఎంపికలు లేకుండా ఊహించని సందర్భంలో ప్రత్యామ్నాయ చిత్రాన్ని జోడించినందున ఇతర విధానాలు ఏవీ పని చేయకపోతే మూలకం విధానం పరిగణించబడుతుంది.
