איך להכין תמונות לפני שמעלים אותם לאתר

תוכן עניינים

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

הסבר תיאורטי קצר

כאשר אנחנו בונים את האתר יש מספר נקודות חשובות בקשר לתמונות:

  • כל התמונות צריכות להראות טוב בכל סוגי התצוגה.
  • יש לבצע אופטימיזיה לתמונות כדי שלא יאטו את אתר
  • התאמת התמונות ל SEO ונגישות
 
מהי בעצם תמונה? 

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

הבחנה בסיסית מחלקת את הסוגים השונים של קובצי תמונה לשתי מחלקות: מפת סיביות (bitmap) וקובץ וקטורי. קבצים מהמחלקה הראשונה מחזיקים את המאפיינים של כל פיקסל שמרכיב את התמונה. קבצים מהמחלקה השנייה מחזיקים את התמונה (או, ליתר דיוק, התרשים) כאוסף של פונקציות מתמטיות. יתרונה של המחלקה השנייה הוא ביכולתה להגדיל ולכווץ את התרשים בלא לפגוע באיכותו. הבחנה בסיסית אחרת מבחינה בין קובץ תמונה דחוס, המאחסן את התמונה בנפח מזערי, ובין קובץ תמונה לא דחוס, השומר את המידע על התמונה בצורה מפורטת, הדורשת נפח רב. (ויקיפדיה)

לפני העלאת קבצי תמונה לאתר, נרצה לשים לב לשלושת הפרמטרים הבאים:

  1. גובה ורוחב - מוגדר בפיקסלים.
  2. גודל - מוגדר בבייטס (mb,kb..)
  3. פורמט -JPEG JPG, PNG,GIF, SVG, WebP

תכלס

נניח שאנחנו רוצים ליצור הירו עם תמונת רקע. 
אני אוהבת לעבוד עם קנבה, מי שעובד עם תוכנות עיצוב - מה טוב.
בשלב הראשון אני יוצרת בקנבה תבנית בגודל הרצוי.
במקרה הזה תמונה ברוחב 1200-1600 ובגובה 900 פיקסלים תתאים. 
הסתכלו על התמונה למטה, הגודל האמיתי שלה הוא 1600*900, איך אתם רואים אותה אצלכם במסך?? 
אם המסך שלכם הוא בגודל הנ"ל אתם תראו אותה בדיוק כמו שייצרתי אותה. אם הוא רחב יותר, התמונה תחתך מלמעלה ומלמטה, אם הוא צר יותר הוא תחתך בצדדים.

טיפטכני

כדי לראות את כל הקוד של האתר, וגם לשחק עם גודל המסך, לחץ על כפתור ימני בעכבר > INSPECT, בסרגל העליון יש אייקון קטן של נייד, תלחצו עליו > נפתח סרגל עליון שבו אפשר לשחק עם גודל המסך ולבדוק את התצוגה במסכים שונים. הסבר מפורט עם תמונות תמצאו פה >> https://ffeathers.wordpress. com /2016/04/16/set-size-of-browser-inner-window-for-screenshots-in-chrome/

תמונת רקע בגודל 1600*900.

הקונטיינר מוגדר על רוחב מלא, גובה 900.

התמונה מוגדרת כרקע, ללא חזרתיות, גודל: כיסוי. 

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

מוזמנים לשחק עם גודל המסך (השתמשו בטיפטכני) כדי לבדוק איך התמונה נראית במסכים השונים.

ומה לגבי התמונה הזו? איך היא נראית אצלכם במסך?

עבור תמונת באנר תתאים תמונה ברחוב 1200-1600 ובגובה 500, הגובה הוא כמובן לשיקול דעתכם העיצובית.

מכירים את זה?

שאנחנו מתחילים להעלות את התמונות לחנות שלנו, או לכל חלק אחר שנראה ככה.. ואז כל תמונה היא בגובה ורוחב אחר ושעות אנחנו מנסים לסדר את זה.

איזה מעצבן!!!!!!!

אז מה עושים? בדיוק אותו הדבר.. מחליטים מראש על גודל אחיד.

זורקים את כל התמונות לעיצוב בקנבה
מורידים > דוחסים ומעלים לאתר.
בואו נראה איך זה יראה לאחר סידור התמונות. 

