חיפוש

גרפיקות וקטוריות – למה ולמה זה טוב עבור אתר האינטרנט שלך?

איך בנויה תמונה במסך?

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

גרפיקות וקטוריות

ניתן לראות בבירור שהתמונה נראת "מרובעת" יותר ופחות איכותית כשגדלה. הקובץ שישמר יראה פחות או יותר ככה:

A,1: לבן

B,1: לבן

C,1: אדום

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

A,4: כחול

B,4: כחול

C,4: כחול

D,4: כחול

E,4: כחול

המחשב יעדיף לשמור פשוט ככה:

A-E,4: כחול

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

ואז הגיעה פולי…

בעולם שבו המסכים גדלים ויודעים להציג פירוט רב יותר, רצו מפתחי אתרי אינטרנט (ולא רק הם – גם גרפיקאים, אדריכלים ועוד…) אפשרות להציג גרפיקות איכותיות, גדולות, מפורטות וחדות, מבלי שיאלצו את המשתמש להמתין עבור הגרפיקה עד שתרד למחשב שלו ותוצג בהצלחה. הפתרון הוא פשוט: פוליגונים! פוליגון – בעברית: מצולע – הוא שם כולל עבור צורה הנדסית – ריבועים, מחומשים, עיגולים, מתומנים ושאר צורות מורכבות. גרפיקות וקטוריות מאפשרות תצוגה של גרפיקה מפורטת, קלת משקל ומהירה להורדה, תוך כדי שלא משנה כמה נגדיל אותה, היא לעולם לא תאבד מהאיכות שלה, ולכן תראה מדהימה גם כאשר היא גדולה ומוצגת כל גבי מסך גדול ואיכותי ונצפת מקרוב. הדבר אפשרי באמצעות גישה שונה לחלוטין לשמירת המידע שמגדיר את התמונה. גרפיקה וקטורית מגיעה עם תג מחיר – היא לא יעילה בעליל עבור תצלומים, אבל היא מעולה עבור לוגואים, ציורים, גרפים וכדומה. הנה אותה תמונה של אותו בית מהדוגמא למעלה, הפעם, כפי שהבית יראה וייוצג בגרפיקה וקטורית.

גרפיקות וקטוריות 2

הקובץ של הגרפיקה הוקטורית ישמר כך:

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

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

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

איך כל זה מתקשר לקידום ולמה כדאי לי להשתמש בגרפיקות וקטוריות באתר שלי?

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

מלבד היתרונות עבורך ועבור הגולש, גוגל מת על זה.

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

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

איך ממירים?

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

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

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

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

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

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

גרפיקות וקטוריות - למה ולמה זה טוב עבור אתר האינטרנט שלך
שלחו לחבר קישור למאמר, הוא חייב לקרוא אותו!
שלחו לחבר קישור למאמר
הוא חייב לקרוא אותו!
עשהאל דרייר
עשהאל דרייר

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

מאמרים נוספים מומלצים לקריאה עבורך:

המדריך המלא להקמת אתרי לידים

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

כדאי להשקיע ב-SEO בזמן מלחמה?

מדינת ישראל נמצאת במלחמה (נכון להיום – 6.11.23). אני כותב את זה בגוף ראשון כמי שלוקח בה חלק פעיל. אין ספק שמלחמה היא עניין מורכב

בדיקת מהירות אחסון אתרים קלאודוויז
עשהאל דרייר
היי כאן עשהאל ואני רוצה להמליץ לך באופן אישי לפתוח שרת בקלאודוויז ולהנות מאתרים מהירים, תמיכה 24/7 וממשק נוח. אני מאחסן למעלה מ-400 אתרים בעצמי וממליץ בחום ובלב שלם, לאחר מספר שנות ניסיון
תוכנת מעקב הדירוגים הטובה בעולם!
בואו לעקוב אחרי מיקומים של כל אתר, מכל מקום בעולם, כולל הפרדה בין מיקומי דסקטופ ומובייל, תנועה, תיעוד עבודה ואפילו תוכלו לשלוח ללקוחות שלכם לינק לדשבורד שמתעדכן אונליין!
הטבה לגולשי האתר:
14 ימי ניסיון ו-25% הנחה לחודשיים