גודל תמונה ראשית בוורדפרס: 1200×630 + איך למצוא את שלכם

התשובה הקצרה: אם אתם עדיין לא יודעים מה הגודל של התבנית שלכם, השתמשו בגודל 1200 × 630 פיקסלים (בערך 1.91:1). זה גודל התצוגה המקדימה של קישורים שפייסבוק ממליצה עליו, ותוספי SEO משתמשים בדרך כלל בתמונה הראשית כתמונת השיתוף.

בפוסט עצמו, הגודל שקובע הוא זה שהתבנית שלכם מציגה. וורדפרס שומר כל העלאה בכמה גדלים, והתבנית בוחרת איזה מהם יופיע. תבניות קלאסיות מגדירות את זה עם set_post_thumbnail_size() או add_image_size(); תבניות בלוקים מגדירות את זה בבלוק התמונה הראשית. אם התבנית חותכת ל-16:9 או לריבוע, תמונה של 1200 × 630 עלולה לאבד חלק מהקצוות הימני והשמאלי שלה. מצאו את הגודל של התבנית שלכם (ארבע דרכים בהמשך), ואז העלו תמונה גדולה לפחות כמוהו, או ברוחב כפול בערך לתוצאה חדה במסכים בצפיפות גבוהה.

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

איזה גודל להעלות, לפי המקום שבו התמונה מופיעה

איפה התמונה מופיעה	גודל להעלאה	הערות
הפוסטים שלכם, גודל התבנית עדיין לא ידוע	1200 × 630, או 2400 × 1260 לתוצאה חדה יותר	מתאים גם לתצוגה מקדימה של קישורים עד שתמצאו את גודל התבנית
הפוסטים שלכם, גודל התבנית ידוע	בערך פי שניים מרוחב התמונה הראשית בתבנית, באותו יחס ממדים	וורדפרס יוצר מההעלאה עותקים קטנים יותר, אף פעם לא גדולים יותר
תצוגה מקדימה של קישורים בפייסבוק	לפחות 1200 × 630 (בערך 1.91:1); גם 1200 × 628 הוא כמעט אותה צורה	מתוך הנחיות השיתוף של פייסבוק
Google Discover	רוחב של 1200 פיקסלים לפחות, 16:9 (למשל 1200 × 675)	מתוך ההנחיות של Google ל-Discover

גדלי התמונות של וורדפרס במבט אחד

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

שם הגודל	ממדי ברירת מחדל	אפשר לשנות בהגדרות > מדיה?	הערות
thumbnail	150 × 150, חתוך	כן	יש תיבת סימון לחיתוך לממדים מדויקים
medium	300 × 300 מקסימום	כן	מוקטן באופן יחסי
medium_large	רוחב 768, בלי הגבלת גובה	לא	משמש בעיקר ב-srcset
large	1024 × 1024 מקסימום	כן	מוקטן באופן יחסי
1536x1536	1536 × 1536 מקסימום	לא	נוסף בוורדפרס 5.3 למסכים בצפיפות גבוהה
2048x2048	2048 × 2048 מקסימום	לא	נוסף בוורדפרס 5.3 למסכים בצפיפות גבוהה
post-thumbnail	נקבע על ידי התבנית	לא	קיים רק אם התבנית קוראת ל-set_post_thumbnail_size()
full	הקובץ המקורי שהעליתם	לא	העלאות גדולות מאוד מוקטנות קודם (ראו בהמשך)

“מקסימום” אומר שוורדפרס מכניס את התמונה לתוך התיבה הזו ושומר על הפרופורציות שלה. תמונה של 2000 × 1000 הופכת ל-1024 × 512 בגודל large, ולא ל-1024 × 1024.

תבניות ותוספים מוסיפים לעיתים קרובות גדלים נוספים עם add_image_size(). WooCommerce, למשל, מוסיף גדלים משלו למוצרים, ועליהם מסביר המדריך שלנו לגודל תמונות מוצר ב-WooCommerce.

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

מאיפה באמת מגיע גודל התמונה הראשית

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

תבניות קלאסיות

תבנית קלאסית מפעילה תמונות ראשיות ורושמת את הגודל בקובץ functions.php שלה:

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 1200, 675, true );

