فشرده سازی و رمزگذاری خودکار

تولید منابع تصویری با کارایی بالا را به بخشی یکپارچه از فرآیند توسعه خود تبدیل کنید.

تمام دستورات این دوره - از رمزگذاری داده های تصویر گرفته تا نشانه گذاری با متراکم اطلاعات که تصاویر پاسخگو را تقویت می کند - روش هایی برای ارتباط ماشین ها با ماشین ها هستند. شما چندین راه برای یک مرورگر مشتری برای برقراری ارتباط نیازهای خود به یک سرور و یک سرور برای پاسخگویی مشابه پیدا کرده اید. نشانه گذاری تصویر پاسخگو (به ویژه srcset و sizes ) قادر است مقدار تکان دهنده ای از اطلاعات را با کاراکترهای نسبتا کمی توصیف کند. خوب یا بد، این اختصار به دلیل طراحی است: کم‌تر بودن این نحو‌ها و تجزیه آسان‌تر برای توسعه‌دهندگان، می‌تواند تجزیه آنها را برای مرورگر دشوارتر کند. هرچه پیچیدگی بیشتری به یک رشته اضافه شود، پتانسیل بیشتری برای خطاهای تجزیه کننده یا تفاوت های ناخواسته در رفتار از یک مرورگر به مرورگر دیگر وجود دارد.

با این حال، همان خصیصه‌ای که می‌تواند به این موضوعات احساس ترسناکی بدهد، می‌تواند راه‌حل‌هایی را نیز در اختیار شما قرار دهد: نحوی که به راحتی توسط ماشین‌ها خوانده می‌شود ، نحوی است که توسط آنها راحت‌تر نوشته می‌شود . تقریباً به طور قطع با نمونه‌های زیادی از رمزگذاری و فشرده‌سازی خودکار تصویر به عنوان کاربر وب مواجه شده‌اید: هر تصویری که از طریق پلتفرم‌های رسانه‌های اجتماعی، سیستم‌های مدیریت محتوا (CMS) در وب آپلود شده باشد، و حتی مشتریان ایمیل تقریباً همیشه از یک سیستم عبور می‌کنند. که آنها را تغییر اندازه، رمزگذاری مجدد و فشرده می کند.

به همین ترتیب، چه از طریق پلاگین ها، کتابخانه های خارجی، ابزارهای فرآیند ساخت مستقل، یا استفاده مسئولانه از اسکریپت سمت مشتری، نشانه گذاری تصویر پاسخگو به راحتی خود را به اتوماسیون می دهد.

اینها دو نگرانی اصلی در مورد خودکارسازی عملکرد تصویر هستند: مدیریت ایجاد تصاویر - رمزگذاری آنها، فشرده سازی و منابع جایگزینی که برای پر کردن ویژگی srcset استفاده می کنید - و ایجاد نشانه گذاری روی کاربر. در این ماژول، شما در مورد چند رویکرد متداول برای مدیریت تصاویر به عنوان بخشی از یک گردش کار مدرن، چه به عنوان یک مرحله خودکار در فرآیند توسعه خود، چه از طریق چارچوب یا سیستم مدیریت محتوا که سایت شما را قدرتمند می کند، یا تقریباً به طور کامل انتزاعی شده، یاد خواهید گرفت. توسط یک شبکه اختصاصی تحویل محتوا.

فشرده سازی و رمزگذاری خودکار

بعید است در موقعیتی قرار بگیرید که بتوانید به صورت دستی برای تعیین رمزگذاری ایده‌آل و سطح فشرده‌سازی برای هر تصویری که برای استفاده در یک پروژه قرار داده شده است، وقت بگذارید و نمی‌خواهید. به همان اندازه مهم است که اندازه های انتقال تصویر خود را تا حد امکان کوچک نگه دارید ، تنظیم دقیق تنظیمات فشرده سازی و ذخیره مجدد منابع جایگزین برای هر دارایی تصویری که برای یک وب سایت تولیدی ارسال می شود، یک گلوگاه بزرگ در کار روزانه شما ایجاد می کند.

