تصاویر واکنش گرا

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

برای جزئیات کامل در مورد دوره، به نمای کلی توسعه برنامه های وب پیشرفته مراجعه کنید .

مقدمه

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

چیزی که یاد خواهید گرفت

  • چگونه تصاویر خود را پاسخگو کنیم تا اندازه آنها برای چندین فاکتور فرم مناسب باشد
  • نحوه استفاده از srcset و sizes برای نمایش تصویر مناسب با عرض دید
  • نحوه استفاده از picture و source در ترکیب با درخواست های رسانه ای به طوری که تصاویر در صفحه به طور خودکار با تغییر اندازه پنجره پاسخ دهند

آنچه شما باید بدانید

  • HTML و CSS اولیه

آنچه شما نیاز خواهید داشت

  • ویرایشگر متن
  • کامپیوتر با دسترسی ترمینال/پوسته

مخزن pwa-training-labs را از github دانلود یا کلون کنید و در صورت نیاز نسخه LTS Node.js را نصب کنید.

اگر سرور توسعه محلی ترجیحی ندارید، بسته http-server Node.js را نصب کنید:

npm install http-server -g

به دایرکتوری responsive-images-lab/app/ بروید و سرور را راه اندازی کنید:

cd responsive-images-lab/app
http-server -p 8080 -a localhost -c 0

شما می توانید سرور را در هر زمان با Ctrl-c خاتمه دهید.

مرورگر خود را باز کنید و به localhost:8080/ بروید.

توجه: همه سرویس‌کاران را لغو ثبت کنید و تمام کش‌های سرویس‌کار را برای لوکال هاست پاک کنید تا با آزمایشگاه تداخل نداشته باشند. در Chrome DevTools، می‌توانید با کلیک کردن بر روی پاک کردن داده‌های سایت از بخش پاک کردن فضای ذخیره‌سازی تب Application به این مهم دست یابید.

اگر ویرایشگر متنی دارید که به شما امکان می دهد پروژه ای را باز کنید، پوشه responsive-images-lab/app/ باز کنید. این کار سازماندهی را آسان تر می کند. در غیر این صورت، پوشه را در سیستم فایل کامپیوتر خود باز کنید. app/ پوشه جایی است که آزمایشگاه را می سازید.

این پوشه شامل:

  • پوشه images شامل تصاویر نمونه است که هر کدام دارای چندین نسخه با وضوح های مختلف هستند
  • index.html صفحه اصلی HTML برای نمونه سایت/برنامه ما است
  • styles/main.css شیوه نامه آبشاری برای سایت نمونه است

قبل از واکنش‌گرا کردن تصاویر، مطمئن شویم که از صفحه نمایش پر نمی‌شوند.

TODO 2 را در styles/main.css با کد زیر جایگزین کنید:

img {
  max-width: 100%;
}

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

توضیح

مقدار max-width نشان دهنده درصدی از عنصر حاوی، در این مورد عنصر article است.

توجه: همچنین می‌توانید max-width را بر حسب عرض درگاه دید با استفاده از واحدهای vw (مثلاً 100vw ) مشخص کنید. در این مورد، ما از یک مقدار درصد استفاده می‌کنیم تا عرض تصاویر را با متن حفظ کنیم.

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

یک srcset به یک تصویر اضافه کنید

برای تکمیل TODO 3.1 در index.html ، ویژگی srcset زیر را به عنصر img حاوی تصویر SFO اضافه کنید:

srcset="images/sfo-1600_large.jpg, images/sfo-1000_large.jpg, images/sfo-800_medium.jpg, images/sfo-500_small.jpg"

کد را ذخیره کرده و صفحه را در مرورگر رفرش کنید. ابزارهای توسعه دهنده مرورگر خود را باز کنید و به درخواست های شبکه نگاه کنید. سعی کنید صفحه را در اندازه های مختلف پنجره بازخوانی کنید. باید ببینید که مرورگر بدون توجه به اندازه پنجره، images/sfo-1600_large.jpg واکشی می کند.

توضیح

در پوشه images/ چندین نسخه از تصویر SFO وجود دارد که هر کدام با وضوح های متفاوتی هستند. ما اینها را در ویژگی srcset فهرست می کنیم تا به مرورگر این گزینه را بدهیم که از کدام فایل استفاده کند. با این حال، مرورگر هیچ راهی برای تعیین اندازه فایل ها قبل از بارگیری آنها ندارد، بنابراین همیشه اولین تصویر را در لیست انتخاب می کند.