set_post_thumbnail_size() רושמת גודל בשם post-thumbnail. הארגומנט השלישי שולט בחיתוך. עם false (ברירת המחדל), וורדפרס מקטין את התמונה כך שתיכנס לתוך 1200 × 675. עם true, הוא חותך את התמונה בדיוק ל-1200 × 675 מהמרכז, כך שכל מה שמחוץ למסגרת 16:9 הולך לאיבוד. אפשר גם להעביר מערך כמו array( 'center', 'top' ) כדי לבחור איזה חלק יישמר.

תבניות רבות רושמות גדלים נוספים עם שם לתבניות עמוד שונות:

add_image_size( 'hero-wide', 1600, 900, true );
add_image_size( 'card', 600, 400, true );

ואז תבנית העמוד בוחרת אחד מהם לפי השם:

if ( has_post_thumbnail() ) {
	the_post_thumbnail( 'hero-wide' );
}

כשקוראים ל-the_post_thumbnail() בלי שם, היא משתמשת ב-post-thumbnail. לכן גודל התמונה הראשית האמיתי בתבנית קלאסית הוא הגודל ששמו מופיע בתבנית העמוד, וארכיון הבלוג יכול להשתמש בגודל שונה מתצוגת הפוסט הבודד.

תבניות בלוקים

תבניות בלוקים, כולל התבניות החינמיות באתר הזה, מציגות את התמונה הראשית עם בלוק התמונה הראשית. מדריך בלוקי הליבה מפרט את ההגדרות שלו, כולל sizeSlug (איזה גודל רשום לטעון), aspectRatio, width, height ו-scale.

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

איך מוצאים את גודל התמונה הראשית של התבנית שלכם

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

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

2. הציגו את הגדלים הרשומים עם WP-CLI. אם יש לכם גישה לשורת הפקודה, wp media image-size מדפיס כל גודל רשום עם הרוחב, הגובה, הגדרת החיתוך והיחס שלו:

   wp media image-size

3. חפשו בקבצי התבנית. בתבנית קלאסית, חפשו ב-functions.php (ובקבצים שהוא כולל) את set_post_thumbnail_size ואת add_image_size, ואז חפשו ב-single.php או בחלקי התבנית את השם שמועבר ל-the_post_thumbnail(). בתבנית בלוקים, בדקו את בלוק התמונה הראשית בעורך האתר כמו שתואר למעלה.

4. בדקו פוסט חי. לחצו קליק ימני על התמונה הראשית, בחרו Inspect וקראו את שם הקובץ ב-src. וורדפרס מוסיף את הממדים לעותקים המוקטנים, כך ש-my-photo-1200x675.jpg אומר שהתבנית טענה עותק של 1200 × 675. הסתכלו גם על srcset, כי הדפדפן עשוי לבחור עותק קטן יותר במסכים צרים. אם אין ממדים בשם, נעשה שימוש בקובץ בגודל המלא.

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

בחירת גודל ההעלאה

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

• רוחב. העלו לפחות את הרוחב שהתבנית מציגה. לתוצאה חדה במסכי טלפון ומחשב נייד בצפיפות גבוהה, כוונו לבערך פי שניים מהרוחב הזה. למשבצת ברוחב 1200px, זה אומר 2400px. וורדפרס יוצר מההעלאה שלכם עותקים קטנים יותר ולעולם לא גדולים יותר, ולכן קובץ מקור קטן מדי הוא הסיבה הנפוצה ביותר לתמונה מטושטשת אחרי העלאה.
• יחס ממדים. התאימו את היחס לחיתוך של התבנית. אם היא חותכת ל-16:9, תנו לה 16:9 ושמרו את הנושא קרוב למרכז, כדי שחיתוך קשיח לא יחתוך ראשים או טקסט.
• גודל קובץ. תמונה של 2400px שנשמרת כ-JPEG באיכות סבירה שוקלת בדרך כלל כמה מאות קילובייט. העלאה של קובץ מצלמה ברוחב 6000px רק מוסיפה עבודה: וורדפרס מקטין ממילא כל מה שמעל 2560px, והפיקסלים העודפים לא מגיעים אף פעם למבקרים.
• פורמט קובץ. וורדפרס מקבל העלאות WebP מאז גרסה 5.8 ו-AVIF מאז גרסה 6.5, בתנאי שספריית עיבוד התמונות בשרת שלכם תומכת בהם. שני הפורמטים נותנים בדרך כלל קובץ קטן יותר מ-JPEG באיכות דומה.

תמונת השיתוף ברשתות החברתיות היא עניין נפרד

