مهم نیست که چقدر در یادگیری طراحی و توسعه برای وب هستید، عنصر <img>
نیاز به معرفی بسیار کمی دارد. <img>
که در سال 1993 در نت اسکیپ ("Mozaic" در آن زمان) راه اندازی شد و در سال 1995 به مشخصات HTML اضافه شد، مدت ها نقش ساده اما قدرتمندی را در بستر وب ایفا کرده است. توسعهدهنده یک فایل تصویری «منبع» با ویژگی src
اضافه میکند و در صورتی که تصویر قابل رندر نباشد یا فناوریهای کمکی درخواست جایگزین کنند، یک متن جایگزین با ویژگی alt
ارائه میکند. از آنجا، مرورگر تنها یک کار دارد: داده های تصویر را دریافت کنید، سپس آن را در سریع ترین زمان ممکن رندر کنید.
در بیشتر تاریخچه توسعه وب، کار با تصاویر خیلی پیچیده تر از این نبود. و علیرغم پیچیدگی وب مدرن، اصول کار با تصاویر تغییر نکرده است: استفاده از یک قالب تصویری سازگار با وب برای سازگاری، فشرده سازی معقول برای حفظ پهنای باند، و ابعاد متناسب با فضایی که تصویر در صفحه اشغال می کند. چیدمان.
استفاده از طرحبندیهای با عرض ثابت، مانند زمانی که فکر میکردیم بیشتر در مورد نحوه تجربه کاربران از وب صحبت میکنیم، این فرآیند را به یک فرآیند بدون عارضه تبدیل کرد. تنظیم اندازه منبع تصویر به خصوص آسان بود. برای تصویری که فضایی به عرض پانصد پیکسل و ارتفاع سیصد پیکسل را اشغال میکرد، یک مورد مشخص کردن یک تصویر منبع در همان اندازه بود.
تصاویر در یک طرح واکنشگرا
در کنار طرحبندی انعطافپذیر و استفاده از پرسشهای رسانهای CSS، «تصاویر و رسانههای انعطافپذیر» یکی از سه جنبه تعیینکننده طراحی وب واکنشگرا هستند. برای انعطافپذیر ساختن یک تصویر، توسعهدهندگان شروع به استفاده از CSS کردند تا max-width: 100%
روی تصویر (یا همه تصاویر، در سطح سایت) را تنظیم کنند تا به موتور رندر مرورگر بگویند که با کوچک کردن آن از پر شدن یک تصویر از محفظه اصلی خود جلوگیری کند. . از نظر بصری، این کار کاملاً کار می کند - کوچک کردن یک تصویر شطرنجی از نظر بصری یکپارچه است. با یک یا دو خط CSS، یک تصویر کوچک شده همیشه به نظر می رسد که گویی منبع تصویری را مشخص کرده ایم که قرار است در آن اندازه نمایش داده شود. هنگامی که به موتورهای رندر دادههای تصویری بیش از حد لازم برای فضایی که تصویر در یک طرحبندی اشغال میکند داده میشود، میتوانند تصمیمات آگاهانهای در مورد نحوه رندر کردن تصویر کاهشیافته بگیرند و میتوانند این کار را بدون معرفی هیچ گونه مصنوعات بصری یا تاری انجام دهند.
شما معمولاً نمی خواهید یک تصویر را ارتقا دهید - یعنی <img>
را در اندازه ای بزرگتر از اندازه ذاتی تصویر منبع رندر کنید. تصویر نمایش داده شده تار و دانهدار به نظر میرسد.
استفاده از img { max-width: 100% }
به این معنی است که با تغییر اندازه یک ظرف انعطاف پذیر، تصاویر به صورت مناسب کوچک می شوند. برخلاف تنظیم width: 100%
، این همچنین تضمین میکند که تصویر از اندازه ذاتی آن بزرگتر نشود. برای مدت طولانی، قوانین کار با تصاویر همین بود: از قالبی استفاده کنید که مرورگرها می فهمند، از سطح معقولی از فشرده سازی استفاده کنید و هرگز تصاویر را به سمت بالا تغییر ندهید.
اما به همان اندازه که این رویکرد از نظر بصری ساده و مؤثر بود، هزینه عملکرد هنگفتی را به همراه داشت. از آنجایی که <img>
فقط از یک منبع واحد برای داده های تصویر پشتیبانی می کرد، این رویکرد ما را ملزم می کرد که یک دارایی تصویر را با اندازه ذاتی به بزرگی بزرگ ترین اندازه ای که می تواند در آن نمایش داده شود، ارائه دهیم. تصویری که قرار است فضایی را در یک طرحبندی اشغال کند که میتواند از 300px
تا 2000px
، بسته به اندازه دید کاربر، به یک منبع تصویر با عرض ذاتی حداقل 2000px
نیاز داشته باشد. برای کاربری که فقط صفحه را از طریق یک نمای کوچک مشاهده میکند، همه چیز همانطور که انتظار میرود به نظر میرسد—تصویر به خوبی مقیاس میشود. در صفحه رندر شده، یک تصویر منبع عظیم اما کوچک شده تفاوتی با یک تصویر با اندازه مناسب ندارد. با این حال، آنها همچنان در حال انتقال و رندر کردن یک تصویر با پهنای 2000px
هستند که از طریق حجم عظیمی از پهنای باند و قدرت پردازشی بدون هیچ سود محسوسی می سوزد.
همه چیز با ظهور اولین دستگاه های "رتینا" بسیار بدتر شد، زیرا تراکم نمایشگر در کنار اندازه نمایشگر به یک نگرانی تبدیل شد. یک منبع تصویر به پهنای ذاتی بسیار بزرگتری نیاز دارد تا بتواند با نمایشگر با چگالی بالا سازگار باشد. به زبان ساده، یک نمایشگر با چگالی دو برابر به دو برابر پیکسل های تصویر بیشتری نیاز دارد تا تصویر را تا حد امکان واضح نشان دهد.
در اینجا، توسعه دهندگان دوباره توانستند بر توانایی موتورهای رندر برای کاهش مقیاس بصری تصاویر تکیه کنند. با ارائه یک تصویر منبع عریض 800px
در src
به مرورگر، و سپس مشخص کردن اینکه باید با عرض 400px
با CSS نمایش داده شود، نتیجه تصویری است که با تراکم پیکسلی دو برابر ارائه می شود:
یک تصویر منفرد، برش داده شده برای بزرگترین فضای ممکن در چیدمان و نمایشگرهای با چگالی بالا، البته از نظر بصری برای همه کاربران کار میکند. یک منبع تصویر بزرگ و با وضوح بالا که بر روی یک صفحه نمایش کوچک و با چگالی کم ارائه می شود، مانند هر تصویر کوچک و کم تراکم دیگری به نظر می رسد، اما بسیار کندتر به نظر می رسد. کاربر تمام هزینه های عملکرد آن منبع تصویر عظیم با پهنای 4000 پیکسل را متحمل می شود و هیچ سودی نخواهد داشت.
برای مدت طولانی، <img>
تا حد زیادی یک کار را انجام داد: "داده های تصویر را دریافت کرد و آن را روی صفحه نمایش گذاشت." مطمئناً این کار را به خوبی انجام داد، اما <img>
به وظیفه خود در سازگاری با تغییرات اساسی در زمینه مروری که تجربه میکردیم، نبود. در حالی که طراحی وب ریسپانسیو به یک روش اصلی توسعه تبدیل شد، مرورگرها عملکرد img
را برای نزدیک به بیست سال بهینه کردند - اما برای همه به جز ممتازترین کاربران، محتوای تصویر صفحات از همان ابتدا ناکارآمد بود. مهم نیست که مرورگر با چه سرعتی توانسته است یک منبع تصویر را درخواست، تجزیه و ارائه کند، آن دارایی احتمالاً بسیار بزرگتر از نیاز کاربر خواهد بود.