همانطور که هنگام مطالعه در مورد فرمت های مختلف تصویر و انواع فشرده سازی یاد گرفتید، کارآمدترین رمزگذاری برای یک تصویر همیشه به محتوای آن دیکته می شود، و همانطور که در Responsive Images آموختید، اندازه های جایگزینی که برای منابع تصویر خود نیاز دارید، خواهد بود. دیکته شده توسط موقعیتی که آن تصاویر در طرح بندی صفحه اشغال می کنند. در یک گردش کار مدرن، شما به این تصمیم‌ها به‌جای فردی نگاه می‌کنید که مجموعه‌ای از پیش‌فرض‌های معقول را برای عکس‌ها تعیین می‌کنند تا به بهترین وجه با زمینه‌هایی که قرار است در آن‌ها مورد استفاده قرار گیرند، مطابقت داشته باشند.

هنگام انتخاب رمزگذاری برای فهرست تصاویر عکاسی، AVIF برنده واضح کیفیت و اندازه انتقال است، اما پشتیبانی محدودی دارد، WebP بهینه‌سازی و مدرن‌ترین پیش‌فرض را ارائه می‌دهد و JPEG قابل اطمینان‌ترین پیش‌فرض است. اندازه‌های جایگزینی که برای تصاویری که قرار است یک نوار کناری در طرح‌بندی صفحه را اشغال کنند، تولید کنیم، با تصاویری که کل نمای مرورگر را در بالاترین نقطه‌های شکست ما اشغال می‌کنند، بسیار متفاوت است. تنظیمات فشرده‌سازی نیازمند توجه به محو کردن و فشرده‌سازی مصنوعات در چندین فایل به‌دست‌آمده است که فضای کمتری برای حک کردن هر بایت ممکن از هر تصویر در ازای یک گردش کاری انعطاف‌پذیرتر و قابل اعتمادتر باقی می‌گذارد. در مجموع، شما همان فرآیند تصمیم گیری را که از این دوره فهمیده اید، دنبال می کنید.

در مورد خود پردازش، تعداد زیادی کتابخانه پردازش تصویر منبع باز وجود دارد که روش‌های تبدیل، اصلاح و ویرایش تصاویر را به صورت دسته‌ای ارائه می‌کنند و در سرعت، کارایی و قابلیت اطمینان رقابت می‌کنند. این کتابخانه‌های پردازشی به شما این امکان را می‌دهند که بدون نیاز به باز کردن نرم‌افزار ویرایش تصویر، تنظیمات رمزگذاری و فشرده‌سازی را به‌طور هم‌زمان بر روی فهرست‌های کامل تصاویر اعمال کنید، و به گونه‌ای که منابع تصویر اصلی شما را در صورتی که تنظیمات نیاز به تنظیم روی صفحه داشته باشند، حفظ کنند. پرواز. در نظر گرفته شده است که در طیف وسیعی از زمینه ها اجرا شوند، از محیط توسعه محلی شما گرفته تا خود سرور وب - به عنوان مثال، ImageMin متمرکز بر فشرده سازی برای Node.js را می توان از طریق آرایه ای از پلاگین ها برای مطابقت با برنامه های کاربردی خاص گسترش داد، در حالی که ImageMagick کراس پلتفرم و شارپ مبتنی بر Node.js دارای تعداد خیره کننده ای از ویژگی ها هستند.

این کتابخانه‌های پردازش تصویر این امکان را برای توسعه‌دهندگان فراهم می‌آورد که ابزارهایی را برای بهینه‌سازی یکپارچه تصاویر به عنوان بخشی از فرآیندهای توسعه استاندارد شما بسازند و اطمینان حاصل کنند که پروژه شما همیشه منابع تصویر آماده تولید را با کمترین هزینه ممکن ارجاع می‌دهد.

ابزارها و گردش کار توسعه محلی

Task-runner ها و باندلرهایی مانند Grunt، Gulp یا Webpack می توانند برای بهینه سازی دارایی های تصویر در کنار سایر وظایف رایج مرتبط با عملکرد، مانند کوچک سازی CSS و JavaScript استفاده شوند. برای نشان دادن، اجازه دهید یک مورد استفاده نسبتاً ساده را در نظر بگیریم: یک دایرکتوری در پروژه شما حاوی ده ها تصویر عکاسی است که برای استفاده در یک وب سایت عمومی قرار دارند.

ابتدا، باید از رمزگذاری سازگار و کارآمد برای این تصاویر اطمینان حاصل کنید. همانطور که در ماژول های قبلی یاد گرفتید، WebP یک پیش فرض کارآمد برای تصاویر عکاسی از نظر کیفیت و اندازه فایل است. WebP به خوبی پشتیبانی می شود، اما به طور جهانی پشتیبانی نمی شود، بنابراین شما همچنین می خواهید یک نسخه بازگشتی را به شکل یک JPEG مترقی اضافه کنید. سپس، برای استفاده از ویژگی srcset برای تحویل کارآمد این دارایی ها، باید چندین اندازه جایگزین برای هر کدگذاری تولید کنید.

