תמונה שווה 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 במסך כפול, ובעתיד, שימוש בתמונה פי 1 במכשיר עם רוחב פס מוגבל.
<img src="photo.png" srcset="photo@2x.png 2x" ...>
בדפדפנים שלא תומכים ב-srcset, הדפדפן פשוט משתמש בקובץ התמונה שמוגדר כברירת מחדל במאפיין src. לכן חשוב תמיד לכלול תמונה בגודל 1x שניתן להציג בכל מכשיר, ללא קשר ליכולות. כשיש תמיכה ב-srcset, המערכת מנתחת את רשימת התמונות או התנאים שמופרדים בפסיקים לפני שליחת בקשות, ורק התמונה המתאימה ביותר יורדת ומוצגת.
בעוד שהתנאים יכולים לכלול מגוון רחב של נתונים, מדחיסות פיקסלים ועד רוחב וגובה, רק היום יש תמיכה רק בדחיסות פיקסלים. כדי לאזן בין ההתנהגות הנוכחית לבין תכונות עתידיות, כדאי פשוט לספק את התמונה פי 2 במאפיין.
עיצוב אומנות בתמונות רספונסיביות עם 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, בהתאם לרזולוציית המכשיר. אם רוחב הדפדפן הוא בין 450 ל-800 פיקסלים, ייעשה שימוש ב-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.5 |
| 600 פיקסלים | 2 | 800.jpg |
פי 2.67 |
| 640 פיקסלים | 3 | 1000.jpg |
פי 3.125 |
| 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 של נתונים מספקים דרך לכלול קובץ, כמו תמונה, בתוך שורה, על-ידי הגדרת ה-src של אלמנט img כמחרוזת מקודדת של Base64 באמצעות הפורמט הבא:
<img src="data:image/svg+xml;base64,[data]">
תחילת הקוד של לוגו HTML5 למעלה נראית כך:
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiB
BZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW ...">
(הגרסה המלאה כוללת יותר מ-5,000 תווים!)
אפשר להמיר קבצים בינאריים כמו תמונות למזהי URI של נתונים באמצעות הכלי 'גרירה ושחרור', כמו jpילוra.com/base64-encoder. בדיוק כמו קובצי SVG, גם מזהי URI של נתונים נתמכים היטב בדפדפנים לנייד ולמחשב.
הטבעה ב-CSS
אפשר להוסיף למחרוזות URI של נתונים וקובצי SVG גם ל-CSS, והדבר נתמך בניידים וגם במחשבים. הנה שתי תמונות שנראות זהות, שמוטמעות כתמונות רקע ב-CSS; מזהה URI אחד של נתונים והשנייה ל-SVG:
יתרונות וחסרונות מוטבעים
קוד מוטבע לתמונות יכול להיות ארוך במיוחד, ובמיוחד מזהי URI של נתונים, אז למה כדאי להשתמש בו? לצמצום בקשות HTTP! קובצי SVG ו-URI של נתונים יכולים לאפשר אחזור של דף אינטרנט שלם, כולל תמונות, CSS ו-JavaScript, באמצעות בקשה אחת.
החיסרון:
- בנייד, ההצגה של מזהי URI של נתונים בנייד עשויה להיות איטית יותר באופן משמעותי מאשר תמונות מ-
srcחיצוני. - מזהי URI של נתונים יכולים להגדיל באופן משמעותי את הגודל של בקשת HTML.
- הם מוסיפים מורכבות לתגי העיצוב ולתהליך העבודה.
- הפורמט של ה-URI של הנתונים גדול בהרבה מהפורמט הבינארי (עד 30%), ולכן הוא לא מצמצם את גודל ההורדה הכולל.
- לא ניתן לשמור מזהי URI של נתונים, לכן יש להוריד אותם עבור כל דף שבו הם נמצאים.
- הן לא נתמכות ב-IE 6 ו-7, תמיכה חלקית ב-IE8.
- ב-HTTP/2, הפחתת מספר הבקשות לנכסים תהיה פחות חשובה.
כמו בכל שיטה רספונסיבית, צריך לבדוק מה עובד הכי טוב. כדאי להשתמש בכלים למפתחים כדי למדוד את גודל הקובץ להורדה, את מספר הבקשות ואת זמן האחזור הכולל. מזהי URI של נתונים יכולים לפעמים להיות שימושיים לתמונות בפורמט רסטר. לדוגמה, בדף בית שיש בו רק תמונה אחת או שתיים שלא נמצאות בשימוש במקום אחר. אם אתם צריכים תמונות וקטוריות מוטבעות, SVG הוא אפשרות טובה יותר.
תמונות ב-CSS
המאפיין background ב-CSS הוא כלי עוצמתי להוספת תמונות מורכבות לרכיבים, שמאפשר להוסיף בקלות כמה תמונות ולגרום להן לחזור על עצמן ועוד. בשילוב עם שאילתות מדיה, מאפיין הרקע הופך לחזק עוד יותר ומאפשר טעינה מותנית של תמונות על סמך רזולוציית המסך, גודל אזור התצוגה ועוד.
סיכום
- כדאי להשתמש בתמונה הטובה ביותר בהתאם למאפייני המסך, למשל גודל המסך, רזולוציית המכשיר ופריסת הדף.
- שינוי המאפיין
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, וכך קל יותר לספק מספר קובצי תמונה למאפיינים שונים של המכשיר. כך הדפדפן יכול לבחור את התמונה הטובה ביותר בהתאם למאפייני המכשיר, לדוגמה, להשתמש בתמונה פי 2 במסך כפול, או בתמונה פי 1 במכשיר פי 2 ברשת עם רוחב פס מוגבל.
background-image: image-set(
url(icon1x.jpg) 1x,
url(icon2x.jpg) 2x
);
בנוסף לטעינת התמונה הנכונה, הדפדפן גם משנה את הגודל שלה בהתאם. במילים אחרות, הדפדפן מניח שתמונות בגודל פי 2 גדולות פי 2 מתמונות בגודל פי 1, ולכן מקטין את התמונה פי 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() נמוכה, רוב הדפדפנים מקבלים נכס 1x.
שימוש בשאילתות מדיה כדי לספק תמונות ברזולוציה גבוהה או כיוון אומנות
שאילתות מדיה יכולות ליצור כללים על סמך יחס הפיקסלים של המכשיר, וכך אפשר להגדיר תמונות שונות למסך 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>).
יש מאות גופנים של סמלים בחינם ובתשלום, כולל Font Awesome, Pictos ו-Glyphicon.
חשוב לאזן בין המשקל של בקשת ה-HTTP הנוספת לבין גודל הקובץ הנוסף לבין הצורך בסמלים. לדוגמה, אם אתם צריכים רק מספר קטן של סמלים, עדיף להשתמש בתמונה או ב-Sprite של תמונה.
אופטימיזציה של תמונות כדי לשפר את הביצועים
בדרך כלל תמונות מהוות את רוב הבייטים שהורדתם, ולרוב הן גם תופסות חלק משמעותי מהשטח החזותי בדף. כתוצאה מכך, אופטימיזציה של תמונות יכולה להניב לעיתים קרובות חלק מהשיפורים המשמעותיים ביותר בביצועים ובבייטים של האתר: ככל שהדפדפן צריך להוריד פחות בייטים, כך יש פחות תחרות על רוחב הפס של הלקוח, והדפדפן יכול להוריד ולהציג את כל הנכסים מהר יותר.
סיכום
- לא כדאי לבחור באופן אקראי פורמט תמונה – כדאי להבין מהם הפורמטים השונים הזמינים ולהשתמש בפורמט המתאים ביותר.
- כדאי לכלול כלים לאופטימיזציה ולדחיסה של תמונות בתהליך העבודה, כדי להקטין את גודל הקבצים.
- הפחת את מספר בקשות ה-http על ידי הצבת תמונות נפוצות ב-Sprite של תמונות.
- כדי לקצר את זמן הטעינה הראשוני של הדף ולהפחית את המשקל הראשוני של הדף, כדאי לשקול טעינת תמונות רק אחרי שהן גוללים לתצוגה.
בחירת הפורמט הנכון
יש שני סוגי תמונות שאפשר להשתמש בהם: תמונות וקטוריות ותמונות רסטר.
כדי לצלם תמונות מסוג רשת נקודות, צריך לבחור גם את פורמט הדחיסה המתאים, לדוגמה: 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". לאחר מכן אפשר להשתמש בתמונות בודדות על ידי ציון תמונת הרקע של רכיב (גיליון ה-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;
}
היתרון של שילוב בין אזורים הוא שהוא מפחית את מספר ההורדות שנדרשות כדי לקבל כמה תמונות, ועדיין מאפשר שמירה במטמון.
מומלץ להשתמש בטעינה מושהית
טעינה עצלה יכולה להאיץ משמעותית את הטעינה בדפים ארוכים עם תמונות רבות בחלק הנגלל, כי הן נטענות לפי הצורך או כשהתוכן הראשי מסיים את הטעינה והעיבוד. בנוסף לשיפורים בביצועים, השימוש בטעינה מושהית יכול ליצור חוויות גלילה מתמשכת.
חשוב להיזהר כשיוצרים דפים עם גלילה מתמשכת – מאחר שהתוכן נטען כשהוא הופך לגלוי, ייתכן שמנועי חיפוש אף פעם לא יראו את התוכן הזה. בנוסף, משתמשים שמחפשים מידע שהם מצפים לראות בכותרת התחתונה אף פעם לא יראו את הכותרת התחתונה, כי תוכן חדש תמיד נטען.
להימנע לחלוטין מתמונות
לפעמים התמונה הטובה ביותר אינה תמונה בכלל. ככל האפשר, כדאי להשתמש ביכולות המקוריות של הדפדפן כדי לספק פונקציונליות זהה או דומה. דפדפנים יוצרים רכיבים חזותיים שבעבר היה צריך תמונות. המשמעות היא שדפדפנים לא צריכים יותר להוריד קובצי תמונה נפרדים, וכך נמנעת שמירה על גודל מסורבל של תמונות. ניתן להשתמש בגופני Unicode או סמלים מיוחדים כדי לעבד סמלים.
להוסיף טקסט בתגי עיצוב במקום להטמיע טקסט בתמונות
כשהדבר אפשרי, הטקסט צריך להיות טקסט ולא להטמיע אותו בתמונות. לדוגמה, שימוש בתמונות לכותרות או הצבת פרטים ליצירת קשר - כמו מספרי טלפון או כתובות - ישירות לתוך תמונות, מונעים מהמשתמשים להעתיק ולהדביק את המידע. כך לקוראי המסך לא תהיה גישה למידע, ולא תהיה תגובה. במקום זאת, הוסיפו את הטקסט לתגי העיצוב שלכם ובמידת הצורך השתמשו ב-webfonts כדי להשיג את הסגנון הדרוש.
שימוש ב-CSS להחלפת תמונות
דפדפנים מודרניים יכולים להשתמש בתכונות של CSS כדי ליצור סגנונות, שבעבר היו צריכים תמונות. לדוגמה: אפשר ליצור הדרגה מורכבת באמצעות המאפיין background, ניתן ליצור צלליות באמצעות box-shadow ולהוסיף פינות מעוגלות באמצעות המאפיין border-radius.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet augg eu magna scelerisque porta ut ut dolor. Nullam Placerat egestas nisl sed sollicitudin. Fusce Placerat, ipsum ac vestibulum Porta, purus dolor mollis nunc, pharetra vehicula nulla nunc quis elit. Duis Ornare. 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>
חשוב לזכור שהשימוש בשיטות האלה דורש מחזורי רינדור, שעשויים להיות משמעותיים בנייד. שימוש יתר עלול לגרום לאיבוד כל היתרונות של השימוש, והוא עלול לפגוע בביצועים.