בזמן פריסת אתר אינטרנט, המפתחים בדרך כלל משתמשים באותה תמונה עבור כל גדלי המסך, וזה לא נוהג טוב מכיוון שלא ניתן לסמוך על הדפדפן לשינוי גודל. במצב כזה, התמונות הרספונסיביות נכנסות לתוקף ומבטיחות הורדת התמונה בגודל ובאיכות המתאימים למכשיר המתאים, ובכך משפרות את מהירות טעינת העמוד.
כיצד לשפר את מהירות טעינת העמוד באמצעות תמונות רספונסיביות?
כדי לשפר את מהירות טעינת העמוד באמצעות תמונות רספונסיביות, שקול את המתודולוגיות הבאות:
דוגמה 1: שפר את מהירות טעינת העמוד באמצעות תמונות רספונסיביות באמצעות התכונה 'srcset'
הגישה הנוחה ביותר להחלת תמונות רספונסיביות יכולה להיות שימוש ב' srcset ' תכונה שנצברה ב' 'תג. תכונה זו מאפשרת למתכנת לציין גדלי תמונה שונים, והדפדפן בוחר אוטומטית בתמונה המתאימה ביותר ביחס לגודל המסך של המשתמש. להלן ההדגמה:
DOCTYPE html >
< html >
< רֹאשׁ >
< מטא ערכת תווים = 'utf-8' >
< מטא שֵׁם = 'נקודת מבט' תוֹכֶן = 'width=device-width, initial-scale=1' >
< כותרת > כותרת >
רֹאשׁ >
< גוּף >
< img src = 'F:\עבודה טכנית\imgre.png' הכל = 'תמונה רספונסיבית'
srcset = 'F:\JOB ARTICAL TECHNICAL ARTICLES\imgre.png 400w, F:\JOB TECHNICAL ARTICLES\imgre.png 800w, F:\JOB TECHNICAL ARTICLES\imgre.png 1200w'
/>
גוּף >
html >
בקוד הזה:
- ה ' srcset כלולה תכונה הכוללת את נתיב התמונה ורוחבים שונים בכל פעם.
- זה כזה שהתמונה ' F:\Job ARTICAL TECHNICLES\imgre.png 400w ' מייצג נתיב תמונה ברוחב של ' 400 ' פיקסלים.
- בהתבסס על מידע זה, הדפדפן מנתח את התמונה המתאימה ביותר להורדה בהתבסס על גודל המסך של המשתמש כך שהמסכים הקטנים מציגים תמונות קטנות יותר, ובכך חוסכים ברוחב פס.
תְפוּקָה
דוגמה 2: שפר את מהירות טעינת העמוד באמצעות תמונות רספונסיביות על ידי ציון צפיפויות פיקסלים שונות
בדוגמה זו, נתיב התמונה יצוין יחד עם צפיפות פיקסלים שונה עבור תצוגות ברזולוציה גבוהה. ניתן להשיג זאת באמצעות ' srcset ' תכונה, המודגם להלן:
DOCTYPE html >< html >
< רֹאשׁ >
< מטא ערכת תווים = 'utf-8' >
< מטא שֵׁם = 'נקודת מבט' תוֹכֶן = 'width=device-width, initial-scale=1' >
< כותרת > כותרת >
רֹאשׁ >
< גוּף >
< img src = 'F:\עבודה טכנית\imgre.png' הכל = 'תמונה רספונסיבית' srcset = 'F:\JOB ARTICAL TECHNICAL ARTICLES\imgre.png 1x, F:\JOB TECHNICAL ARTICLES\imgre.png 1.5x, F:\JOB TECHNICAL ARTICLES\imgre.png 2x'
/>
גוּף >
html >
בקטע קוד זה, ציין את נתיב התמונה שלוש פעמים עם צפיפות פיקסלים משתנים. זה כזה שהדפדפן בוחר בתמונה המתאימה/המתאימה ביותר כדי להבטיח איכות מעולה במסכים שונים.
הערה: ה ' 1x 'פיקסל הוא ערך ברירת המחדל, כך שזו בחירה של המשתמש לשייך לנתיב התמונה או לא.
תְפוּקָה
דוגמה 3: שפר את מהירות טעינת העמוד באמצעות תמונות רספונסיביות באמצעות התכונה 'גדלים'
במצבים מסוימים, יכולה להיות מגבלה שבה גודל התמונה בפועל על המסך משתנה מרוחב המסך. כדי לטפל בבעיה זו, ' גדלים ניתן להשתמש בתכונה כדי לכלול את גודל התמונה ביחס לשאילתות מדיה או גודל קבוע. להלן הדגמת הקוד:
DOCTYPE html >< html >
< רֹאשׁ >
< מטא ערכת תווים = 'utf-8' >
< מטא שֵׁם = 'נקודת מבט' תוֹכֶן = 'width=device-width, initial-scale=1' >
< כותרת > כותרת >
רֹאשׁ >
< גוּף >
< img src = 'F:\עבודה טכנית\imgre.png' הכל = 'תמונה רספונסיבית' srcset = 'F:\JOB ARTICAL TECHNICAL ARTICLES\imgre.png 50w, F:\JOB TECHNICAL ARTICLES\imgre.png 800w, F:\JOB TECHNICAL ARTICLES\imgre.png 1200w'
גדלים = '(מקסימום רוחב: 800px) 100vw, 800px'
/>
גוּף >
html >
בגוש קוד זה, ה' גדלים ' תכונה משלבת את שאילתות המדיה והגדלים. זה כזה שהוא מנחה את הדפדפן לבחור בגודל התמונה ביחס לרוחב המסך של המשתמש. זה מוודא שהתמונות לא חורגים מהרוחב המרבי היעד.
תְפוּקָה
שיקולים חשובים בעת השימוש בתכונת 'מידות'.
ישנן מספר מגבלות בשימוש ב' גדלים ' תכונה הרשומה גם להלן:
- בעת שימוש בשאילתות מדיה מרובות ב' גדלים ', ודא ששאילתת המדיה האמיתית הראשונה נבחרת. כמו כן, ודא ששאילתות המדיה מסודרות מהספציפי ביותר לפחות ספציפי.
- התכונה 'מידות' אינה תומכת בגדלים באחוזים מכיוון שהדפדפן אינו מודע לכמה רחב יהיה משהו שצוין באחוזים עד שהוא מודע לרוחב של רכיב האב.
דוגמה 4: שפר את מהירות טעינת העמוד באמצעות תמונות רספונסיביות באמצעות האלמנט '<תמונה>'.
ה ' <תמונה> אלמנט 'מאפשר למתכנת להציג ולפרוס תמונות מרובות בגדלי מסך שונים. זה מועיל במקרים שבהם התוכן משתנה בהתאם למכשיר. להלן הדגמת הקוד:
DOCTYPE html >< html >
< רֹאשׁ >
< מטא ערכת תווים = 'utf-8' >
< מטא שֵׁם = 'נקודת מבט' תוֹכֶן = 'width=device-width, initial-scale=1' >
< כותרת > כותרת >
רֹאשׁ >
< גוּף >
< תְמוּנָה >
< מָקוֹר כְּלֵי תִקְשׁוֹרֶת = '(מקסימום רוחב: 100 פיקסלים)' srcset = 'F:\Job TECHNICAL ARTICLES\imgbanner.png' />
< img src = 'F:\Job TECHNICLES ARTICLES\imgre.png' הכל = 'תמונה רספונסיבית' />
תְמוּנָה >
גוּף >
html >
לפי שורות קוד אלו:
- ציין את ' <תמונה> ' אלמנט שצובר את ' <מקור> ' אלמנטים לתמונות שונות ולתת לדפדפן לבחור את המתאימה בהתבסס על גודל המסך של המשתמש.
- כמו כן, אם אף אחד מה' <מקור> אלמנטים ' מתאימים לגודל המסך, התמונה המצוינת ב'
'תג משמש כנקודת מוצא.
- כתוצאה מכך, זה מוסיף תמונה חלופית במקרה בלתי צפוי, ובכך שומר על מהירות טעינת העמוד המשופרת.
תְפוּקָה
סיכום
ניתן לשפר את מהירות טעינת העמוד באמצעות תמונות רספונסיביות באמצעות ' srcset תכונה ', המציינת צפיפות פיקסלים שונה, באמצעות ' גדלים תכונה ', או באמצעות ' <תמונה> ' אלמנט. ה ' <תמונה> ניתן לשקול גישת אלמנטים אם אף אחת מהגישות האחרות לא מצליחה מכיוון שהיא מוסיפה תמונה חלופית במקרה בלתי צפוי ללא אפשרויות נוספות עבור אותה תמונה.