עדי אשכנזי

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

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

האידיאל

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

משקל: מקסימום 100KB לתמונה.
גודל בפיקסלים:
תמונה רגילה באתר – רוחב 800 פיקסל.
תמונה שמתפרסת על כל רוחב העמוד (כמו תמונה לסליידר דף הבית) – רוחב 1920 פיקסל.

אבל תמונות ענקיות הופכות את האתר לאיכותי יותר, לא?

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

איך נדע מה גודל התמונה?

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

אם התמונה נמצאת על המחשב – איך נדע מה הגודל שלה?

נעמוד על התמונה, קליק ימני על העכבר  > מאפיינים/ Properties > לשונית פרטים
יש כאן שני נתונים שמעניינים אותנו:
מימדים – זה גודל תמונה בפיקסלים,
וגודל – זה משקל התמונה ב-KB (קילו-בייטים).

גודל תמונה

בדוגמא הזאת, אנחנו רואים שה"מימדים" בסדר גמור, אך ה"גודל" – כלומר המשקל – גבוה מידי (האידאל הוא 100KB לתמונה, זוכרים?)

וזה סימן שצריך להקטין את התמונה, תיכף נראה איך.

אם התמונה נמצאת בוורדפרס – איך נדע מה הגודל שלה?

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

גודל תמונה

בלשונית גודל, נוכל לראות את הגודל המלא של התמונה:

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

אוקיי, מה השלב הבא?

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

הקטנת תמונה – בתוכנת מחשב

Image resizer היא תוכנה קלה וחינמית שמאפשרת לנו בקלות להקטין תמונה לגודל מסוים.
נוריד את התוכנה למחשב מהקישור הנ"ל > נתקין אותה > נעמוד על התמונה הרצויה, קליק ימני על העכבר > נזין בחלונית שתפתח את הגודל הנכון לתמונה.
בלחיצת כפתור נקבל העתק של התמונה בגודל המתאים להעלאה לאתר.
במרבית המקרים, נבחר את האפשרות small להקטנת התמונה, אלא אם כן אנו יודעים את הגודל המדויק הרצוי לתמונה.
אם כן נשתמש בגודל Custom.
גודל תמונה
גודל

איך נקטין תמונה – אונליין

מעדיפים אונליין? http://picresize.com  היא תוכנה אונליינית קלה לתפעול, שנותנת מענה מצוין.
בוחרים את התמונה הרצויה, מגדירים custom size רוחב רצוי (התוכנה מתאימה את הגובה אוטומטית), ושומרים למחשב.
גודל

הקטנת תמונה אונליין – עוד כלי

TinyPNG
חינם עד ל-20 תמונות ביום, פשוט גוררים לחלונית את התמונה הרצויה, מחכים לסיום הדחיסה ומורידים את התמונה למחשב בסוף הפעולה.
שימו לב, בפעולה פשוטה חסכנו 66% ממשקל התמונה!

הקטנו את התמונות, מה עכשיו?

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

לסיכום…

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