תמונות רטינה ויצירתן באתרי וורדפרס

מהן תמונות רטינה וכיצד נגרום לאתר וורדפרס לתמוך בתמונות אלו?

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

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

מספר מילים על תמונות רטינה

לפני שנסביר כיצד להטמיע תמונות רטינה באתרי וורדפרס אתן מספר אנקדוטות:

  • בתמונה בעלת רזולוציה 400x400=16,000 קיימים פי 4 פיקסלים לעומת תמונה ברזולוציה 200x200=4,000 מכיוון ומספר הפיקסלים הוא פי 2 גם אנכית וגם אופקית.
  • ההסבר הפשוט לשילוב תמונות רטינה באתר הוא להעלות תמונה בגודל 400x400 לשטח בגודל 200x200.
  • בכדי לעשות זאת העלו תמונה בגודל 400x400 והגדירו את גודל התמונה בתגית HTML כ 200x200 פיקסלים.

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

לדוגמא, נניח וברשותכם תמונה בשם jerusalem.png והיא בגודל של 100x100, אתם צריכים תמונה נוספת בגודל 200x200 ושמה יהיה jerusalem@2x.png. . לאחר מכן אתם כל מה שנדרש הוא מעט Javascript (או פתרון אחר) על מנת להציג את התמונה המתאימה בהתאם לסוג המסך בו הגולש משתמש.

הסיומת @2x אינה מחייבת אך מומלצת על ידי אפל וכסטנדרט אצל מפתחי אתרים.

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

אל תתנו לאינפורמציה מעלה למנוע מכם מלספק את האפשרות לתמונות רטינה באתרי הוורדפרס של לקוחותכם. זה הרבה יותר פשוט משנדמה לכם, במיוחד בעזרת תוסף בשם WP Retina 2x אשר מספק לכם את כל מה שאתם צריכים ואגב, נמצא בשימוש בכל אתר שאני מפתח. הנה מספר פעולות שתוסף זה מאפשר / מבצע בשבילכם:

  • מייצר אוטומטית את קובץ הרטינה בעל הסיומת @2x לכל תמונה שתעלו לספריית המדיה או לתמונות הקיימות כבר בספרייה.
  • מציג את התמונה ברזולוציה הכפולה רק במסכים בעלי צפיפות פיקסלים גבוה (מסכי רטינה).
  • מאפשר לכם לעבוד במצב Debug המציג תמיד את תמונות הרטינה לשם בדיקה.
  • עובד נפלא עם התוספים Media File Renamer ו Enable Media Replace המאפשרים לכם לשנות שמות של קבצי תמונות או להחליף תמונות קיימות בצורה מאד פשוטה באתר הוורדפרס שלכם.
על הדרך, הצטרפו לרשימת התפוצה !

שימוש בתוסף WP-Retina 2x

התקינו את התוסף וגשו להגדרותיו הבסיסיות תחת Meow Apps > Retina. תנו מבט תחת Basic Settings ותוכלו לראות את גדלי התמונות המוגדרות באתר שלכם. גדלים אלו יכולים להקבע על ידי התבנית, על ידי תוספים וכמובן שאתם יכולים להוסיף גדלים משלכם (על כך בהמשך).

ביטול גדלי תמונות WP-Retina 2x

בחלק זה ניתן לקבוע לאיזה גדלים לא יווצר קובץ רטינה

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

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

לצורך הדוגמא, אעלה לספריית המידה את התמונות הבאות jerusalem-images. ישנן שתי תמונות בקובץ זה, jerusalem.jpg בגודל 1600x800 ו jerusalem-small.jpg בגודל 600x300 פיקסלים. הנה צילום מסך המציג כיצד נראות תמונות אלו לאחר שהעלתי אותן לספריית המדיה ובהנחה והתוסף WP-Retina 2x פעיל:

ספריית מדיה WP-Retina 2x

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

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

במקרה הנ״ל, מכיוון וגודל התמונה jerusalem-small.jpg אינו גדול מספיק ליצירת קובץ הרטינה לגודל large, הוא מופיע לנו בצבע אדום כאינדיקציה לתקלה.

לאחר שנוצרו התמונות באפשרותכם ללחוץ על כפתור Details בכדי לראות פרטים על התמונות שנוצרו. שימו לב כי שם הקובץ של תמונת הרטינה נשאר זהה פרט לכך שנוספה לו הסיומת @2x:

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

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

שילוב בין Advanced Custom Fields ל WP-Retina 2x

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

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

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

לאחר מכן, אצור שדה מותאם ב ACF מסוג ״תמונה״ ואבחר כי הערך שיחזור (Return Value) יהיה Image Array כבתמונה מטה:

שדה תמונה מותאם ACF

אגש לקובץ functions.php בתבנית הבת ואצור גודל תמונה חדש בעזרת הפונקציה add_image_size(). הערך הראשון שהפונקציה מקבלת הוא רוחב התמונה (בפיקסלים), השני הוא גובה התמונה והשלישי הוא אפשרות לחיתוך התמונה (crop).

עוד מידע על פונקציה זו תמצאו ב WordPress Codex.

/*
Register a new image size.
*/

add_image_size('new-image', 220, 400, false );

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

<?php
$size = 'new-image';
$image = get_field('image');

if( !empty($image) ):
	$alt = $image['alt'];
	$thumb = $image['sizes'][ $size ];
	$width = $image['sizes'][ $size . '-width' ];
	$height = $image['sizes'][ $size . '-height' ];
	?>
    <img src="<?php echo $thumb ?>" alt="<?php echo $alt ?>" width="<?php echo $width; ?>" height="<?php echo $height; ?>" />
<?php endif; ?>

שימו לב כי בשורה 4 אני מכניסים למשתנה את השם של גודל התמונה החדשה שייצרנו בעזרת הפונקציה add_image_size() ובשורה 5 אנו מכניסים את שם השדה המותאם שייצרנו בעזרת ACF.

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

Retina HTML Tag

מסקנה

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

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

רועי יוסף

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

תגובות פייסבוק

{ 2 תגובות… הוסף אחת }
  • אופיר 26 במרץ 2017, 20:29

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

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

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

    • רועי יוסף 26 במרץ 2017, 22:23

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

השאירו תגובה

שיתופים
קראו גם את:
אופטימיזציה לקונפיגורציה של וורדפרס באמצעות wp-config.php
אופטימיזציה לקונפיגורציה של וורדפרס באמצעות wp-config.php

משתמשי וורדפרס מכירים את הקובץ wp-config.php כאחד שמחזיק את הגדרות מסד הנתונים של וורדפרס. בקובץ...