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

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

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

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

תמונות גדולות לרקעים ומצגות

במטרה לייצר תמונת שער לאתר נדל"ן – הורדתי שתי תמונות מפיקסאביי.

הגדולה משקלה 508 ק"ב.

תמונות גדולות לרקעים ומצגות

התמונה השנייה משקלה 176 ק"ב:

תמונות גדולות לרקעים ומצגות

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

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

חיתוך התמונה בפוטושופ

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

ככל שהתמונה לבנה יותר, היא תשקול פחות

בפוטושופ ניתן לשמור את התמונה לאינטרנט ע"י Ctrl+Alt+Shift+S.

שמירת התמונה בפוטושופ

הגעתי לאיכות שהיא משביעת רצון. למרות שכיוונתי את האיכות ל 20% מתוך 100%. הגודל של התמונה 93.9 קילובייט. זוכרים שכאשר הורדנו את התמונה היא שקלה 508 ק"ב ?

וכעת לתמונות הקטנות והשקופות

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

הוספת אלמנט שקוף לתמונה

אני שומר את התמונה כ PNG ע"י ctrl+alt+shift+S ומשנה את גובה התמונה ל 400 פיקסל גובה, אך עדיין משקל התמונה 244.3 קילו בייט.

הקטנת נפח התמונה

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

הורדת נפח התמונה

לסיכום

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

קצת על הכותב:

עמיר כהן

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

להקה של איש אחד (עם פרילאנסרים שעוזרים לו).

היי, לא לדאוג.....

נשמע כמו ג'יבריש ? יש שאלות נוספות, תרצו לקבל הסבר מקיף על נושא המאמר ? לקבל ייעוץ אישי, הדרכה ואפילו ליווי עסקי ?

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

צרו עימי קשר (מבטיחה לא לשלוח ספאם).....