בחרתי בגודל 500*500 (אפשר לבחור כל פרופורציה אחרת)

פסטה פטוצ'יני ברוטב שמנת עם חזה עוף

פטוציני אלפררררדו

בתוספת חזה עוף צלוי ועסיסי

פסטה ספגטי ברוטב רוזה

ספגטי ברוטב רוזה

ללא ספק האוכל המועדף עלי. פסטה מסוג ספגטי, בכל יום, בכל שעה ובכל טמפרטורה.

צ'יפס עם רוטב אלף האיים

צ'יפס מגרה במיוחד

צ'יפס מתפו"א מתוקים במיוחד. טעים טעים!

איך להכין תמונה פנימית באתר

יאאללה,
נהייתי רעבה .

עד עכשיו התייחסתי לאיך להכין תמונה לאתר בעיקר מבחינת המימדים שלהן (רוחב וגובה)

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

אופטימיזציה

  • לשים לב למימדי התמונה, להתאים את המימדים שלה לאיזור שבו היא אמורה להיות.
  • לשמור בפורמט המתאים:

PNG אם יש לכם צורך בשקיפות

JPG בכל סיטואציה אחרת.

SVG לאייקונים, משאיר לכם את האופציה לשחק אם הגודל והצבע של התמונה באתר עצמו.

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

אפשר לקרוא בפירוט על כל הפורמטים פה סוגי קבצי תמונה לאינטרנט (אנגלית)

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

SEO

גם על הנושא הזו כתבו רבים ומקצועיים ממני, אבל יש שני דברים חשובים מאוד: 

  • לתת שם הגיוני לתמונה
  • לכתוב תיאור ALT - פשוט לכתוב במילים מה רואים בתמונה. זה משמעותי לנגישות ולסריקות של גוגל במנועי החיפוש.

סיכום

סיכום מימדי תמונות לחלקים שונים באתר

  • תמונת רקע בגודל מסך שלם - אורך: 1140-1600, גובה: 900
  • תמונת באנר - אורך: 1140-1600, גובה: 300-500
  • תמונות מוצר מרובעות - אורך 500 , גובה 500.
  • תמונות מוצר מלבניות - אורך:500, גובה: 300-400

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

איך להכין תמונה לאתר, תרגול.

  1. פותחים עיצוב בקנבה בגודל הרצוי (בהתאם לחלק באתר שבו אנחנו רוצים לשים את התמונה)
  2. בוחרים תמונה עם שוליים רחבים. סתומרת, האינפורמציה החשובה של התמונה צריכה להיות ממוקמת באמצע ועם מרחק מהשוליים. ככה שגם כאשר התמונה תחתך, האינפורמציה החשובה עדיין תעבור. 
  3. מורידים את התמונה למחשב
  4. דוחסים את התמונות אונליין (למשל באתר הזה https://tinypng.com/)
  5. מעלים לוורדפרס.
  6. בוחרים שם מתאים לתמונה (בהתאם לתפקיד שלה באתר)
  7. כותבים לה תיאור שמתאר מה בעצם רואים באתר

ועכשיו בוחן פתע! איזו תמונה תראה טוב יותר לדעתכם בכמה שיותר גדלי מסכים?

אישה רוקדת בצד ימין של התמונה

אין! כישרון מולד.
זה 100 מתוך 100

מוזמנים לשחק עם גודל המסך (כפי שלמדנו) לראות שהתמונה הזו אכן נראית טוב בגדלים שונים

כשמסבירים לי לאט, אני מבינה מהר.
אולי גם אצלך זה ככה.
תנסי לקרוא שוב הכל מההתחלה אבל ל - א - ט

מוזמנים לשחק עם גודל המסך (כפי שלמדנו) לראות שהתמונה הזו נחתכת ומאבדת "מידע" בגדלי מסך שונים.

תודה שהגעתם עד לכאן, כנראה שהיה בסדר סה"כ. אם יש שאלות שלא עניתי עליהן, דברים לא ברורים אשמח מאוד לשמוע!
מאיה 🙂

כתיבת תגובה

האימייל לא יוצג באתר.

תודה!

אני יעבור על כל החומר ששלחת לי ואחזור אלייך בתוך 48 שעות לכל היותר.