در حالی که اگر این کار با نرم‌افزار ویرایش تصویر انجام شود، کاری تکراری و وقت‌گیر خواهد بود، برنامه‌هایی مانند Gulp طوری طراحی شده‌اند که دقیقاً این نوع تکرار را خودکار کنند. افزونه gulp-responsive ، که از Sharp استفاده می کند، یکی از گزینه های بسیاری است که همه از یک الگوی مشابه پیروی می کنند: جمع آوری تمام فایل ها در یک فهرست منبع، کدگذاری مجدد آنها، و فشرده سازی آنها بر اساس همان مختصر "کیفیت" استاندارد شده. شما در مورد فرمت های تصویر و فشرده سازی یاد گرفتید. سپس فایل‌های به‌دست‌آمده به مسیری که شما تعریف کرده‌اید، خروجی می‌شوند و آماده ارجاع به ویژگی‌های src عناصر img رو به روی کاربر شما هستند و در عین حال فایل‌های اصلی شما دست نخورده باقی می‌مانند.

const { src, dest } = require('gulp');
const respimg = require('gulp-responsive');

exports.webp = function() {
  return src('./src-img/*')
    .pipe(respimg({
      '*': [{
        quality: 70,
        format: ['webp', 'jpeg'],
        progressive: true
      }]
  }))
  .pipe(dest('./img/'));
}

با اجرای چنین فرآیندی، اگر شخصی در پروژه به طور ناخواسته یک عکس کدگذاری شده به عنوان یک PNG واقعی واقعی را به دایرکتوری حاوی منابع تصویر اصلی شما اضافه کند، هیچ آسیبی به محیط تولید وارد نخواهد شد - صرف نظر از رمزگذاری تصویر اصلی، این کار یک WebP کارآمد و بازگشتی JPEG پیشرونده قابل اعتماد و در سطح فشرده سازی که می تواند به راحتی در حین پرواز تنظیم شود تولید می کند. البته، این فرآیند همچنین تضمین می‌کند که فایل‌های تصویر اصلی شما در محیط توسعه پروژه حفظ می‌شوند، به این معنی که این تنظیمات را می‌توان در هر زمان با بازنویسی خروجی خودکار تنظیم کرد.

برای خروجی چند فایل، چندین شیء پیکربندی را ارسال می‌کنید—همه یکسان، جدا از افزودن یک کلید width و یک مقدار به پیکسل:

const { src, dest } = require('gulp');
const respimg = require('gulp-responsive');

exports.default = function() {
  return src('./src-img/*')
    .pipe(respimg({
    '*': [{
            width: 1000,
            format: ['jpeg', 'webp'],
            progressive: true,
            rename: { suffix: '-1000' }
            },
            {
            width: 800,
            format: ['jpeg', 'webp'],
            progressive: true,
            rename: { suffix: '-800' }
            },
            {
            width: 400,
            format: ['jpeg', 'webp'],
            progressive: true,
            rename: { suffix: '-400' },
        }]
        })
    )
    .pipe(dest('./img/'));
}

در مورد مثال بالا، تصویر اصلی (monarch.png) بیش از 3.3 مگابایت بود. بزرگترین فایل تولید شده توسط این کار (monarch-1000.jpeg) تقریباً 150 کیلوبایت است. کوچکترین، monarch-400.web، تنها 32 کیلوبایت است.

[10:30:54] Starting 'default'...
[10:30:54] gulp-responsive: monarch.png -> monarch-400.jpeg
[10:30:54] gulp-responsive: monarch.png -> monarch-800.jpeg
[10:30:54] gulp-responsive: monarch.png -> monarch-1000.jpeg
[10:30:54] gulp-responsive: monarch.png -> monarch-400.webp
[10:30:54] gulp-responsive: monarch.png -> monarch-800.webp
[10:30:54] gulp-responsive: monarch.png -> monarch-1000.webp
[10:30:54] gulp-responsive: Created 6 images (matched 1 of 1 image)
[10:30:54] Finished 'default' after 374 ms

البته، شما باید نتایج را به دقت بررسی کنید تا مصنوعات فشرده سازی قابل مشاهده باشند، یا احتمالاً برای صرفه جویی بیشتر، فشرده سازی را افزایش دهید. از آنجایی که این کار غیر مخرب است، این تنظیمات را می توان به راحتی تغییر داد.

