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

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

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

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

למרבה המזל, אפשר להשתמש בספריות עיבוד התמונות שהבנתם מתהליכי הפיתוח המקומיים בכל מספר של הקשרים. למרות שאף פעם לא יכולה להיות גישה אחת שמתאימה לכולם לתגי העיצוב של התמונות הרספונסיביות, המערכות האלה מספקות ברירות מחדל, אפשרויות הגדרה והוקים ל-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>

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

מסגרות

כדי לערוך, לקודד ולדחוס נכסי תמונות, צריך להשתמש ב-frameworks של רינדור בצד הלקוח או ב-bundler, כמו 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"
  />

מסגרת שמבצעת רינדור בצד הלקוח היא מועמדת חזקה לשימוש ב-Lazysizes וב-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; } );

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

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