כשמישהו משתף את הפוסט שלכם בפייסבוק, בלינקדאין או ברשתות אחרות, התצוגה המקדימה מגיעה מהתגית og:image, שתוספי SEO ממלאים בדרך כלל מהתמונה הראשית. תיעוד השיתוף של פייסבוק ממליץ על תמונות של לפחות 1200 × 630 פיקסלים, קרוב ככל האפשר ליחס 1.91:1.

תראו גם המלצה על 1200 × 628. הגודל הזה הוא כמעט בדיוק 1.91:1, בעוד ש-1200 × 630 יוצא בערך 1.90:1. ההפרש ביניהם הוא רק 2 פיקסלים בגובה, כך ששניהם מתאימים.

אם גם גודל התצוגה של התבנית שלכם קרוב ל-1.91:1, העלאה אחת של 1200 × 630 (או 2400 × 1260) מתאימה לשניהם. אם התבנית חותכת ל-16:9 או לריבוע, הרחיקו תוכן חשוב מהקצוות הימני והשמאלי, או הגדירו תמונת שיתוף נפרדת בתוסף ה-SEO שלכם.

ל-Google Discover יש המלצות משלו לתמונות. ההנחיות של Google ל-Discover ממליצות על תמונות ברוחב של 1200 פיקסלים לפחות, עם יותר מ-300,000 פיקסלים בסך הכול, ביחס של 16:9, למשל 1200 × 675. תמונות גדולות צריכות גם את הגדרת הרובוטים max-image-preview:large, שוורדפרס מוסיף כברירת מחדל מאז גרסה 5.7, אלא אם האתר מוגדר לבקש ממנועי חיפוש לא לאנדקס אותו.

איך משנים את גודל התמונה הראשית

איפה עושים את השינוי תלוי בגודל ובתבנית שלכם.

גדלי ליבה (thumbnail, medium, large). היכנסו להגדרות > מדיה ושנו את הרוחב והגובה. התיעוד של מסך הגדרות המדיה מתאר את השדות, כולל תיבת הסימון של החיתוך לתמונות ממוזערות.

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

add_action( 'after_setup_theme', function () {
	set_post_thumbnail_size( 1600, 900, true );
	add_image_size( 'hero-wide', 1600, 900, true );
}, 11 );

העדיפות 11 גורמת לקוד הזה לרוץ אחרי תבנית אב שמחוברת בעדיפות ברירת המחדל 10. בדקו את הקוד של תבנית האב ושנו את הערך אם היא משתמשת בעדיפות מאוחרת יותר.

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

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

יצירה מחדש של תמונות ממוזערות קיימות

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

wp media regenerate --yes

אפשרויות שימושיות מתוך התיעוד של WP-CLI:

• --image_size=hero-wide בונה מחדש רק את הגודל הזה. חזרו על הדגל בשביל כמה גדלים.
• --only-missing יוצר גדלים שעדיין לא קיימים ולא נוגע בקבצים קיימים, וזה מהיר יותר אחרי הוספת גודל חדש.
• --skip-delete שומר את קבצי התמונות הממוזערות הישנים. השתמשו בו אם אתרים אחרים, ניוזלטרים או פידים מקשרים ישירות לקבצים האלה.

בלי גישה לשורת הפקודה, התוסף Regenerate Thumbnails ממאגר התוספים של WordPress.org עושה את אותו הדבר מלוח הבקרה. בספרייה גדולה, גבו קודם, כי היצירה מחדש כותבת מחדש הרבה קבצים.

טעויות נפוצות

• לעצור ב-1200 × 630. זו נקודת התחלה טובה והיא מתאימה לתצוגה מקדימה של קישורים, אבל אם התבנית שלכם חותכת ל-16:9 או לריבוע, חלק מהתמונה נחתך. בדקו את הגודל של התבנית לפני שאתם מעלים קבוצה של תמונות.
• לכבות את הגדלים שנוצרים אוטומטית כדי “לשמור על המקור”. אם אין לתבנית עותקים קטנים יותר, היא עלולה לטעון את הקובץ המלא בכל מסך, וזה מאט את העמוד בטלפונים. העותקים המוקטנים קיימים בדיוק כדי למנוע את זה.
• לערוך את הקוד של גדלי התמונות ולדלג על היצירה מחדש. הקוד עובד, אבל רק להעלאות חדשות. זו הסיבה שאנשים רבים מחליטים ששינוי הגודל “לא עשה כלום”.
• לשנות את הגודל בתבנית האב. העדכון הבא של התבנית מוחק אותו. השתמשו בתבנית בת או בעורך האתר.

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