در مجموع، در ازای چند کیلوبایتی که می‌توانید با میکرو بهینه‌سازی دقیق دستی از بین ببرید، فرآیندی به دست می‌آورید که نه تنها کارآمد، بلکه انعطاف‌پذیر است - ابزاری که دانش شما را در مورد دارایی‌های تصویر با کارایی بالا به طور یکپارچه در کل پروژه به کار می‌برد. ، بدون هیچ گونه مداخله دستی

نشانه گذاری تصویر پاسخگو در عمل

پر کردن ویژگی‌های srcset معمولاً یک فرآیند دستی ساده خواهد بود، زیرا این ویژگی واقعاً فقط اطلاعات مربوط به پیکربندی را که قبلاً هنگام تولید منابع خود انجام داده‌اید جمع‌آوری می‌کند. در وظایف بالا، نام فایل ها و اطلاعات عرض را تعیین کرده ایم که ویژگی ما از آنها پیروی می کند:

srcset="filename-1000.jpg 1000w, filename-800.jpg 800w, filename-400.jpg 400w"

به یاد داشته باشید که محتویات ویژگی srcset توصیفی است، نه تجویزی. بارگذاری بیش از حد ویژگی srcset هیچ ضرری ندارد، تا زمانی که نسبت ابعاد هر منبع ثابت باشد. یک ویژگی srcset می‌تواند شامل URI و عرض هر برش جایگزین ایجاد شده توسط سرور بدون ایجاد درخواست‌های غیرضروری باشد، و هرچه منابع نامزد بیشتری برای تصویر رندر شده ارائه کنیم، مرورگر به‌طور کارآمدتر می‌تواند درخواست‌ها را تنظیم کند.

همانطور که در Responsive Images یاد گرفتید، باید از عنصر <picture> برای مدیریت یکپارچه الگوی بازگشتی WebP یا JPEG استفاده کنید. در این مورد، از ویژگی type در هماهنگی با srcset استفاده خواهید کرد.

<picture>
  <source type="image/webp" srcset="filename-1000.webp 1000w, filename-800.webp 800w, filename-400.webp 400w">
  <img srcset="filename-1000.jpg 1000w, filename-800.jpg 800w, filename-400.jpg 400w" sizes="…" alt="…">
</picture>

همانطور که آموخته اید، مرورگرهایی که از WebP پشتیبانی می کنند، محتویات ویژگی type را تشخیص می دهند و ویژگی srcset عنصر <source> را به عنوان لیست نامزدهای تصویر انتخاب می کنند. مرورگرهایی که image/webp به عنوان یک نوع رسانه معتبر نمی شناسند، این <source> را نادیده می گیرند و در عوض از ویژگی srcset عنصر داخلی <img> استفاده می کنند.

یک نکته دیگر از نظر پشتیبانی مرورگر وجود دارد: مرورگرهایی که از هرگونه نشانه‌گذاری تصویر پاسخگو پشتیبانی نمی‌کنند، همچنان به یک نسخه بازگشتی نیاز دارند، یا ممکن است در زمینه‌های مرور قدیمی به‌ویژه در معرض خطر شکسته شدن تصویر باشیم. از آنجایی که <picture> ، <source> و srcset همگی در این مرورگرها نادیده گرفته می‌شوند، می‌خواهیم یک منبع پیش‌فرض را در ویژگی src درونی <img> تعیین کنیم.

از آنجا که مقیاس کردن یک تصویر به سمت پایین از نظر بصری یکپارچه است و رمزگذاری JPEG به طور جهانی پشتیبانی می شود، بزرگترین JPEG انتخاب معقولی است.

<picture>
  <source type="image/webp" srcset="filename-1000.webp 1000w, filename-800.webp 800w, filename-400.webp 400w">
  <img src="filename-1000.jpg" srcset="filename-1000.jpg 1000w, filename-800.jpg 800w, filename-400.jpg 400w" sizes="…" alt="…">
</picture>