توصیف کننده های عرض را به srcset اضافه کنید

برای بارگذاری اندازه صحیح تصویر بر اساس عرض درگاه نمایش، باید قبل از واکشی هر فایل به مرورگر بگوییم که چه اندازه بزرگ است.

برای تکمیل TODO 3.2 در index.html ، توصیفگرهای عرض را به عنصر SFO img اضافه کنید:

srcset="images/sfo-1600_large.jpg 1600w, images/sfo-1000_large.jpg 1000w, images/sfo-800_medium.jpg 800w, images/sfo-500_small.jpg 500w"

کد را ذخیره کرده و صفحه را در مرورگر رفرش کنید. صفحه را در اندازه های مختلف پنجره بازخوانی کنید و درخواست های شبکه را بررسی کنید تا ببینید کدام نسخه از تصویر در هر اندازه واکشی شده است. در یک صفحه نمایش 1x، مرورگر sfo-500_small.jpg را زمانی که پنجره باریکتر از 500 پیکسل است، sfo-800_medium.jpg را هنگامی که باریکتر از 800 پیکسل است و غیره واکشی می کند.

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

توجه: در Chrome، با باز بودن DevTools، ابعاد پنجره مرورگر در حال تغییر اندازه ظاهر می شود (تصویر زیر را ببینید). این ویژگی در سراسر این کد لبه بسیار مفید خواهد بود.

chrome-dimensions.png

توضیح

با افزودن یک توصیفگر عرض به هر فایل در srcset ، عرض هر تصویر را قبل از اینکه تصویر را واکشی کند، به مرورگر می‌گوییم. سپس مرورگر می تواند از این عرض ها استفاده کند تا تصمیم بگیرد که کدام تصویر را بر اساس اندازه پنجره آن واکشی کند. تصویری را با کمترین عرض واکشی می‌کند که همچنان بزرگتر از عرض دید درگاه است.

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

نمایش تصویر در نصف عرض دریچه دید (50vw)

TODO 4.1 را در styles/main.css با کد زیر جایگزین کنید:

img#sfo {
  transition: width 0.5s;
  max-width: 50vw;
}

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

توضیح

از آنجایی که CSS پس از HTML در زمان اجرا تجزیه می شود، مرورگر راهی برای دانستن اندازه نمایش نهایی تصویر در هنگام واکشی آن ندارد. مگر اینکه غیر از این بگوییم، مرورگر فرض می‌کند که تصاویر در 100% عرض نمای نمایش نمایش داده می‌شوند و بر اساس آن تصاویر را واکشی می‌کند. ما به راهی نیاز داریم تا از قبل به مرورگر بگوییم که آیا تصاویر با اندازه متفاوتی نمایش داده می شوند یا خیر.

ویژگی اندازه ها را به تصویر اضافه کنید

می‌توانیم به img یک ویژگی sizes بدهیم تا اندازه نمایش تصویر را قبل از واکشی به مرورگر بگوییم.

برای تکمیل TODO 4.2 در index.html sizes="50vw" را به عنصر img اضافه کنید تا شبیه به این شود:

<img id="sfo" src="images/sfo-500_small.jpg" srcset="images/sfo-1600_large.jpg 1600w, images/sfo-1000_large.jpg 1000w, images/sfo-800_medium.jpg 800w, images/sfo-500_small.jpg 500w" sizes="50vw" alt="View from aircraft window near San Francisco airport">

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

توضیح

مقدار sizes ها با مقدار max-width تصویر در CSS مطابقت دارد. مرورگر اکنون همه چیزهایی را که برای انتخاب نسخه تصویر صحیح نیاز دارد، دارد. مرورگر عرض نمای خود و تراکم پیکسل دستگاه کاربر را می‌داند، و ما ابعاد فایل‌های منبع (با استفاده از توصیف‌گر عرض) و اندازه‌های تصویر نسبت به viewport (با استفاده از ویژگی sizes ) را به آن داده‌ایم.

برای اطلاعات بیشتر

یک پرسش رسانه ای را به CSS اضافه کنید

ما می توانیم از پرس و جوهای رسانه ای برای تغییر اندازه تصاویر در زمان واقعی بر اساس عرض درگاه نمایش استفاده کنیم.

TODO 5.1 را در styles/main.css با کد زیر جایگزین کنید:

@media screen and (max-width: 700px) {
  img#sfo {
    max-width: 90vw;
    width: 90vw;
  }
}

