מחוללי אתרים, מסגרות ומערכות ניהול תוכן

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

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

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

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

מחוללי אתרים סטטיים

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

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

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

const Image = require("@11ty/eleventy-img");
module.exports = function(eleventyConfig) {

async function imageShortcode(src, alt, sizes="100vw") {
  let metadata = await Image(src, {
  formats: ["avif", "webp", "jpeg"],
  widths: [1000, 800, 400],
  outputDir: "_dist/img/",
  filenameFormat: function( id, src, width, format, options ) {
      const ext = path.extname( src ),
        name = path.basename( src, ext );

      return `${name}-${width}.${format}`
  }
  });

  let imageAttributes = {
  alt,
  sizes,
  loading: "lazy"
  };

  return Image.generateHTML(metadata, imageAttributes);
}

eleventyConfig.addAsyncShortcode("respimg", imageShortcode);
};

לאחר מכן אפשר להשתמש בקוד המקוצר הזה במקום בתחביר ברירת המחדל של התמונות:

{‌% respimg "img/butterfly.jpg", "Alt attribute.", "(min-width: 30em) 800px, 80vw" %}

אם הוגדר כפלט במספר קידודים, כמתואר למעלה, תגי העיצוב שייווצרו יהיה רכיב <picture> שמכיל את רכיבי <source>, מאפייני type ומאפייני srcset מתאימים, שכבר מאוכלסים במלואם ברשימה של גדלים אפשריים שנוצרו.

<picture><source type="image/avif" srcset="/img/butterfly-400.avif 400w, /img/butterfly-800.avif 800w, /img/butterfly-1000.avif 1000w" sizes="(min-width: 30em) 800px, 80vw"><source type="image/webp" srcset="/img/butterfly-400.webp 400w, /img/butterfly-800.webp 800w, /img/butterfly-1000.webp 1000w" sizes="(min-width: 30em) 800px, 80vw"><source type="image/jpeg" srcset="/img/butterfly-400.jpeg 400w, /img/butterfly-800.jpeg 800w, /img/butterfly-1000.jpeg 1000w" sizes="(min-width: 30em) 800px, 80vw"><img alt="Alt attribute." loading="lazy" src="/img/butterfly-400.jpeg" width="1000" height="846"></picture>

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

מסגרות

כדי להשתמש ב-frameworks לעיבוד בצד הלקוח, דרוש מפעיל משימות או מקבץ משימות כמו Webpack כדי לערוך, לקודד ולדחוס בעצמם נכסי תמונות. לדוגמה, כלי הטעינה הרספונסיבי משתמש גם בספריית Sharp כדי לשמור מחדש נכסי תמונות. לאחר מכן אפשר importלשנות את התמונות כאובייקטים:

  import imageAVIF from 'img/butterfly.jpg?sizes[]=400,sizes[]=800,sizes[]=1000&format=avif';
  import imageWebP from 'img/butterfly.jpg?sizes[]=400,sizes[]=800,sizes[]=1000&format=webp';
  import imageDefault from 'img/butterfly.jpg?sizes[]=400,sizes[]=800,sizes[]=1000';

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

<picture>
  <source type='image/avif' srcSet={imageAVIF.srcSet} sizes='…' />
  <source type='image/webp' srcSet={imageWebp.srcSet} sizes='…' />
  <img
    src={imageDefault.src}
    srcSet={imageDefault.srcSet}
    width={imageDefault.width}
    height={imageDefault.height}
    sizes='…'
    loading="lazy"
  />

מסגרת שמשתמשת ברינדור בצד הלקוח היא אפשרות טובה לשימוש ב-azysizes וב-sizes="auto", ומספקת תמונות רספונסיביות כמעט מלאות באופן אוטומטי.

מערכות ניהול תוכן

WordPress היה אחד הראשונים שהשתמשו בתגי עיצוב מקוריים של תמונות רספונסיביות, וה-API השתפר בהדרגה מאז השקתו ב-WordPress 4.4, עם תמיכה ב-WebP ושליטה בסוג הפלט mime. הליבה של WordPress נועדה לעשות שימוש בתוסף ImageMagick PHP (או, אלא אם כן, ספריית GD).

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

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

לדוגמה, כדי להגדיר את איכות ברירת המחדל לדחיסה של 70 בכל התמונות שנוצרות, צריך להשתמש בהגדרות הבאות:

add_filter( 'wp_editor_set_quality', function() { return 70; } );

כדי לשפר את הדחיסה, אפשר לשנות את פורמט הפלט של תמונות JPEG שהועלו לפורמט WebP באמצעות ההגדרות הבאות:

add_filter( 'image_editor_output_format', function( $mappings ) {
  $mappings[ 'image/jpeg' ] = 'image/webp';
    return $mappings;
} );

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

כפי שוודאי כבר ניחשת, העבודה עם המאפיין sizes קצת יותר מורכבת. אם אין מידע על אופן השימוש בתמונות בפריסה, ברירת המחדל של WordPress מוגדרת כרגע בערך sizes, שכתוב בה למעשה: "התמונה הזו צריכה לתפוס 100% מאזור התצוגה הזמין, עד לגודל הפנימי של המקור הגדול ביותר" – ברירת מחדל ניתנת לחיזוי, אבל לא נכונה לאף אפליקציה בעולם האמיתי. הקפידו להשתמש ב-wp_calculate_image_sizes() כדי להגדיר בתבניות מאפייני sizes שמתאימים להקשר.

כמובן שיש אינספור יישומי פלאגין של WordPress שמטרתם להפוך תהליכי עבודה מודרניים של תמונות למהירים יותר עבור צוותי הפיתוח והמשתמשים. והחלק המלהיב ביותר הוא שיישומי פלאגין כמו Jetpack's Site Accelerator (לשעבר Photon) יכולים לנהל משא ומתן לגבי קידודים בצד השרת, וכך להבטיח שהמשתמשים יקבלו את הקידוד הקטן והיעיל ביותר שהדפדפן שלהם יכול לתמוך בו ללא צורך בתבנית סימון <picture> ו-type. השירות עושה זאת באמצעות רשת להעברת תוכן של תמונות – טכנולוגיה שתוכלו להשתמש בה בעצמכם, ללא קשר למערכת ניהול התוכן.

כל זה נכון גם לגבי פתרונות מתארחים של מערכות ניהול תוכן כמו Shopify, אם כי המנגנונים עצמם שונים מעט: הצעת הוקים (hooks) דומים ליצירת מקורות תמונות חלופיים ומאפייני srcset מתאימים והנחיות אומנות באמצעות האלמנט <picture>.