کنار آمدن با sizes می تواند کمی دشوارتر باشد. همانطور که یاد گرفتید ، sizes لزوماً متنی هستند—شما نمی توانید ویژگی را بدون دانستن میزان فضایی که تصویر در طرح رندر شده اشغال می کند، پر کنید. برای کارآمدترین درخواست‌های ممکن، یک ویژگی sizes دقیق باید در نشانه‌گذاری ما در زمانی که این درخواست‌ها توسط کاربر نهایی انجام می‌شود، بسیار قبل از درخواست سبک‌های حاکم بر طرح‌بندی صفحه، وجود داشته باشد. حذف sizes به‌طور کلی نه تنها نقض مشخصات HTML است، بلکه منجر به رفتار پیش‌فرض معادل sizes="100vw" می‌شود — به مرورگر اطلاع می‌دهد که این تصویر تنها توسط خود درگاه نمایش محدود می‌شود و در نتیجه بزرگترین منابع نامزد ممکن انتخاب می‌شوند.

همانطور که در مورد هر کار توسعه وب بسیار سنگینی وجود دارد، تعدادی ابزار برای انتزاع کردن فرآیند ویژگی‌های sizes دست‌نویس ایجاد شده‌اند. respImageLint یک قطعه کد کاملاً ضروری است که برای بررسی ویژگی‌های sizes شما از نظر دقت و ارائه پیشنهادهایی برای بهبود در نظر گرفته شده است. این ابزار به‌عنوان یک بوکمارکلت اجرا می‌شود - ابزاری که در مرورگر خود اجرا می‌کنید، در حالی که به صفحه کاملاً رندر شده حاوی عناصر تصویر شما اشاره می‌کنید. در شرایطی که مرورگر درک کاملی از طرح‌بندی صفحه دارد، همچنین آگاهی تقریباً پیکسلی از فضایی که یک تصویر در آن طرح‌بندی در هر اندازه نمای ممکن اشغال می‌کند، خواهد داشت.

ابزاری برای پر کردن ویژگی‌های sizes شما مطمئناً مفید است، اما حتی به عنوان ابزاری برای تولید عمده آنها ارزش بیشتری دارد. همانطور که می دانید، دستور srcset and sizes برای بهینه سازی درخواست ها برای دارایی های تصویر به روشی بدون درز بصری در نظر گرفته شده است. اگرچه چیزی نیست که هرگز نباید در تولید مورد استفاده قرار گیرد، اما sizes پیش‌فرض متغیر مکان‌دار 100vw هنگام کار بر روی طرح‌بندی صفحه در محیط توسعه محلی شما کاملاً معقول است. هنگامی که سبک‌های طرح‌بندی در جای خود قرار گرفتند، اجرای respImageLint ویژگی‌های sizes متناسب را در اختیار شما قرار می‌دهد که می‌توانید آن‌ها را کپی و در نشانه‌گذاری خود جای‌گذاری کنید، در سطحی از جزئیات بسیار بیشتر از آنچه با دست نوشته شده است:

اگرچه درخواست‌های تصویری که توسط نشانه‌گذاری ارائه‌شده توسط سرور آغاز می‌شوند خیلی سریع اتفاق می‌افتند تا جاوا اسکریپت نتواند ویژگی sizes سمت کلاینت را ایجاد کند، اگر این درخواست‌ها در سمت کلاینت آغاز شوند ، همان استدلال اعمال نمی‌شود. برای مثال، پروژه Lazysizes به شما امکان می‌دهد تا درخواست‌های تصویر را به طور کامل تا پس از ایجاد طرح‌بندی به تعویق بیندازید، و به جاوا اسکریپت اجازه می‌دهد تا مقادیر sizes ما را برای ما ایجاد کند - یک راحتی بزرگ برای شما، و تضمینی برای کارآمدترین درخواست‌های ممکن برای کاربران شما. . با این حال، به خاطر داشته باشید که این رویکرد به معنای قربانی کردن قابلیت اطمینان نشانه‌گذاری ارائه‌شده توسط سرور و بهینه‌سازی‌های سرعت تعبیه‌شده در مرورگرها است، و شروع این درخواست‌ها تنها پس از رندر شدن صفحه، تأثیر منفی بزرگی بر امتیاز LCP شما خواهد داشت.

البته، اگر از قبل به یک چارچوب رندر سمت کلاینت مانند React یا Vue وابسته هستید، این بدهی است که از قبل متحمل خواهید شد – و در این موارد، استفاده از Lazysizes به این معنی است که ویژگی‌های sizes شما تقریباً به طور کامل حذف می‌شوند. هنوز بهتر است: همانطور که sizes="auto" در تصاویر بارگذاری شده با اجماع و پیاده سازی های بومی به دست می آید، Lazysizes به طور موثری برای آن رفتار مرورگر استاندارد شده جدید تبدیل می شود.