הוספת תמונות לעמוד
נכתב ע"י יוחאי ירמיהו 17 תגובות
אין ספק שהוספת תמונות לאתר תאפשר לנו לשפר את המראה הכללי שלו ולשפר את חווית המשתמש של הגולש.
במאמר זה נדבר על איך מוסיפים תמונה לאתר באמצעות קוד HTML, נדבר על הערכים השונים שניתן וצריך להוסיף לתמונות ונדבר מעט על הנושא של אופטימיזציה לתמונות ואיך לא לפגוע בזמני טעינה של העמוד בעת הוספת תמונה לאתר.
איך לבנות אתר בחינם בשעה וחצי?
יש לי הצעה מעניינת עבורך, יצרתי הדרכה מלאה של למעלה משעה וחצי שתלמד אותך איך לבנות אתר מ-0 בחינם כולל רכישת אחסון ודומיין. נשמע מעניין? אשמח לשלוח לך אותה למייל.
הוספת תמונה לעמוד
כאשר אנחנו רוצים להוסיף תמונה לעמוד נצטרך תחילה להוסיף אותה לשרת או לתיקייה שממנה אנחנו טוענים את הקובץ HTML.
דיברנו קצת על הנושא של יצירת עמודי HTML וחשוב להבין שניתן לטעון תמונה עם קישור של כתובת URL של אתר קיים וניתן לטעון תמונה ללא קישור כאשר התמונה מופיעה באותה תיקייה של הקובץ HTML או בתיקייה פנימית הקרובה לקובץ.
נדבר מתחת על 2 האפשרויות השונות לטעינת תמונות משרת ומתיקייה במחשב.
טעינת תמונה משרת אחסון
לצורך ההדגמה נתחיל מטעינה של תמונה כאשר מדובר על טעינה מתוך שרת אחסון או מתוך אחד מאתרי האחסון לתמונות שמאפשר גישה ישירה לקישור אל התמונה.
על מנת להוסיף תמונה נכניס את הקוד הבא ונשנה את הפרמטר של src אל הכתובת הישירה של התמונה שאנחנו רוצים לטעון.
<img src='https://html.org.il/wp-content/uploads/2020/08/html-logo-darker.png' />
טעינת תמונה מתיקייה במחשב
היום כבר כמעט ולא משתמשים בשיטה הזאת כי לטווח הרחוק היא יכולה לגרום לבעיות אבל במידה והאתר שלכם נבנה באמצעות קוד HTML והתמונה והעמוד נמצאים באותה תיקייה ניתן לטעון את התמונה ללא צורך בקישור מלא אל הכתובת של הדומיין (שם האתר) וללא צורך בשרת אחסון.
על מנת לעשות זאת יש צורך להוסיף בשדה של src את הקישור אל התמונה לפי המיקום שלה ביחס לקובץ HTML שנטען לעמוד. כך שאם הקובץ HTML נמצא באותו תיקייה בדיוק כמו התמונה ניתן יהיה לטעון את התמונה עם הקוד הבא.
<img src='image.jpg' />
במידה והתמונה או התמונות נמצאות בתוך תיקייה כמו למשל תיקייה בשם images אז נצטרך להוסיף את הקישור הקיים לתיקייה ולא נוכל לטעון את התמונה באופן ישיר. אז טעינה תקנית תהיה לפי הקוד הבא שלוקח בחשבון גם את התיקייה שבה נמצאת התמונה.
<img src='images/image.jpg' />
הוספת תיאור לתמונה (תגית ALT)
ברגע שאנחנו מוסיפים תמונה דבר נוסף שאנחנו צריכים לעשות זה להוסיף תגית alt שמאפשרת לנו לתאר מה נמצא בתוך התמונה. שימוש בתגית alt זה היום משהו שחובה לעשות בהתאם לחוק הנגישות ובנוסף שימוש בתגית זאת גם עוזרת בקידום האתר בגוגל.
<img src='https://html.org.il/wp-content/uploads/2020/08/html-logo-darker.png' alt='לוגו של HTML ישראל' />
יתרון נוסף של תגית Alt הוא שכאשר התמונה לא תיטען (אם למשל היא תימחק מהאחסון) אז הטקסט שיופיע במקום התמונה הוא טקסט התיאור שהגדרנו עבור תגית ה-ALT.
הוספת רוחב וגובה לתמונה
כאשר אנחנו משתמשים בתמונות יש לנו גם את האפשרות להגדיר רוחב וגובה לתמונה שאנחנו מוסיפים. חשוב להבין שכאשר אנחנו מגדירים את הפרמטרים האלו יש לקחת בחשבון את היחס בין הגובה לרוחב התמונה ויש להקטין או להגדיל את הפרמטרים בהתאם לגודל התמונה. שינוי באופן לא תואם יגרום לכך שהתמונה תוצג בצורה לא טובה.
מתחת אתם יכולים לראות כיצד להגדיר את הרוחב והגובה של תמונה ואיך ניתן להקטין את התמונה או להגדיל אותה בהתאם לפרמטרים שאתם בוחרים עבור הגובה והרוחב.
<img width='250px' height='77px' src='https://html.org.il/wp-content/uploads/2020/08/html-logo-darker.png' alt='לוגו של HTML ישראל' />
נכון להיום כאשר מדובר על תהליך של בניית אתר בדרך כלל במרבית התבניות המוכנות הקיימות ברשת תהיה התאמה של האתר והתמונות למובייל כך שכאשר נכנס גולש מהטלפון הנייד גודל התמונה יתאים את עצמו לגודל התצוגה של המסך.
לעומת זאת כאשר מדובר על אתר HTML ללא קוד CSS המתאים את האתר למובייל חשוב לבצע את ההתאמה של התמונה אל רוחב/גודל האתר גם כאשר האתר משנה את התצוגה שלו בטלפון הנייד.
בעבר ספריות מוכנות כמו Bootstrap היו הופכות את התהליך של בניית אתר רספונסיבי לפשוט יותר אך היום עם כל המערכות המוכנות כמו וורדפרס ואתרים כמו וויקס השימוש בספריות מסוג זה הולך וקטן.
אופטימיזציה לתמונות
חשוב להבין שתמונות הם אחד הפרמטרים שמשפיעים לרעה באופן הכי חמור על מהירות טעינה של אתר או עמוד ועל מנת שתוכלו להימנע מאתר שנטען לאט יש צורך לשמור את התמונה ברוחב ובגובה המתאימים לתצוגה בעמוד ויש צורך לבצע אופטימיזציה לתמונות על מנת להקטין את המשקל שלהם.
רצוי מאוד להימנע משימוש בתמונות בעלות משקל גבוה מאחר וזה יכול להשפיע לרעה גם על הקידום של האתר בגוגל.
למי שרוצה ללמוד איך לבצע אופטימיזציה לתמונות ומה צריך לעשות בשביל להקטין משקל תמונה צפו בסרטון:
עוד לא צפיתם בהדרכה? זה בחינם!
אני רוצה ללמד אתכם לבנות אתר אחד בחינם. מדובר על הדרכה של למעלה משעה וחצי שבה אני אלמד אותך מ-0 לבנות אתר כולל רכישת אחסון ודומיין. לקבלת ההדרכה למייל באופן מיידי יש להשאיר פרטים מתחת.
אם אהבתם את המדריך ואתם רוצים לשתף אותו ניתן לעשות זאת על ידי לחיצה על כפתורי השיתוף מתחת:
יש לכם שאלות בנוגע למדריך HTML? שתפו אותנו בתגובות!
אם יש לכם שאלות, אם משהו היה לא מובן או במידה ואתם רוצים לשתף אותנו בדעה שלכם תוכלו לעשות זאת בתגובות מתחת:
17 תגובות
לא ניתן לפרסם תגובות
ניסיתי לעשות קישור לתמונה באותה תיקיה לפי הכללים שכתובים כאן וזה לא מצליח והתמונה לא מופיעה
היי, אתה מוזמן לשתף כאן את הקוד עם התמונה שהוספת וננסה להעיף מבט ולהבין מה לא עובד
הסתדרתי
תודה רבה
יש דרך להוסיף תמונה בלי התגית img?
היי אפשר אולי לעשות את זה באמצעות קוד CSS במקום אבל בקוד HTML זה צריך להיות עם תגית IMG.
תודה!
אפשר להוסיף תמונה מקישור מאתר אחר?
כמובן, זה לא משהו שאמור להיות בעיה פשוט תוסיף את הקישור המלא לתמונה.
https://www.website.co.il/image.jpg
איך אפשר להציג קישור להורדה של תמונה?
הפרקטיקה הנכונה בדרך כלל תהיה באמצעות קוד PHP כי זה יעבוד גם בדפדפנים ישנים אבל אפשר גם להשתמש בקוד כמו הקוד הבא ולשנות את הנתונים בהתאמה:
למה תכונת alt לא מציגה לי את תוכן התמונה במעבר עם עכבר עליה ?
ככה הדפדפן עובד, תנסה את התגית של title במקום אם זה מה שאתה מחפש
איך אפשר לעשות אופציה שעל ידיי לחיצה התמונה תגדל, אם זה עם גאווה סקריפט אשמח שתזרוק לי כיוון
היי לצערי זה לא משהו שאני יכול להגיב עליו במסגרת תגובה באתר.
אתה צריך גם הבנה קצת יותר עמוקה ב-CSS ו-JavaScript כדי לדעת איך לעשות את זה.
תנסה אולי לעשות חיפושים גוגל מחו"ל על סקריפטים מוכנים.
שלום, איך אפשר להביא תמונה מעל תמונה כאילו שיעלו אחת על השנייה ויתמזגו יחד, ולא אחת אחרי השנייה??
אני לא יודע מה זה אומר יתמזגו ביחד אבל יש אפשרות להציג תמונה מעל תמונה אחרת.
זה נעשה בעיקר באמצעות CSS אז תנסה לחפש מדריכים בגוגל על Z-index ועל Position עם שילוב של CSS ואני מקווה שתמצא פתרון.
הי, יש לנו פרויקט לעשות משחק-איש תלוי,
ואני רוצה שברקע יהיה תמונה, ובכל פעם שהמשתמש מקיש ערך שגוי,חלק מהתמונה יתגלה, האם יש דרך כזו?
שרק במקרה שהערך שגוי,יתגלה חלק מהתמונה.
אמשח לתשובה. תודה רבה!