מדריך HTML » לימוד HTML באינטרנט » מדריך HTML למתחילים » תמונות

תמונות

תמונה אחת שווה 1000 מילים – צודקים !

תגית img אחראית על הזנה של תמונות לעמודי HTML והיא נראת בצורה הבאה :

  1. <img src="http://www.signup.co.il/images/logo.png" width="191" height="60" alt="לוגו Signup קידום אתרים" />

התכונה src מציינת את הנתיב של התמונה על גבי השרת או המחשב האישי. בדומה לתגית a הכתובת יכולה להיות אבסולוטית או יחסית. התכונות width ו – height מציינים את מימדי התמונה, רוחב ואורך בהתאמה. במידה ולא תציין את מימדי התמונה, הדפדפן יחשב זאת עבורך אך המחיר לזה הוא זמן עליה איטי יותר של תוכן האתר.

התכונה alt מציגה תיאור אלטרנטיבי לתמונה - מומלץ להקפיד על שימוש בתכונה זו. התכונה alt שימושית מאוד בקרב אנשים עם מוגבלויות אשר אינם יכולים או לא מעוניינים לצפות בתמונות במהלך הגלישה.

מבחינת סגירה ופתיחה של תגיות, התגית img דומה לתגית br בכך שהיא מבצעת פתיחה וסגירה עצמית.

כיצד להשתמש בתמונות באינטרנט ?

למרות שלא מדובר בנושא העיקרי של האתר זהו בהחלט נושא שכדאי להתעקב עליו מעט.

בדרך כלל, תמונות באינטרנט מוצגות בפורמט של Gif או JPEG, פורמטים אשר דוחסים התמונה וכתוצאה מכך מקטינים את גודלה.

מתי להשתמש בפורמט Gif ?

פורמט Gif מכיל עד 256 צבעים שונים והוא שומר על איכות הצבעים המקוריים של התמונה.
מומלץ להשתמש ב – Gif כאשר מעוניינים לדחוס תמונות בעלות צבעים אחידים וברורים.

מתי להשתמש בפורמט JPEG ?

בניגוד ל – Gif, פורמט JPEG משתמש באלגוריתם מתמטי על מנת לדחוס את התמונה. כתוצאה מכך, יתכן והתמונה תשמר בצורה מעט מעוותת. מומלץ להשתמש ב – JPEG כאשר מעוניינים לדחוס צילומים או תמונות נוף שונות.

לסיכום, אין ספק שתמונות יכולות לעשות את ההבדל ולהחיות את האתר בצורה מיידית. אם זאת, עליך לזכור כי שימוש מופרז בתמונות או שימוש בתמונות כבדות מאוד יעלה לך בזמן טעינה ארוך של האתר. כמו תמיד, כדאי למצוא את האיזון בשילוב תמונות וטקסטים באינטרנט.

עמודים רלוונטים

דוגמאות קוד

  • תמונות ב - HTML

רפרנס

  • תגית img