האתר שלנו הוא יצור דינמי ועצמאי, מהרגע שהוא משתחרר לעולם כל משתמש צופה בו ממסך בגודל אחר. בפוסט הזה אתייחס לתמונות באתר ואיך להכין אותן לפני שאנחנו מעלים לאתר כך שיתפקדו באופן האופטימלי מבחינת רספונסיביות, מהירות וקצת SEO
הסבר תיאורטי קצר
כאשר אנחנו בונים את האתר יש מספר נקודות חשובות בקשר לתמונות:
- כל התמונות צריכות להראות טוב בכל סוגי התצוגה.
- יש לבצע אופטימיזיה לתמונות כדי שלא יאטו את אתר
- התאמת התמונות ל SEO ונגישות
קובץ תמונה הוא קובץ מחשב אשר מכיל את המרכיבים של יצירת תמונה: אורך, רוחב, צפיפות, צבעים וכיוצא בזה. לאחסון והצגה של תמונות במחשב משמשים סוגים אחדים של קבצים, שלכל אחד מהם יתרונות וחסרונות משלו.
הבחנה בסיסית מחלקת את הסוגים השונים של קובצי תמונה לשתי מחלקות: מפת סיביות (bitmap) וקובץ וקטורי. קבצים מהמחלקה הראשונה מחזיקים את המאפיינים של כל פיקסל שמרכיב את התמונה. קבצים מהמחלקה השנייה מחזיקים את התמונה (או, ליתר דיוק, התרשים) כאוסף של פונקציות מתמטיות. יתרונה של המחלקה השנייה הוא ביכולתה להגדיל ולכווץ את התרשים בלא לפגוע באיכותו. הבחנה בסיסית אחרת מבחינה בין קובץ תמונה דחוס, המאחסן את התמונה בנפח מזערי, ובין קובץ תמונה לא דחוס, השומר את המידע על התמונה בצורה מפורטת, הדורשת נפח רב. (ויקיפדיה)
לפני העלאת קבצי תמונה לאתר, נרצה לשים לב לשלושת הפרמטרים הבאים:
- גובה ורוחב - מוגדר בפיקסלים.
- גודל - מוגדר בבייטס (mb,kb..)
- פורמט -JPEG JPG, PNG,GIF, SVG, WebP
טיפטכני
כדי לראות את כל הקוד של האתר, וגם לשחק עם גודל המסך, לחץ על כפתור ימני בעכבר > INSPECT, בסרגל העליון יש אייקון קטן של נייד, תלחצו עליו > נפתח סרגל עליון שבו אפשר לשחק עם גודל המסך ולבדוק את התצוגה במסכים שונים. הסבר מפורט עם תמונות תמצאו פה >> https://ffeathers.wordpress. com /2016/04/16/set-size-of-browser-inner-window-for-screenshots-in-chrome/
איך לבחור את הגודל הנכון לתמונת הירו
נניח שאנחנו רוצים ליצור הירו עם תמונת רקע.
אני אוהבת לעבוד עם קנבה, מי שעובד עם תוכנות עיצוב - מה טוב.
בשלב הראשון אני יוצרת בקנבה תבנית בגודל הרצוי.
במקרה הזה תמונה ברוחב 1200-1600 ובגובה 900 פיקסלים תתאים.
הסתכלו על התמונה למטה, הגודל האמיתי שלה הוא 1600*900, איך אתם רואים אותה אצלכם במסך??
אם המסך שלכם הוא בגודל הנ"ל אתם תראו אותה בדיוק כמו שייצרתי אותה. אם הוא רחב יותר, התמונה תחתך מלמעלה ומלמטה, אם הוא צר יותר הוא תחתך בצדדים.
תמונת רקע בגודל 1600*900.
** מידע למתקדמים **
הקונטיינר מוגדר על רוחב מלא, גובה 900.
התמונה מוגדרת כרקע, ללא חזרתיות, גודל: כיסוי.
שימו לב, אם המסך שלנו יהיה בדיוק בגודל של התמונה היא תראה כמו שרצינו, אבל אם המסך גודל או קטן יותר, התמונה תחתך.
מוזמנים לשחק עם גודל המסך (השתמשו בטיפטכני) כדי לבדוק איך התמונה נראית במסכים השונים.
ומה לגבי התמונה הזו? איך היא נראית אצלכם במסך?
עבור תמונת באנר תתאים תמונה ברחוב 1200-1600 ובגובה 500, הגובה הוא כמובן לשיקול דעתכם העיצובית.
מכירים את זה?
שאנחנו מתחילים להעלות את התמונות לחנות שלנו, או לכל חלק אחר שנראה ככה.. ואז כל תמונה היא בגובה ורוחב אחר ושעות אנחנו מנסים לסדר את זה.
איזה מעצבן!!!!!!!
אז מה עושים?
לפי שמעלים את התמונות לאתר מחליטים מראש על גודל אחיד.
ריבוע או מלבן, ע"פ הצורך.
סדר פעולות:
1.מעלים את התמונות לתוכנת עיצוב (קנבה או אחרת), בוחרים את הגודל הרצוי
2. מורידים את התמונה לאתר ושומרים אותה עם שם מתאים (לפי מה שרואים בתמונה)
3. מעלים לאתר של כיווץ תמונות
4. מעלים לאתר
במקרה הזה בחרתי בגודל 500*500 (אפשר לבחור כל פרופורציה אחרת)
וככה התמונות יראו לאחר התהליך המתואר מעלה
פטוציני אלפררררדו
בתוספת חזה עוף צלוי ועסיסי
ספגטי ברוטב רוזה
ללא ספק האוכל המועדף עלי. פסטה מסוג ספגטי, בכל יום, בכל שעה ובכל טמפרטורה.
צ'יפס מגרה במיוחד
צ'יפס מתפו"א מתוקים במיוחד. טעים טעים!
איך להכין תמונה פנימית באתר לגלריית מוצרים או שירותים
עד עכשיו התייחסתי לאיך להכין תמונה לאתר בעיקר מבחינת המימדים שלהן (רוחב וגובה)
לגבי הנקודות הנוספות אני אתייחס, אבל בקצרה כי יש על זה מלא מידע זמין ברשת.
אופטימיזציה
- לשים לב למימדי התמונה, להתאים את המימדים שלה לאיזור שבו היא אמורה להיות.
- לשמור בפורמט המתאים:
PNG אם יש לכם צורך בשקיפות
JPG בכל סיטואציה אחרת.
SVG לאייקונים, משאיר לכם את האופציה לשחק אם הגודל והצבע של התמונה באתר עצמו.
WebP פורמט חדש יחסית. מבחינה טכנולוגית הוא הכי טוב, ניתן לדחוס אותו בצורה טובה יותר והוא גם מאפשר שקיפות.
אפשר לקרוא בפירוט על כל הפורמטים פה סוגי קבצי תמונה לאינטרנט (אנגלית)
- לדחוס את התמונה לפני שמעלים לאתר. יש תוספים שמבצעים דחיסה לתמונות אחרי שהעלינו לוורדפרס אבל אני ממליצה לדחוס אותן ללפני שמעלים. יש הרבה אופציות חינמיות אונליין לדחיסת תמונות, זו אחת מהן
SEO
גם על הנושא הזו כתבו רבים ומקצועיים ממני, אבל יש שני דברים חשובים מאוד:
- לתת שם הגיוני לתמונה
- לכתוב תיאור ALT - פשוט לכתוב במילים מה רואים בתמונה. זה משמעותי לנגישות ולסריקות של גוגל במנועי החיפוש.
סיכום
סיכום מימדי תמונות לחלקים שונים באתר
- תמונת רקע בגודל מסך שלם - אורך: 1140-1600, גובה: 900
- תמונת באנר - אורך: 1140-1600, גובה: 300-500
- תמונות מוצר מרובעות - אורך 500 , גובה 500.
- תמונות מוצר מלבניות - אורך:500, גובה: 300-400
הערה קטנה לגבי ניידים, אפשר לנסות למצוא תמונה שתראה טוב גם בנייד, אבל זה אתגר. אפשר גם לוותר מראש ופשוט להכין תמונה נוספת לניידים. מה שמתאים לכם, לא שופטת.
- פותחים עיצוב בקנבה בגודל הרצוי (בהתאם לחלק באתר שבו אנחנו רוצים לשים את התמונה)
- בוחרים תמונה עם שוליים רחבים. סתומרת, האינפורמציה החשובה של התמונה צריכה להיות ממוקמת באמצע ועם מרחק מהשוליים. ככה שגם כאשר התמונה תחתך, האינפורמציה החשובה עדיין תעבור.
- מורידים את התמונה למחשב
- דוחסים את התמונות אונליין (למשל באתר הזה https://tinypng.com/)
- מעלים לוורדפרס.
- בוחרים שם מתאים לתמונה (בהתאם לתפקיד שלה באתר)
- כותבים לה תיאור שמתאר מה בעצם רואים באתר
ועכשיו בוחן פתע! איזו תמונה תראה טוב יותר לדעתכם בכמה שיותר גדלי מסכים?
אין! כישרון מולד.
זה 100 מתוך 100
מוזמנים לשחק עם גודל המסך (כפי שלמדנו) לראות שהתמונה הזו אכן נראית טוב בגדלים שונים
כשמסבירים לי לאט, אני מבינה מהר.
אולי גם אצלך זה ככה.
תנסי לקרוא שוב הכל מההתחלה אבל ל - א - ט
מוזמנים לשחק עם גודל המסך (כפי שלמדנו) לראות שהתמונה הזו נחתכת ומאבדת "מידע" בגדלי מסך שונים.