کد را ذخیره کرده و صفحه را در مرورگر رفرش کنید. پنجره را به کمتر از 700 پیکسل کوچک کنید (در کروم، اگر DevTools باز باشد، ابعاد Viewport روی صفحه نمایش داده می شود). اندازه تصویر باید تغییر کند تا 90٪ از عرض پنجره را پر کند.

توضیح

پرس و جوی رسانه، عرض درگاه دید صفحه را آزمایش می‌کند، و اگر وسعت ویوپورت کمتر از 700 پیکسل باشد، CSS را اعمال می‌کند.

برای اطلاعات بیشتر

درخواست رسانه را به ویژگی sizes اضافه کنید

ما می‌توانیم به مرورگر در مورد درخواست رسانه در ویژگی sizes بگوییم تا وقتی تصویر تغییر اندازه می‌دهد، تصویر صحیح را واکشی کند.

برای تکمیل TODO 5.2 در index.html ، ویژگی sizes را در تصویر SFO به روز کنید:

sizes="(max-width: 700px) 90vw, 50vw"

کد را ذخیره کرده و صفحه را در مرورگر رفرش کنید. اندازه پنجره مرورگر را طوری تغییر دهید که عرض آن 600 پیکسل باشد. در یک صفحه نمایش 1x، مرورگر باید sfo-800_medium.jpg را واکشی کند.

می‌توانیم از عنصر picture و عنصر source ، در ترکیب با پرسش‌های رسانه، برای تغییر منبع تصویر با تغییر اندازه پنجره استفاده کنیم.

کد زیر را جایگزین TODO 6 در index.html کنید:

<figure>
    <picture>
    <source media="(min-width: 750px)"
            srcset="images/horses-1600_large_2x.jpg 2x,
                    images/horses-800_large_1x.jpg" />
    <source media="(min-width: 500px)"
            srcset="images/horses_medium.jpg" />
    <img src="images/horses_small.jpg" alt="Horses in Hawaii">
    </picture>
    <figcaption>Horses in Hawaii</figcaption>
</figure>

کد را ذخیره کرده و صفحه را در مرورگر رفرش کنید. سعی کنید اندازه پنجره مرورگر را تغییر دهید. شما باید تغییر تصویر را در 750 پیکسل و 500 پیکسل ببینید.

توضیح

عنصر picture به ما امکان می دهد چندین فایل منبع را با استفاده از تگ source تعریف کنیم. این با استفاده از یک تگ img با ویژگی srcset متفاوت است زیرا تگ منبع به ما امکان می دهد مواردی مانند پرس و جوهای رسانه ای را به هر مجموعه ای از منابع اضافه کنیم. به جای دادن اندازه های تصویر به مرورگر و اجازه دادن به آن برای تصمیم گیری از کدام فایل ها، می توانیم تصاویری را برای استفاده در هر اندازه پنجره تعریف کنیم.

ما چندین نسخه از نمونه تصویر را اضافه کرده‌ایم که هر کدام با وضوح‌های مختلف و برش داده شده‌اند تا فوکوس تصویر در اندازه‌های کوچک‌تر قابل مشاهده باشد. در کد بالا، در ابعاد بزرگتر از 750 پیکسل، مرورگر یا horses-1600_large_2x.jpg (اگر دستگاه دارای نمایشگر 2x باشد) یا horses-800_large_1x.jpg می کند. اگر عرض پنجره کمتر از 750 پیکسل اما بیشتر از 500 پیکسل باشد، مرورگر horses_medium.jpg را واکشی می کند. در کمتر از 500 پیکسل، مرورگر تصویر بازگشتی، horses_small.jpg را واکشی می کند.

توجه: اگر مرورگر کاربر از عنصر picture پشتیبانی نمی‌کند، هر چیزی را که در عنصر img است واکشی می‌کند. عنصر picture فقط برای تعیین چندین منبع برای عنصر img موجود در آن استفاده می شود. عنصر img چیزی است که تصویر را نمایش می دهد.

برای اطلاعات بیشتر

شما یاد گرفته اید که چگونه تصاویر صفحه وب خود را در همه دستگاه ها خوب جلوه دهید!

منابع

درباره خودکارسازی فرآیند بیاموزید

درباره srcset و اندازه ها بیشتر بدانید

درباره جهت هنری بیشتر بدانید

برای مشاهده تمامی کدهای دوره آموزشی PWA به کدلبورد خوش آمدید دوره مراجعه کنید/