Paano Pahusayin ang Bilis ng Pag-load ng Pahina Gamit ang Mga Tumutugon na Larawan
Paano Pahusayin Ang Bilis Ng Pag Load Ng Pahina Gamit Ang Mga Tumutugon Na Larawan
Habang nagde-deploy ng website, karaniwang ginagamit ng mga developer ang parehong larawan para sa lahat ng laki ng screen, na hindi magandang kasanayan dahil hindi maaasahan ang browser para sa pagbabago ng laki. Sa ganoong sitwasyon, magkakabisa ang mga tumutugon na larawan na tinitiyak na mada-download ang larawan sa angkop na laki at kalidad para sa kaukulang device, at sa gayo'y pinapahusay ang bilis ng paglo-load ng page.
Paano Pahusayin ang Bilis ng Pag-load ng Pahina Gamit ang Mga Tumutugon na Imahe?
Upang mapahusay ang bilis ng pag-load ng page sa pamamagitan ng mga tumutugong larawan, isaalang-alang ang mga sumusunod na pamamaraan:
Halimbawa 1: Pahusayin ang Bilis ng Pag-load ng Pahina Sa pamamagitan ng Mga Tumutugon na Mga Larawan Gamit ang 'srcset' Attribute
Ang pinaka-maginhawang diskarte sa paglalapat ng mga tumutugon na larawan ay ang paggamit ng ' srcset ' attribute na naipon sa ' ” tag. Ang katangiang ito ay nagbibigay-daan sa programmer na tumukoy ng iba't ibang laki ng larawan, at awtomatikong pinipili ng browser ang pinakaangkop na larawan na may paggalang sa laki ng screen ng user. Ang sumusunod ay ang demonstrasyon:
DOCTYPE html > < html > < ulo > < meta charset = 'utf-8' > < meta pangalan = 'viewport' nilalaman = 'width=device-width, initial-scale=1' > < pamagat > pamagat > ulo > < katawan > < img src = 'F:\JOB TECHNICAL ARTICLES\imgre.png' lahat = 'Tumugon na Larawan' srcset = 'F:\JOB TECHNICAL ARTICLES\imgre.png 400w, F:\JOB TECHNICAL ARTICLES\imgre.png 800w, F:\JOB TECHNICAL ARTICLES\imgre.png 1200w' /> katawan > html >
Sa code na ito:
Ang ' srcset Kasama ang attribute na binubuo ng path ng larawan at iba't ibang lapad sa bawat pagkakataon.
Ito ay tulad na ang imahe ' F:\JOB TECHNICAL ARTICLES\imgre.png 400w Ang ” ay kumakatawan sa isang path ng larawan na may lapad na “ 400 ” mga pixel.
Batay sa impormasyong ito, sinusuri ng browser ang pinakaangkop na larawang ida-download batay sa laki ng screen ng user upang ang mas maliliit na screen ay nagpapakita ng mas maliliit na larawan, sa gayon ay nakakatipid ng bandwidth.
Output
Halimbawa 2: Pahusayin ang Bilis ng Pag-load ng Pahina Sa pamamagitan ng Mga Tumutugon na Larawan sa pamamagitan ng Pagtukoy ng Iba't ibang Densidad ng Pixel
Sa halimbawang ito, tutukuyin ang path ng imahe kasama ng iba't ibang density ng pixel para sa mga high-resolution na display. Ito ay maaaring makamit sa pamamagitan ng ' srcset ” attribute, na ipinapakita sa ibaba:
DOCTYPE html > < html > < ulo > < meta charset = 'utf-8' > < meta pangalan = 'viewport' nilalaman = 'width=device-width, initial-scale=1' > < pamagat > pamagat > ulo > < katawan > < img src = 'F:\JOB TECHNICAL ARTICLES\imgre.png' lahat = 'Tumugon na Larawan' srcset = 'F:\JOB TECHNICAL ARTICLES\imgre.png 1x, F:\JOB TECHNICAL ARTICLES\imgre.png 1.5x, F:\JOB TECHNICAL ARTICLES\imgre.png 2x' /> katawan > html >
Sa snippet ng code na ito, tukuyin ang path ng larawan nang tatlong beses na may iba't ibang densidad ng pixel. Ito ay tulad na ang browser ay nag-opt para sa pinaka-angkop/angkop na imahe upang matiyak ang pinakamataas na kalidad sa iba't ibang mga screen.
Tandaan: Ang ' 1x ” Ang pixel ay ang default na halaga kaya ito ay isang pagpipilian para sa user na iugnay sa path ng larawan o hindi.
Output
Halimbawa 3: Pahusayin ang Bilis ng Pag-load ng Pahina Sa pamamagitan ng Mga Tumutugon na Larawan Gamit ang Attribute na 'mga laki'.
Sa ilang sitwasyon, maaaring magkaroon ng limitasyon kung saan nag-iiba ang aktwal na laki ng larawan sa screen mula sa lapad ng screen. Upang matugunan ang isyung ito, ang ' mga sukat ” attribute ay maaaring gamitin upang isama ang laki ng imahe na may kinalaman sa mga query sa media o isang nakapirming laki. Nasa ibaba ang pagpapakita ng code:
DOCTYPE html > < html > < ulo > < meta charset = 'utf-8' > < meta pangalan = 'viewport' nilalaman = 'width=device-width, initial-scale=1' > < pamagat > pamagat > ulo > < katawan > < img src = 'F:\JOB TECHNICAL ARTICLES\imgre.png' lahat = 'Tumugon na Larawan' srcset = 'F:\JOB TECHNICAL ARTICLES\imgre.png 50w, F:\JOB TECHNICAL ARTICLES\imgre.png 800w, F:\JOB TECHNICAL ARTICLES\imgre.png 1200w' mga sukat = '(max-width: 800px) 100vw, 800px' /> katawan > html >
Sa block ng code na ito, ang “ mga sukat Pinagsasama ng katangian ng media ang mga query at laki ng media. Ito ay tulad na ginagabayan nito ang browser na mag-opt para sa laki ng imahe na may paggalang sa lapad ng screen ng user. Tinitiyak nito na ang (mga) larawan ay hindi lalampas sa target na maximum na lapad.
Output
Mahahalagang Pagsasaalang-alang Habang Ginagamit ang 'mga laki' na Katangian
Mayroong ilang mga limitasyon sa paggamit ng ' mga sukat ” attribute na nakalista rin sa ibaba:
Kapag gumagamit ng maraming media query sa ' mga sukat ” attribute, tiyaking napili ang unang totoong media query. Gayundin, siguraduhin na ang mga query sa media ay nakaayos mula sa pinaka-espesipiko hanggang sa hindi gaanong partikular.
Ang attribute na 'sizes' ay hindi sumusuporta sa mga laki ng porsyento dahil hindi alam ng browser kung gaano kalawak ang isang bagay na tinukoy sa mga porsyento hanggang sa malaman nito ang lapad ng parent na elemento.
Halimbawa 4: Pahusayin ang Bilis ng Pag-load ng Pahina Sa pamamagitan ng Mga Tumutugon na Mga Larawan Gamit ang Elementong “”.
Ang ' ” element ay nagbibigay-daan sa programmer na magpakita at mag-deploy ng maraming larawan sa iba't ibang laki ng screen. Nakakatulong ito sa mga kaso kung saan nag-iiba-iba ang content batay sa device. Nasa ibaba ang pagpapakita ng code:
DOCTYPE html > < html > < ulo > < meta charset = 'utf-8' > < meta pangalan = 'viewport' nilalaman = 'width=device-width, initial-scale=1' > < pamagat > pamagat > ulo > < katawan > < larawan > < pinagmulan media = '(max-width: 100px)' srcset = 'F:\JOB TECHNICAL ARTICLES\imgbanner.png' /> < img src = 'F:\JOB TECHNICAL ARTICLES\imgre.png' lahat = 'Tumugon na Larawan' /> larawan > katawan > html >
Ayon sa mga linya ng code na ito:
Tukuyin ang ' 'elemento na nag-iipon ng ' ” na mga elemento para sa iba't ibang larawan at hayaan ang browser na pumili ng naaangkop batay sa laki ng screen ng user.
Gayundin, kung wala sa ' Ang mga elemento ay angkop para sa laki ng screen, ang imaheng tinukoy sa ' ” ang tag ay nagsisilbing fallback.
Nagreresulta ito sa pagdaragdag ng isang kahaliling larawan sa isang hindi inaasahang kaso, sa gayon ay pinapanatili ang pinahusay na bilis ng pag-load ng pahina.
Output
Konklusyon
Ang bilis ng pag-load ng pahina ay maaaring mapahusay sa pamamagitan ng mga tumutugon na larawan gamit ang ' srcset ” attribute, na tumutukoy sa iba't ibang pixel density, gamit ang ' mga sukat ” attribute, o sa pamamagitan ng “ ' elemento. Ang ' ” Ang diskarte sa elemento ay maaaring isaalang-alang kung wala sa iba pang mga diskarte ang gumagana dahil nagdaragdag ito ng kahaliling larawan sa isang hindi inaasahang kaso nang walang karagdagang mga opsyon para sa parehong larawan.
