תמונה שווה 1,000 מילים, ותמונות ממלאות חלק בלתי נפרד מכל דף. עם זאת, בדרך כלל הן מהוות גם את רוב הבייטים שהורדו. בעיצוב אתר רספונסיבי, הפריסה יכולה להשתנות בהתאם למאפייני המכשיר, אלא גם לתמונות.
עיצוב אתר רספונסיבי פירושו שלא רק שהפריסות שלנו יכולות להשתנות בהתאם למכשיר אבל גם התוכן יכול להשתנות. לדוגמה, בטמפרטורה גבוהה במסכים עם רזולוציה (2x), וגרפיקה ברזולוציה גבוהה מבטיחה חדות. תמונה שברוחב של 50% עשוי לפעול כמו שצריך כשהדפדפן הוא ברוחב של 800 פיקסלים, יותר מדי נדל"ן בטלפון צר, ומחייב את אותה תקורה של רוחב פס כשגודלם מוקטן כדי להתאים למסך קטן יותר.
כיוון האומנות
במקרים אחרים שבהם ייתכן שיהיה צורך לשנות את התמונה באופן קיצוני יותר: פרופורציות, חיתוך ואפילו החלפה של התמונה כולה. במקרה הזה, שינוי התמונה נקרא בדרך כלל כיוון העיצוב. צפייה responsiveimages.org/demos/. דוגמאות.
תמונות רספונסיביות
האם ידעת שתמונות מהוות יותר מ-60% בממוצע מהבייטים שנדרשים לטעינת דף אינטרנט?
בקורס הזה תלמדו איך לעבוד עם תמונות באינטרנט המודרני, כדי כדי שהתמונות שלכם נראות מעולה ונטענות במהירות בכל מכשיר.
לאורך הדרך, תרכשו מגוון מיומנויות וטכניקות כדי לבצע אותן בצורה חלקה לשלב תמונות רספונסיביות בתהליך הפיתוח. עד סוף את הקורס תפתחו תמונות שמתאימות את עצמן ומגיבות אזור תצוגה בגדלים שונים ותרחישי שימוש שונים.
זהו קורס חינמי שמוצע דרך Udacity
תמונות בתגי עיצוב
הרכיב img הוא עוצמתי — הוא מוריד, מפענח ומעבד
תוכן — ודפדפנים מודרניים תומכים במגוון פורמטים של תמונות. כולל
תמונות שעובדות במכשירים שונים לא שונות מאלה שמוצגות במחשב, ורק
נדרשים כמה שינויים קלים כדי ליצור חוויה טובה.
סיכום
- השתמשו בגדלים יחסיים כדי למנוע גלישה בטעות מאגר התגים.
- צריך להשתמש ברכיב
pictureכשרוצים לציין תמונות שונות בהתאם במאפייני המכשיר (שנקרא גם כיוון אומנותי). - משתמשים ב-
srcsetובמתארxברכיבimgכדי לתת רמזים לדפדפן על התמונה הטובה ביותר לשימוש כאשר בוחרים מתוך הדחיסות השונות. - אם הדף כולל רק תמונה אחת או שתיים ולא נעשה בהן שימוש כדאי לשקול להשתמש בתמונות מוטבעות כדי להפחית את הבקשות לקבצים.
שימוש בגדלים יחסיים לתמונות
זכרו להשתמש ביחידות יחסיות בעת ציון רוחב של תמונות כדי למנוע אותן
מגלישה בטעות באזור התצוגה. לדוגמה, width: 50%; גורמים
רוחב התמונה יהיה 50% מהרכיב שמכיל (לא 50% מאזור התצוגה או
50% מגודל הפיקסל בפועל).
מאחר ששירות CSS מאפשר לתוכן לחרוג מהמאגר שלו, ייתכן שתצטרכו להשתמש בערך רוחב: 100% כדי למנוע גלישת תמונות ותוכן אחר. לדוגמה:
img, embed, object, video {
max-width: 100%;
}
חשוב לספק תיאורים משמעותיים באמצעות המאפיין alt ב-img
רכיבים; אלה עוזרים לשפר את הנגישות של האתר על ידי מתן הקשר למסך
בקוראים ובטכנולוגיות מסייעות אחרות.
שיפור של img באמצעות srcset למכשירים עם DPI גבוה
המאפיין srcset משפר את הפונקציונליות של
img רכיב, וכך קל לספק מספר קובצי תמונה
למאפיינים שונים של המכשיר. דומה לimage-set
פונקציית CSS
מותאמות ל-CSS, srcset מאפשרת לדפדפן לבחור
בהתאם למאפייני המכשיר, למשל שימוש
פי 2 תמונה על מסך כפול, ואולי בעתיד תהיה תמונה כפול
מכשיר פי 2 כשהוא מחובר לרשת עם רוחב פס מוגבל.
<img src="photo.png" srcset="photo@2x.png 2x" ...>
בדפדפנים שלא תומכים ב-srcset, הדפדפן פשוט משתמש בברירת המחדל
קובץ תמונה שצוין באמצעות המאפיין src. לכן חשוב
התמונה הזו תמיד כוללת תמונה בגודל 1x שאפשר להציג בכל מכשיר, בלי קשר ל
יכולות. כאשר יש תמיכה ב-srcset, תוצג רשימה מופרדת בפסיקים של
תמונה/תנאים מנותחים לפני ביצוע בקשות כלשהן, ורק
המערכת מורידה ומוצגת התמונה המתאימה.
התנאים יכולים לכלול הכול, מדחיסות פיקסלים ועד רוחב גובה, רק צפיפות הפיקסלים נתמכת היום. לאיזון הנוכחי לגבי התנהגות המשתמשים בתכונות עתידיות, פשוט עדיף לספק תמונה כפולה את המאפיין.
כיוון העיצוב בתמונות רספונסיביות עם picture
כדי להחליף תמונות על סמך מאפייני המכשיר, שנקראות גם אומנות
כיוון, צריך להשתמש ברכיב picture.
הרכיב picture מגדיר פתרון הצהרתי עבור
לספק כמה גרסאות של תמונה על סמך
למאפיינים, כמו גודל המכשיר, רזולוציית המכשיר, כיוון
ועוד.
שימוש ברכיב picture כשיש מקור תמונה
קיים במספר דחיסות, או כשעיצוב רספונסיבי קובע
תמונה קצת שונה בסוגים מסוימים של מסכים. דומה ל-
רכיב video, מספר רכיבי source
כך שניתן יהיה לציין קובצי תמונה שונים
בהתאם לשאילתות מדיה או לפורמט התמונה.
<picture>
<source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x">
<source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x">
<img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" alt="a head carved out of wood">
</picture>
בדוגמה שלמעלה, אם רוחב הדפדפן הוא לפחות 800 פיקסלים, אז
נעשה שימוש ב-head.jpg או ב-head-2x.jpg, בהתאם לרזולוציית המכשיר. אם
רזולוציית הדפדפן היא בין 450px ל-800px, ואז המערכת תשתמש שוב ב-head-small.jpg או ב-head-small-
2x.jpg, בהתאם לרזולוציית המכשיר. למידות רוחב מסכים
פחות מ-450 פיקסלים ותאימות לאחור כאשר הרכיב picture לא
נתמך, הדפדפן מעבד במקום זאת את הרכיב img, והוא תמיד צריך להיות
כלול.
תמונות בגודל יחסי
כשהגודל הסופי של התמונה לא ידוע, קשה לציין מתאר צפיפות של מקורות התמונה. במיוחד כשמדובר בתמונות שמתפרשים על רוחב יחסי של הדפדפן והם גמישים, בהתאם גודל הדפדפן.
במקום להגדיר גדלים ודחיסויות קבועים של תמונות, אפשר לציין את הגודל של כל תמונה שסופקה על ידי הוספת מתאר רוחב והגודל של תמונה, וכך לאפשר לדפדפן לחשב באופן אוטומטי את דחיסות הפיקסלים ובוחרים את התמונה הטובה ביותר להורדה.
<img src="lighthouse-200.jpg" sizes="50vw"
srcset="lighthouse-100.jpg 100w, lighthouse-200.jpg 200w,
lighthouse-400.jpg 400w, lighthouse-800.jpg 800w,
lighthouse-1000.jpg 1000w, lighthouse-1400.jpg 1400w,
lighthouse-1800.jpg 1800w" alt="a lighthouse">
הדוגמה שלמעלה מעבדת תמונה שנמצאת בחצי מרוחב אזור התצוגה
(sizes="50vw"), ובהתאם לרוחב הדפדפן והפיקסל במכשיר.
יחס זה מאפשר לדפדפן לבחור את התמונה הנכונה ללא קשר לגודל
שנמצא חלון הדפדפן. לדוגמה, הטבלה הבאה מראה איזו תמונה
הדפדפן יבחר:
| רוחב הדפדפן | יחס הפיקסלים של המכשיר | התמונה שבה נעשה שימוש | פתרון יעיל |
|---|---|---|---|
| 400 פיקסלים | 1 | 200.jpg |
1x |
| 400 פיקסלים | 2 | 400.jpg |
2x |
| 320 פיקסלים | 2 | 400.jpg |
2.5x |
| 600 פיקסלים | 2 | 800.jpg |
פי 2.67 |
| 640 פיקסלים | 3 | 1000.jpg |
3.125x |
| 1100 פיקסלים | 1 | 800.png |
פי 1.45 |
התייחסות לנקודות עצירה (breakpoint) בתמונות רספונסיביות
במקרים רבים, גודל התמונה עשוי להשתנות בהתאם לפריסת האתר נקודות עצירה (breakpoint). לדוגמה, במסך קטן, ייתכן שתרצו שהתמונה להתפרש לכל הרוחב של אזור התצוגה. במסכים גדולים יותר, התצוגה צריכה להתפרס רק לוקחים פרופורציה קטנה.
<img src="400.png"
sizes="(min-width: 600px) 25vw, (min-width: 500px) 50vw, 100vw"
srcset="100.png 100w, 200.png 200w, 400.png 400w,
800.png 800w, 1600.png 1600w, 2000.png 2000w" alt="an example image">
המאפיין sizes, בדוגמה שלמעלה, משתמש במספר שאילתות מדיה כדי
לציין את גודל התמונה. כשרוחב הדפדפן גדול מ-
600 פיקסלים, התמונה היא 25% מרוחב אזור התצוגה. כשהגודל הוא בין 500 פיקסלים
ו-600 פיקסלים, התמונה היא 50% מרוחב אזור התצוגה. ומתחת ל-500 פיקסלים,
הוא ברוחב מלא.
לאפשר הרחבה של תמונות המוצרים
הלקוחות רוצים לראות מה הם קונים. באתרים קמעונאיים, המשתמשים מצפים להציג תקריב של מוצרים ברזולוציה גבוהה כדי לראות טוב יותר פרטים, וגם משתתפים במחקר מתוסכלים אם הם לא מצליחים.
דוגמה טובה לתמונות הניתנות להקשה ולהרחבה מסופקת על ידי J. אתר הצוות. שכבת-על שנעלמת מציינת שאפשר להקיש על תמונה, ולכן היא בתמונה שניתן לראות בה את הפרטים הקטנים.
טכניקות אחרות לתמונה
תמונות דחוסות
שיטת דחיסת נתונים מציגה לכל המכשירים תמונה דחוסה מאוד פי 2, ללא קשר ביכולות של המכשיר. בהתאם לסוג התמונה ולרמת דחיסת נתונים, ייתכן שאיכות התמונה לא תשתנה אבל גודל הקובץ ירד באופן משמעותי.
החלפת תמונת JavaScript
החלפת תמונת JavaScript בודקת את יכולות המכשיר ו"מבצעת את
הדבר הנכון". ניתן לקבוע את יחס הפיקסלים של המכשיר באמצעות
window.devicePixelRatio, לקבל רוחב וגובה של המסך, ואפילו לבצע פעולות אפשריות
פיסת חיבור לרשת דרך navigator.connection או הנפקת זיוף
בקשה. אחרי שתאספו את כל המידע הזה תוכלו להחליט
תמונה לטעינה.
אחד החסרונות הגדולים של גישה זו הוא שהשימוש ב-JavaScript מאפשר לך
לעכב את טעינת התמונה עד שלפחות המנתח העתידי יסיים. הזה
כלומר, הורדת התמונות לא תתחיל אפילו אחרי האירוע pageload
שריפות. בנוסף, סביר להניח שהדפדפן יוריד גם 1x וגם 2x
וכתוצאה מכך משקל הדף גבוה יותר.
תמונות מוטבעות: רסטר ווקטור
יש שתי דרכים שונות במהותן ליצור ולאחסן תמונות – זה ישפיע על הפריסה של תמונות בצורה רספונסיבית.
תמונות רשת — כמו תמונות ותמונות אחרות שמיוצגות כרשת של נקודות צבע נפרדות. ייתכן שתמונות רסטר יגיעו ממצלמה או מסורק, או שהן נוצרות באמצעות רכיב ה-HTML 'לוח הציור'. פורמטים כמו PNG, JPEG ו-WebP משמשים לאחסון של תמונות רסטר.
תמונות וקטוריות, כמו סמלי לוגו ותמונות קווים, מוגדרות כקבוצה של עקומות, קווים, צורות, צבעי מילוי והדרגתיות. ניתן ליצור תמונות וקטוריות באמצעות תוכנות כמו Adobe Illustrator או Inkscape, או כתיבת קוד בכתב יד בפורמט וקטורי כמו SVG.
SVG
בפורמט SVG אפשר לכלול בדף אינטרנט גרפיקה וקטורית רספונסיבית. היתרון של פורמטים של קובצי וקטור על פני פורמטים של קובצי רסטר הוא שהדפדפן יכול לעבד תמונת וקטור בכל גודל. פורמטים וקטוריים מתארים את הגיאומטריה של את התמונה - איך היא בנויה מקווים, מעיקולים, מצבעים וכו'. לעומת זאת, פורמטים של רסטר כוללים מידע רק על נקודות בודדות של צבע, כך שהדפדפן צריך לנחש איך להשלים את החסר במהלך שינוי קנה מידה.
בהמשך מוצגות שתי גרסאות של אותה התמונה: תמונת PNG בצד שמאל וקובץ SVG מופעל מימין. קובץ SVG נראה טוב בכל גודל, ואילו PNG שלידו מתחיל מטושטשות במסכים גדולים יותר.
אם אתם רוצים להפחית את מספר הבקשות לקבצים שהדף שלכם שולח, אפשר לקודד של תמונות מוטבעות בפורמט SVG או URI של נתונים. אם תצפו במקור של הדף הזה, תוכלו לראות ששני סמלי הלוגו שבהמשך מוצהרים בתוך השורה: URI של נתונים ו-SVG.
בפורמט SVG יש תמיכה מעולה בניידים ובמחשבים, וכלי אופטימיזציה יכולים לצמצם משמעותית את גודל ה-SVG. שני סמלי הלוגו המוטבעים הבאים בפורמט SVG נראים זהה, אבל אחד הוא כ-3KB והשני רק 2KB:
URI של נתונים
מזהי URI של נתונים מאפשרים לכלול קובץ, כמו תמונה, בתוך השורה באמצעות הגדרה
המקור של הרכיב img כמחרוזת בקידוד Base64 באמצעות
בפורמט הבא:
<img src="data:image/svg+xml;base64,[data]">
תחילת הקוד של לוגו HTML5 שלמעלה נראה כך:
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiB
BZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW ...">
(הגרסה המלאה כוללת יותר מ-5,000 תווים!)
גוררים כלי דרופ כמו jpillora.com/base64-encoder הם הזמינים להמרת קבצים בינאריים כמו תמונות למזהי URI של נתונים. בדיוק כמו קובצי SVG, מזהי URI של נתונים נתמכים היטב בנייד בדפדפנים למחשב שולחני.
הטבעה ב-CSS
אפשר גם להכניס ל-CSS מזהי URI ו-SVG של נתונים. האפשרות הזו נתמכת במכשירים ניידים ובמחשבים. הנה שתי תמונות שנראות זהות הוטמעו כ- תמונות רקע ב-CSS. URI אחד של נתונים, SVG אחד:
שיפורים ביתרונות חסרונות
קוד מוטבע של תמונות יכול להיות ארוך - במיוחד מזהי URI של נתונים - אז למה רוצה להשתמש בה? כדי לצמצם בקשות HTTP! SVG ו-URI של נתונים יכולים להפעיל דף אינטרנט שלם, כולל תמונות, CSS ו-JavaScript, שניתן לאחזר באמצעותו בקשה אחת ויחידה.
החיסרון:
- בנייד, מזהי URI של נתונים עשויים להיות איטיים משמעותית
להצגה בנייד מאשר תמונות מ-
srcחיצוני. - מזהי URI של נתונים יכולים להגדיל משמעותית את הגודל של בקשת HTML.
- הם מוסיפים מורכבות לתגי העיצוב ולתהליך העבודה שלכם.
- פורמט ה-URI של הנתונים גדול באופן משמעותי מהפורמט הבינארי (עד 30%) ולכן לא מקטינה את גודל ההורדה הכולל.
- לא ניתן לשמור מזהי URI של נתונים במטמון, ולכן צריך להוריד אותם לכל דף שבו משתמשים בהם.
- הם אינם נתמכים ב-IE8 בגרסה 6 ו-7, אין תמיכה חלקית ב-IE8.
- עם HTTP/2, צמצום מספר הבקשות לנכסים יקבל עדיפות נמוכה יותר.
כמו בכל דבר רספונסיבי, צריך לבדוק מה עובד הכי טוב. שימוש במפתח כלים למדידת גודל הקובץ להורדה, מספר הבקשות והמספר הכולל זמן אחזור. מזהי URI של נתונים יכולים להיות שימושיים לפעמים לתמונות של רסטר, לדוגמה, בדף בית שמכיל רק תמונה אחת או שתיים שלא נמצאות בשימוש במקום אחר. אם צורך להטמיע תמונות וקטוריות מוטבעות, SVG הוא אפשרות הרבה יותר טובה.
תמונות ב-CSS
נכס ה-CSS background הוא כלי יעיל להוספת תמונות מורכבות
לרכיבים שונים, כך שניתן להוסיף בקלות מספר תמונות ולגרום להן לחזור על עצמן,
ועוד. בשילוב עם שאילתות מדיה, מאפיין הרקע הופך
עוצמתיים יותר, ומאפשרת טעינה מותנית של תמונות על סמך המסך
רזולוציה, גודל אזור התצוגה ועוד.
סיכום
- מומלץ להשתמש בתמונה המתאימה ביותר למאפייני המסך, רצוי להתייחס למסך הגודל, רזולוציית המכשיר ופריסת הדף.
- שינוי המאפיין
background-imageב-CSS למסכים עם DPI גבוה באמצעות שאילתות מדיה עםmin-resolutionו--webkit-min-device-pixel-ratio. - השתמשו ב-srcset כדי לספק תמונות ברזולוציה גבוהה בנוסף לתמונה 1x תגי עיצוב.
- כדאי להביא בחשבון את עלויות הביצועים כשמשתמשים בהחלפת תמונה ב-JavaScript או כשמציגים תמונות ברזולוציה גבוהה דחוסות מאוד במכשירים ברזולוציה נמוכה יותר.
שימוש בשאילתות מדיה לטעינת תמונות מותנית או כיוון העיצוב של התמונה
שאילתות מדיה משפיעות לא רק על פריסת הדף; אפשר להשתמש בהם גם לטעון תמונות באופן מותנה, או לספק כיוון התמונה בהתאם לאזור התצוגה רוחב.
לדוגמה, בדוגמה הבאה, במסכים קטנים יותר, רק הערך small.png הוא
שהורדו והוחלו על התוכן div, במסכים גדולים יותר
background-image: url(body.png) מוחל על הגוף ו-background-image:
url(large.png) מוחלת על התוכן div.
.example {
height: 400px;
background-image: url(small.png);
background-repeat: no-repeat;
background-size: contain;
background-position-x: center;
}
@media (min-width: 500px) {
body {
background-image: url(body.png);
}
.example {
background-image: url(large.png);
}
}
השתמשו באפשרות 'הגדרת תמונה' כדי לספק תמונות ברזולוציה גבוהה
הפונקציה image-set() ב-CSS משפרת את מאפיין ההתנהגות background,
לאפשר בקלות לספק קובצי תמונה מרובים עבור מכשיר שונה
למאפיינים. כך הדפדפן יכול לבחור את התמונה הטובה ביותר בהתאם
את מאפייני המכשיר, לדוגמה שימוש בתמונה כפולה במסך 2x,
או תמונה בגודל 1x במכשיר שתומך ב-2x כאשר הוא מחובר לרשת עם רוחב פס מוגבל.
background-image: image-set(
url(icon1x.jpg) 1x,
url(icon2x.jpg) 2x
);
בנוסף לטעינת התמונה הנכונה, הדפדפן גם משנה את גודלה בהתאם. במילים אחרות, הדפדפן מניח שכמות התמונות גדולה פי 2 גדולות כתמונות בגודל 1x, ואז מגדילות את התמונה פי 2 פי 2, כך כדי שהתמונה בדף תהיה באותו גודל.
התמיכה ב-image-set() עדיין חדשה ונתמכת רק ב-Chrome
Safari עם קידומת הספק -webkit. הקפידו לכלול
תמונה חלופית למקרים שבהם אין תמיכה ב-image-set(); לדוגמה:
.sample {
width: 128px;
height: 128px;
background-image: url(icon1x.png);
background-image: -webkit-image-set(
url(icon1x.png) 1x,
url(icon2x.png) 2x
);
background-image: image-set(
url(icon1x.png) 1x,
url(icon2x.png) 2x
);
}
האפשרויות שצוינו למעלה טוענת את הנכס המתאים בדפדפנים שתומכים בהגדרת תמונות,
אחרת, הוא יחזור לנכס ששווה 1x. האזהרה הברורה היא שבזמן
התמיכה בדפדפן image-set() נמוכה, רוב הדפדפנים מקבלים נכס אחד.
משתמשים בשאילתות מדיה כדי לספק תמונות ברזולוציה גבוהה או כיוון אומנותי
שאילתות מדיה יכולות ליצור כללים בהתבסס על יחס הפיקסלים של המכשיר, מאפשרות לציין תמונות שונות עבור צגים 2x לעומת 1x.
@media (min-resolution: 2dppx),
(-webkit-min-device-pixel-ratio: 2)
{
/* High dpi styles & resources here */
}
Chrome, Firefox ו-Opera תומכים כולם ב-(min-resolution: 2dppx) הרגיל,
ואילו בדפדפני Safari ו-Android נדרש תחילית של הספק ישן יותר
תחביר ללא היחידה dppx. חשוב לזכור, הסגנונות האלה נטענים רק אם
תואם לשאילתת המדיה, וצריך לציין סגנונות עבור האותיות הבסיסיות.
כך גם נהנים מהיתרונות של וידוא שמשהו מעובד אם הדפדפן
לא תומכת בשאילתות מדיה ספציפיות לרזולוציה.
.sample {
width: 128px;
height: 128px;
background-image: url(icon1x.png);
}
@media (min-resolution: 2dppx), /* Standard syntax */
(-webkit-min-device-pixel-ratio: 2) /* Safari & Android Browser */
{
.sample {
background-size: contain;
background-image: url(icon2x.png);
}
}
אפשר גם להשתמש בתחביר של רוחב המינימום כדי להציג תמונות חלופיות, בהתאם
גודל אזור התצוגה. היתרון של השיטה הזאת הוא שהתמונה לא
אם שאילתת המדיה לא תואמת. לדוגמה, bg.png הוא רק
המערכת הורידה והוחלה על body אם רוחב הדפדפן הוא 500 פיקסלים או יותר:
@media (min-width: 500px) {
body {
background-image: url(bg.png);
}
}
שימוש ב-SVG לסמלים
כשמוסיפים סמלים לדף, מומלץ להשתמש בסמלי SVG כשאפשר או אותיות רישיות, תווי Unicode.
סיכום
- יש להשתמש בפורמט SVG או unicode לסמלים במקום לתמונות רשת.
החלפת סמלים פשוטים ב-Unicode
גופנים רבים כוללים תמיכה במגוון רחב של גליפים בתקן Unicode, במקום תמונות. בשונה מתמונות, גופן Unicode מאפשר התאמה טובה ונראות טוב לא משנה כמה קטן או גדול הם מופיעים על המסך.
מעבר למערכת התווים הרגילה, Unicode עשוי לכלול סמלים עבור חיצים (→), אופרטורים מתמטיים (😂), צורות גאומטריות (★), תמונות בקרה (בפרסום), סימון מוזיקה (♬), אותיות יווניות (Ω), ואפילו כלי שחמט (♞).
הכללת תו Unicode מתבצעת באותו אופן שבו ישויות בעלות שם:
&#XXXX, כאשר XXXX מייצג את מספר תו ה-unicode. לדוגמה:
You're a super ★
איזה כיף ★!
החלפת סמלים מורכבים ב-SVG
בהתאם לדרישות סמלים מורכבות יותר, סמלי SVG הם בדרך כלל קלים יותר, קל לשימוש, ואפשר לעצב אותו באמצעות CSS. ל-SVG יש מספר יתרונות על פני תמונות בטכנולוגיית רשת:
- אלו גרפיקה וקטורית שניתן לשנות לקנה מידה אינסופי.
- אפקטים של CSS, כגון צבע, הצללה, שקיפות ואנימציות. פשוטים.
- ניתן להוסיף תמונות בפורמט SVG ישירות במסמך.
- הם סמנטיים.
- המאפיינים המתאימים משפרים את הנגישות.
With SVG icons, you can either add icons using inline SVG, like
this checkmark:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="32" height="32" viewBox="0 0 32 32">
<path d="M27 4l-15 15-7-7-5 5 12 12 20-20z" fill="#000000"></path>
</svg>
or by using an image tag, like this credit card icon:
<img src="credit.svg">.
חשוב להפעיל שיקול דעת בגופנים של סמלים
גופנים סמלים הם פופולריים ואפשר להשתמש בהם בקלות, אבל יש להם כמה חסרונות בהשוואה לסמלי SVG:
- אלו הן גרפיקה וקטורית שניתן לשנות לקנה מידה אינסופי, אבל הן יכולות להיות הסרת היישור וכתוצאה מכך מופיעים סמלים שאינם חדים כמצופה.
- עיצוב מוגבל בעזרת CSS.
- המיקום של הפיקסלים המושלם יכול להיות קשה, בהתאם לגובה השורה ריווח בין אותיות וכו'.
- הם לא סמנטיים וקשה להשתמש בהם בקוראי מסך טכנולוגיה מסייעת אחרת.
- אם היקף ההרשאות שלהם לא מתאים, הם יכולים לגרום לגודל של קובץ גדול שמיועד רק לשימוש קבוצת משנה קטנה של סמלים זמינים.
With Font Awesome, you can either add icons by using a unicode
entity, like this HTML5 logo (<span class="awesome"></span>)
or by adding special classes to an <i> element like the CSS3
logo (<i class="fa fa-css3"></i>).
יש מאות גופנים של סמלים, בחינם ובתשלום, כולל גופנים נהדר, Pictos וגליפיקונים.
חשוב לאזן בין המשקל של בקשת ה-HTTP הנוספת לבין גודל הקובץ את הצורך בסמלים. לדוגמה, אם דרוש לך רק מספר קטן של סמלים, מומלץ להשתמש בתמונה או ב-sprite של תמונה.
אופטימיזציה של תמונות לשיפור הביצועים
בדרך כלל, התמונות מתייחסות לרוב הבייטים שהורדו ולעיתים קרובות תופסות חלק משמעותי משטח התצוגה בדף. כתוצאה מכך, האופטימיזציה בדרך כלל, תמונות יכולות להניב ביצועים וחיסכון בכמות הבייטים הגדולים ביותר שיפורים באתר: ככל שהדפדפן צריך להוריד פחות בייטים, ככל שיש פחות תחרות על רוחב הפס של הלקוח, הדפדפן יוכל להוריד ולהציג את כל הנכסים.
סיכום
- לא כדאי לבחור באקראי פורמט תמונה – כדאי להבין את ההבדלים זמינים ולהשתמש בפורמט המתאים ביותר.
- הוסיפו כלי אופטימיזציה ודחיסה של תמונות לתהליך העבודה שלכם כדי לצמצם גודל הקבצים.
- מצמצמים את מספר בקשות ה-http על-ידי הצבת תמונות שנמצאות בשימוש נפוץ תמונות sprite.
- כדי לשפר את זמן הטעינה הראשונית של הדף ולהפחית את המשקל הראשוני של הדף, מומלץ לטעון תמונות רק אחרי שהן נגללו לתצוגה.
לבחור את הפורמט הנכון
אפשר לבחור מבין שני סוגי תמונות:
תמונות וקטוריות
ותמונות Google Raster.
עבור תמונות של רשת נקודות, צריך גם לבחור את פורמט הדחיסה המתאים,
לדוגמה: GIF, PNG, JPG.
תמונות של רשת נקודות, כמו תמונות ותמונות אחרות, מיוצגות כרשת
של נקודות או פיקסלים בודדים. תמונות רסטר מגיעות בדרך כלל ממצלמה או
או שניתן ליצור אותו בדפדפן עם הרכיב canvas. כי
התמונה הולכת וגדלה, כך שגם גודל הקובץ. כשקנה המידה גדול יותר
תמונות רשת מטושטשות בגודל המקורי, מכיוון שהדפדפן צריך לנחש
איך למלא את הפיקסלים החסרים.
תמונות וקטוריות, כמו סמלי לוגו ועטיפות קווים, מוגדרות באמצעות קבוצה של עקומות,
קווים, צורות וצבעי מילוי. תמונות וקטוריות נוצרות באמצעות תוכנות כמו
Adobe Illustrator או Inkscape, ונשמר בפורמט וקטור כמו
SVG כי תמונות וקטוריות מבוססות על
פרימיטיביים פשוטים, אפשר להתאים אותם לעומס ללא פגיעה באיכות שלהם
שינוי בגודל הקובץ.
כשבוחרים את הפורמט המתאים, חשוב לקחת בחשבון את שני הגורמים הבאים מקור התמונה (רסטר או וקטור), והתוכן (צבעים, אנימציה, טקסט וכו'). אין פורמט אחד שמתאים לכל סוגי התמונות, ולכל פורמט יש יתרונות משלו ונקודות חולשה.
חשוב להתחיל עם ההנחיות הבאות כשבוחרים את הפורמט המתאים:
- כדי להשתמש בתמונות שצולמו, צריך להשתמש ב
JPG. - צריך להשתמש ב-
SVGלגרפיקה וקטורית ולגרפיקה בצבע אחיד, כמו סמלי לוגו וגרפיקה. אם אין לך גישה לגרפיקה הווקטורית, אפשר לנסות אתWebPאוPNG. - מומלץ להשתמש ב-
PNGולא ב-GIFכי כך אפשר ליהנות מיותר צבעים וממבצעים טובים יותר יחסי דחיסה. - לאנימציות ארוכות יותר, כדאי להשתמש באפקט
<video>, שמספק תמונה טובה יותר איכות נותנת למשתמש שליטה על ההפעלה.
הקטנת הקובץ
אפשר להקטין משמעותית את הגודל של קובץ התמונה באמצעות האפשרות 'לאחר עיבוד' התמונות לאחר השמירה. יש כמה כלים לדחיסת תמונות – דחיסת נתונים ללא אובדן מידע, אונליין, GUI, שורת פקודה. כשהדבר אפשרי, עדיף לנסות אוטומציה של אופטימיזציה של תמונות כך שתהיה מובנית בתהליך העבודה.
יש כמה כלים זמינים שמאפשרים דחיסת נתונים נוספת ללא אובדן נתונים במכשיר JPG
ו-PNG קבצים ללא השפעה על איכות התמונה. במחיר של JPG, אפשר לנסות
jpegtran או
jpegoptim (זמין ב-Linux בלבד;
להפעיל את האפשרות --strip-all). במחיר של PNG, אפשר לנסות
OptiPNG או
PNGOUT.
שימוש בתמונות sprite
איסוף תמונות ב-CSS הוא שיטה שבה כמה תמונות משולבות בתמונה אחת "Sprite Sheets" תמונה. לאחר מכן אפשר להשתמש בתמונות בודדות באמצעות ציון תמונת רקע של רכיב (גיליון ה-Sprite) בתוספת היסט כדי להציג החלק הנכון.
.sprite-sheet {
background-image: url(sprite-sheet.png);
width: 40px;
height: 25px;
}
.google-logo {
width: 125px;
height: 45px;
background-position: -190px -170px;
}
.gmail {
background-position: -150px -210px;
}
.maps {
height: 40px;
background-position: -120px -165px;
}
היתרון של איסוף נתונים הוא צמצום מספר ההורדות הדרושות לצורך קבלת מספר תמונות, ועדיין אפשר לשמור במטמון.
מומלץ להשתמש בטעינה מדורגת
טעינה מדורגת יכולה לזרז משמעותית את הטעינה בדפים ארוכים שכוללים של תמונות בחלק הנגלל על ידי טענתן לפי הצורך או הטעינה והעיבוד של התוכן הסתיימו. נוסף לביצועים שיפורים בתוכן, שימוש בטעינה מדורגת יכול ליצור חוויות גלילה אינסופיות.
חשוב להיזהר כשיוצרים דפים עם גלילה מתמשכת, כי התוכן נטען שבו מופיע התוכן, ייתכן שמנועי חיפוש לעולם לא יראו את התוכן. In addition, משתמשים שמחפשים מידע שהם מצפים לראות בכותרת התחתונה, אף פעם לא יראו את הכותרת התחתונה כי תוכן חדש תמיד נטען.
הימנעות מלאה משימוש בתמונות
לפעמים התמונה הטובה ביותר היא לא תמונה בכלל. כשאפשר, השתמשו את היכולות המקוריות של הדפדפן כדי לספק את אותן התכונות או החדשה. דפדפנים יוצרים רכיבים חזותיים שנדרשים בעבר תמונות. המשמעות היא שדפדפנים כבר לא צריכים להוריד תמונה נפרדת וכך למנוע תמונות עם קנה מידה מוזר. אפשר להשתמש ב-Unicode או בקידוד מיוחד הגופן של הסמלים כדי לעבד את הסמלים.
הצבת טקסט בתגי עיצוב במקום מוטמע בתמונות
כשזה אפשרי, טקסט צריך להיות טקסט ולא מוטמע בתמונות. עבור לדוגמה, שימוש בתמונות לכותרות או הוספת פרטים ליצירת קשר, כמו מספרי טלפון או כתובות – ישירות לתמונות שמונעות מהמשתמשים העתקה והדבקה של המידע; הוא הופך את המידע לבלתי נגיש בקוראי מסך, והוא לא מגיב. במקום זאת, יש למקם את הטקסט בתגי העיצוב ובמקרה הצורך, השתמשו ב-webfonts כדי להשיג את הסגנון שאתם צריכים.
אפשר להשתמש ב-CSS כדי להחליף תמונות
דפדפנים מודרניים יכולים להשתמש בתכונות של CSS כדי ליצור סגנונות שהיו אמורים לקבל
את התמונות הנדרשות. לדוגמה: ניתן ליצור הדרגה מורכבת באמצעות
המאפיין background, ניתן ליצור צלליות באמצעות box-shadow, ולעגל
ניתן להוסיף פינות באמצעות המאפיין border-radius.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. מושב פלנטסקה amet augue eu magna scelerisque Porta ut ut dolor. נולאם פלייסאט אגיסטה nisl sed sollicitudin. Fusce Placerat, ipsum ac vestibulum Porta, purus dolor mollis nunc, pharetra vehicula nulla nunc quis elit. קישוט חגיגי fringilla dui non vehicula. In hac habitasse platea dictumst. Donec ipsum lectus, hendrerit malesuada sapien eget, venenatis tempus purus.
<style>
div#noImage {
color: white;
border-radius: 5px;
box-shadow: 5px 5px 4px 0 rgba(9,130,154,0.2);
background: linear-gradient(rgba(9, 130, 154, 1), rgba(9, 130, 154, 0.5));
}
</style>
זכרו ששימוש בשיטות האלה דורש מחזורי עיבוד, יכולים להיות משמעותיים בניידים. במקרה של שימוש יתר, לא תהיה לך יותר גישה להטבות מה שהתקבלו, ועשויה לפגוע בביצועים.