Докато разгръщат уебсайт, разработчиците обикновено използват едно и също изображение за всички размери на екрана, което не е добра практика, тъй като не може да се разчита на браузъра за преоразмеряване. В такава ситуация реагиращите изображения влизат в сила, като гарантират, че изображението се изтегля с подходящ размер и качество за съответното устройство, като по този начин се подобрява скоростта на зареждане на страницата.
Как да подобрите скоростта на зареждане на страницата с помощта на адаптивни изображения?
За да увеличите скоростта на зареждане на страницата чрез адаптивни изображения, помислете за следните методологии:
Пример 1: Подобрете скоростта на зареждане на страницата чрез адаптивни изображения с помощта на атрибута „srcset“
Най-удобният подход за прилагане на адаптивни изображения може да бъде използването на „ srcset ' атрибут, натрупан в ' ” таг. Този атрибут позволява на програмиста да задава различни размери на изображението, а браузърът автоматично избира най-подходящото изображение спрямо размера на екрана на потребителя. Следва демонстрацията:
DOCTYPE html >
< html >
< глава >
< мета набор от знаци = 'utf-8' >
< мета име = 'viewport' съдържание = 'width=device-width, initial-scale=1' >
< заглавие > заглавие >
глава >
< тяло >
< img src = 'F:\ТЕХНИЧЕСКИ СТАТИИ ЗА РАБОТА\imgre.png' всичко = „Отзивчиво изображение“
srcset = 'F:\ТЕХНИЧЕСКИ СТАТИИ ЗА РАБОТА\imgre.png 400w, F:\ТЕХНИЧЕСКИ СТАТИИ ЗА РАБОТА\imgre.png 800w, F:\ТЕХНИЧЕСКИ СТАТИИ ЗА РАБОТА\imgre.png 1200w'
/>
тяло >
html >
В този код:
- „ srcset ” е включен атрибут, който включва пътя на изображението и различни ширини всеки път.
- Това е такова, че изображението „ F:\РАБОТА ТЕХНИЧЕСКИ СТАТИИ\imgre.png 400w ” представлява път на изображение с ширина „ 400 ” пиксела.
- Въз основа на тази информация браузърът анализира най-подходящото изображение за изтегляне въз основа на размера на екрана на потребителя, така че по-малките екрани да показват по-малки изображения, като по този начин запазват честотната лента.
Изход
Пример 2: Подобрете скоростта на зареждане на страницата чрез адаптивни изображения чрез указване на различни плътности на пикселите
В този пример пътят на изображението ще бъде указан заедно с различни плътности на пикселите за дисплеи с висока разделителна способност. Това може да се постигне чрез „ srcset ”, показан по-долу:
DOCTYPE html >< html >
< глава >
< мета набор от знаци = 'utf-8' >
< мета име = 'viewport' съдържание = 'width=device-width, initial-scale=1' >
< заглавие > заглавие >
глава >
< тяло >
< img src = 'F:\ТЕХНИЧЕСКИ СТАТИИ ЗА РАБОТА\imgre.png' всичко = „Отзивчиво изображение“ srcset = 'F:\ТЕХНИЧЕСКИ СТАТИИ ЗА РАБОТА\imgre.png 1x, F:\ТЕХНИЧЕСКИ СТАТИИ ЗА РАБОТА\imgre.png 1,5x, F:\ТЕХНИЧЕСКИ СТАТИИ ЗА РАБОТА\imgre.png 2x'
/>
тяло >
html >
В този фрагмент от код посочете пътя на изображението три пъти с различна плътност на пикселите. Това е така, че браузърът избира най-подходящото/подходящо изображение, за да осигури най-високо качество на различни екрани.
Забележка: „ 1x ” пиксел е стойността по подразбиране, така че е избор за потребителя да се свърже с пътя на изображението или не.
Изход
Пример 3: Подобрете скоростта на зареждане на страницата чрез адаптивни изображения с помощта на атрибута „размери“
В някои ситуации може да има ограничение, когато действителният размер на изображението на екрана варира от ширината на екрана. За да се справи с този проблем, „ размери ” може да се използва за включване на размера на изображението по отношение на медийни заявки или фиксиран размер. По-долу е демонстрацията на кода:
DOCTYPE html >< html >
< глава >
< мета набор от знаци = 'utf-8' >
< мета име = 'viewport' съдържание = 'width=device-width, initial-scale=1' >
< заглавие > заглавие >
глава >
< тяло >
< img src = 'F:\ТЕХНИЧЕСКИ СТАТИИ ЗА РАБОТА\imgre.png' всичко = „Отзивчиво изображение“ srcset = 'F:\ТЕХНИЧЕСКИ СТАТИИ ЗА РАБОТА\imgre.png 50w, F:\ТЕХНИЧЕСКИ СТАТИИ ЗА РАБОТА\imgre.png 800w, F:\ТЕХНИЧЕСКИ СТАТИИ ЗА РАБОТА\imgre.png 1200w'
размери = '(максимална ширина: 800px) 100vw, 800px'
/>
тяло >
html >
В този кодов блок „ размери ” интегрира медийните заявки и размери. Той е такъв, че насочва браузъра да избере размера на изображението по отношение на ширината на екрана на потребителя. Това гарантира, че изображението(ята) не надвишава целевата максимална ширина.
Изход
Важни съображения при използване на атрибута „sizes“.
Има някои ограничения при използването на „ размери ”, както и изброените по-долу:
- Когато използвате множество медийни заявки в „ размери ”, уверете се, че е избрана първата истинска медийна заявка. Също така се уверете, че медийните заявки са подредени от най-специфични към най-малко специфични.
- Атрибутът „размери“ не поддържа процентни размери, тъй като браузърът не знае колко широко ще бъде нещо, определено в проценти, докато не разбере ширината на родителския елемент.
Пример 4: Подобрете скоростта на зареждане на страницата чрез адаптивни изображения с помощта на елемента “
„ <снимка> ” позволява на програмиста да показва и разгръща множество изображения на различни размери на екрана. Полезно е в случаите, когато съдържанието варира в зависимост от устройството. По-долу е демонстрацията на кода:
DOCTYPE html >< html >
< глава >
< мета набор от знаци = 'utf-8' >
< мета име = 'viewport' съдържание = 'width=device-width, initial-scale=1' >
< заглавие > заглавие >
глава >
< тяло >
< снимка >
< източник медии = '(максимална ширина: 100px)' srcset = 'F:\ТЕХНИЧЕСКИ СТАТИИ ЗА РАБОТА\imgbanner.png' />
< img src = 'F:\ТЕХНИЧЕСКИ СТАТИИ ЗА РАБОТА\imgre.png' всичко = „Отзивчиво изображение“ />
снимка >
тяло >
html >
Според тези кодови редове:
- Посочете „ <снимка> ” елемент, който натрупва „ <източник> ” за различни изображения и оставете браузъра да избере подходящото въз основа на размера на екрана на потребителя.
- Освен това, ако никой от „ <източник> ” са подходящи за размера на екрана, изображението, посочено в „
” служи като резервен вариант.
- Това в резултат на това добавя алтернативно изображение в непредвиден случай, като по този начин поддържа подобрената скорост на зареждане на страницата.
Изход
Заключение
Скоростта на зареждане на страницата може да бъде подобрена чрез адаптивни изображения с помощта на „ srcset ”, определящ различни плътности на пикселите, използвайки размери ” или чрез „ <снимка> ” елемент. „ <снимка> ” елементен подход може да се обмисли, ако нито един от другите подходи не работи, тъй като добавя алтернативно изображение в непредвиден случай без допълнителни опции за същото изображение.