یک تصویر گویاتر از ۱۰۰۰ کلمه است و تصاویر نقش مهمی در هر صفحه ایفا می‌کنند. اما اغلب بیشترین بایت‌های بارگیری‌شده را نیز به خود اختصاص می‌دهند. با طراحی وب واکنش‌گرا، نه‌تنها چیدمان‌های ما می‌توانند براساس ویژگی‌های دستگاه تغییر کنند، بلکه تصاویر نیز می‌توانند تغییر کنند.
طراحی وب واکنش‌گرا یعنی نه‌تنها چیدمان‌های ما می‌توانند براساس ویژگی‌های دستگاه تغییر کنند، بلکه محتوا نیز می‌تواند تغییر کند. برای مثال، در نمایشگرهای با وضوح بالا (2x)، گرافیک با وضوح بالا شفافیت را تضمین می‌کند. تصویری که عرض آن ۵۰٪ است ممکن است وقتی عرض مرورگر ۸۰۰ پیکسل است به‌خوبی کار کند، اما در تلفنی با صفحه‌نمایش باریک فضای زیادی را اشغال می‌کند و وقتی برای قرار گرفتن در صفحه‌نمایش کوچک‌تر کوچک می‌شود، به همان میزان سربار پهنای باند نیاز دارد.
راهبرد هنری
در مواقع دیگر ممکن است لازم باشد تصویر به‌طور جدی‌تری تغییر کند: تغییر دادن نسبت‌ها، برش دادن، و حتی جایگزین کردن کل تصویر. در این حالت، تغییر تصویر معمولاً به‌عنوان کارگردانی هنری شناخته می‌شود. برای نمونه‌های بیشتر، responsiveimages.org/demos/ را ببینید.
تصاویر واکنش‌گرا
آیا می‌دانستید که تصاویر به‌طور متوسط بیش‌از ۶۰٪ بایت‌های موردنیاز برای بار کردن صفحه وب را تشکیل می‌دهند؟
در این دوره، نحوه کار با تصاویر در وب مدرن را یاد خواهید گرفت تا تصاویرتان در هر دستگاهی عالی به‌نظر برسند و سریع بار شوند.
درطول مسیر، طیفی از مهارت‌ها و تکنیک‌ها را برای ادغام روان تصاویر واکنش‌گرا در گردش کار توسعه خود کسب خواهید کرد. در پایان دوره، با تصاویری توسعه خواهید داد که با اندازه‌های مختلف ناحیه نمایش و سناریوهای استفاده سازگار می‌شوند و به آن‌ها پاسخ می‌دهند.
این دوره رایگان ازطریق Udacity ارائه می‌شود
تصاویر در نشانه‌گذاری
عنصر img قدرتمند است—محتوا را بارگیری، کدگشایی، و رندر می‌کند—و مرورگرهای نو از طیفی از قالب‌های تصویر پشتیبانی می‌کنند. گنجاندن تصاویری که در همه دستگاه‌ها کار می‌کنند تفاوتی با رایانه ندارد و فقط به چند تغییر جزئی برای ایجاد تجربه‌ای خوب نیاز دارد.
خلاصه
- از اندازه‌های نسبی برای تصاویر استفاده کنید تا از سرریز شدن تصادفی آن‌ها از ظرف جلوگیری شود.
- وقتی می‌خواهید تصاویر مختلفی را براساس ویژگی‌های دستگاه (یا همان جهت هنری) مشخص کنید، از عنصر
pictureاستفاده کنید. - از
srcsetو توصیف‌گرxدر عنصرimgاستفاده کنید تا به مرورگر درباره بهترین تصویر برای استفاده هنگام انتخاب از بین تراکم‌های مختلف راهنمایی دهید. - اگر صفحه‌تان فقط یک یا دو تصویر دارد و این تصاویر در جای دیگری از سایتتان استفاده نمی‌شوند، برای کاهش درخواست‌های فایل، از تصاویر درون‌خطی استفاده کنید.
استفاده از اندازه‌های نسبی برای تصاویر
به‌یاد داشته باشید که هنگام مشخص کردن عرض تصاویر از واحدهای نسبی استفاده کنید تا از
سرریز شدن تصادفی آن‌ها از نمای دید جلوگیری شود. برای مثال، width: 50%; باعث می‌شود
پهنای تصویر ۵۰٪ عنصر دربرگیرنده باشد (نه ۵۰٪ نمای دید یا
۵۰٪ اندازه واقعی پیکسل).
چون CSS به محتوا اجازه می‌دهد از ظرف خود سرریز کند، ممکن است لازم باشد از max- width: 100% استفاده کنید تا از سرریز شدن تصاویر و محتوای دیگر جلوگیری کنید. برای مثال:
img, embed, object, video {
max-width: 100%;
}
حتماً ازطریق مشخصه alt در عناصر img شرح‌های معنادار ارائه دهید؛ این کار با ارائه بافت به صفحه‌خوان‌ها و دیگر فناوری‌های کمکی، به دردسترس‌تر شدن سایت شما کمک می‌کند.
بهبود img با srcset برای دستگاه‌های با DPI بالا
مشخصه srcset رفتار عنصر img را بهبود می‌بخشد و ارائه چندین فایل تصویری را برای ویژگی‌های مختلف دستگاه آسان می‌کند. مشابه image-set
تابع CSS
بومی CSS، srcset به مرورگر اجازه می‌دهد بهترین
تصویر را بسته به ویژگی‌های دستگاه انتخاب کند، برای مثال استفاده از
تصویر 2x در نمایشگر 2x، و احتمالاً در آینده، تصویر 1x در
دستگاه 2x هنگام استفاده از شبکه با پهنای باند محدود.
<img src="photo.png" srcset="photo@2x.png 2x" ...>
در مرورگرهایی که از srcset پشتیبانی نمی‌کنند، مرورگر به‌سادگی از فایل تصویری پیش‌فرض مشخص‌شده توسط مشخصه src استفاده می‌کند. به‌همین دلیل است که همیشه باید یک تصویر 1x را که می‌تواند در هر دستگاهی، صرف‌نظر از قابلیت‌های آن، نمایش داده شود، اضافه کنید. وقتی srcset پشتیبانی می‌شود، فهرست جداشده با کاما از
تصویر/شرایط قبل‌از ارسال هرگونه درخواست تجزیه می‌شود و فقط
مناسب‌ترین تصویر بارگیری و نمایش داده می‌شود.
While the conditions can include everything from pixel density to width and height, only pixel density is well-supported today. برای ایجاد تعادل بین رفتار فعلی و ویژگی‌های آینده، فقط تصویر 2x را در مشخصه ارائه دهید.
کارگردانی هنری در تصاویر واکنش‌گرا با picture
برای تغییر دادن تصاویر براساس ویژگی‌های دستگاه، که به آن جهت هنری نیز می‌گویند، از عنصر picture استفاده کنید. عنصر
picture راه‌حلی اعلانی برای
ارائه نسخه‌های متعدد از یک تصویر براساس
ویژگی‌های مختلف، مانند اندازه دستگاه، وضوح دستگاه، جهت،
و غیره تعریف می‌کند.
وقتی منبع تصویر در چند تراکم وجود دارد، یا وقتی طراحی واکنش‌گرا تصویر تاحدودی متفاوتی را در برخی‌از انواع صفحه‌نمایش‌ها دیکته می‌کند، از عنصر picture استفاده کنید. مشابه عنصر
video، می‌توان چندین عنصر source را
گنجاند، که امکان مشخص کردن فایل‌های تصویری مختلف
بسته به پرسمان‌های رسانه یا قالب تصویر را فراهم می‌کند.
<picture>
<source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x">
<source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x">
<img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" alt="a head carved out of wood">
</picture>
در مثال بالا، اگر عرض مرورگر حداقل ۸۰۰ پیکسل باشد، بسته به وضوح دستگاه،
head.jpg یا head-2x.jpg استفاده می‌شود. اگر
مرورگر بین ۴۵۰ پیکسل و ۸۰۰ پیکسل باشد، بسته به وضوح دستگاه، از head-small.jpg یا head-small-
2x.jpg استفاده می‌شود. برای عرض‌های صفحه
کمتر از ۴۵۰ پیکسل و سازگاری با نسخه قدیمی که عنصر picture
پشتیبانی نمی‌شود، مرورگر به‌جای آن عنصر img را ارائه می‌کند و همیشه باید
گنجانده شود.
تصاویر با اندازه نسبی
When the final size of the image isn’t known, it can be difficult to specify a density descriptor for the image sources. این امر به‌ویژه برای تصاویری صادق است که عرض متناسبی از مرورگر را دربرمی‌گیرند و بسته به اندازه مرورگر، سیال هستند.
به‌جای ارائه اندازه‌ها و تراکم‌های ثابت تصویر، می‌توانید اندازه هر تصویر ارائه‌شده را با افزودن توصیف‌گر عرض به‌همراه اندازه عنصر تصویر مشخص کنید تا مرورگر بتواند به‌طور خودکار تراکم پیکسل مؤثر را محاسبه کند و بهترین تصویر را برای بارگیری انتخاب کند.
<img src="lighthouse-200.jpg" sizes="50vw"
srcset="lighthouse-100.jpg 100w, lighthouse-200.jpg 200w,
lighthouse-400.jpg 400w, lighthouse-800.jpg 800w,
lighthouse-1000.jpg 1000w, lighthouse-1400.jpg 1400w,
lighthouse-1800.jpg 1800w" alt="a lighthouse">
مثال بالا تصویری را ارائه می‌دهد که نصف عرض نمای هدف است (sizes="50vw") و بسته به عرض مرورگر و نسبت پیکسل دستگاه آن، به مرورگر اجازه می‌دهد تصویر صحیح را بدون توجه به اندازه پنجره مرورگر انتخاب کند. برای مثال، جدول زیر نشان می‌دهد که مرورگر کدام تصویر را انتخاب می‌کند:
| عرض مرورگر | نسبت پیکسل دستگاه | تصویر استفاده‌شده | وضوح مؤثر |
|---|---|---|---|
| ۴۰۰ پیکسل | 1 | 200.jpg |
۱ برابر |
| ۴۰۰ پیکسل | 2 | 400.jpg |
۲ برابر |
| ۳۲۰ پیکسل | 2 | 400.jpg |
۲٫۵ برابر |
| ۶۰۰ پیکسل | 2 | 800.jpg |
۲٫۶۷ برابر |
| ۶۴۰ پیکسل | 3 | 1000.jpg |
۳٫۱۲۵ برابر |
| ۱۱۰۰ پیکسل | 1 | 800.png |
۱٫۴۵برابر |
درنظر گرفتن نقاط شکست در تصاویر واکنش‌گرا
در بسیاری از موارد، اندازه تصویر ممکن است بسته به نقاط شکست چیدمان سایت تغییر کند. برای مثال، در صفحه‌نمایش کوچک، ممکن است بخواهید تصویر کل عرض نمای را دربرگیرد، درحالی‌که در صفحه‌نمایش‌های بزرگ‌تر، باید فقط بخش کوچکی را اشغال کند.
<img src="400.png"
sizes="(min-width: 600px) 25vw, (min-width: 500px) 50vw, 100vw"
srcset="100.png 100w, 200.png 200w, 400.png 400w,
800.png 800w, 1600.png 1600w, 2000.png 2000w" alt="an example image">
مشخصه sizes در مثال بالا از چندین پرسمان رسانه برای مشخص کردن اندازه تصویر استفاده می‌کند. وقتی عرض مرورگر بیشتر از ۶۰۰ پیکسل باشد، تصویر ۲۵٪ عرض نمای هدف است؛ وقتی بین ۵۰۰ پیکسل و ۶۰۰ پیکسل باشد، تصویر ۵۰٪ عرض نمای هدف است؛ و زیر ۵۰۰ پیکسل، تصویر تمام عرض است.
تصاویر محصول را قابل‌گسترش کنید
مشتریان می‌خواهند ببینند چه چیزی می‌خرند. در سایت‌های خرده‌فروشی، کاربران انتظار دارند بتوانند نمای نزدیک با وضوح بالا از محصولات را مشاهده کنند تا جزئیات را بهتر ببینند و شرکت‌کنندگان در مطالعه اگر نتوانند این کار را انجام دهند، ناامید می‌شوند.
نمونه خوبی از تصاویر قابل‌گسترش و قابل‌ضربه زدن توسط J ارائه شده است. سایت خدمه. یک هم‌پوشانی محوشونده نشان می‌دهد که تصویر قابل‌تک‌ضرب زدن است و تصویری بزرگ‌نمایی‌شده با جزئیات دقیق قابل‌مشاهده ارائه می‌دهد.
سایر تکنیک‌های تصویر
تصاویر فشرده‌سازی
تکنیک تصویر فشرده‌سازی یک تصویر ۲ برابری بسیار فشرده را به همه دستگاه‌ها ارائه می‌دهد، صرف‌نظر از قابلیت‌های واقعی دستگاه. بسته به نوع تصویر و سطح فشرده‌سازی، ممکن است کیفیت تصویر تغییر نکند، اما اندازه فایل به‌طور قابل‌توجهی کاهش می‌یابد.
جایگزینی تصویر جاوا اسکریپت
جایگزینی تصویر جاوا اسکریپت قابلیت‌های دستگاه را بررسی می‌کند و «کار درست را انجام می‌دهد». می‌توانید نسبت پیکسل دستگاه را ازطریق
window.devicePixelRatio تعیین کنید، عرض و ارتفاع صفحه‌نمایش را دریافت کنید، و حتی به‌طور بالقوه
ازطریق navigator.connection یا صدور درخواست جعلی،
برخی‌از اتصالات شبکه را بو بکشید. وقتی همه این اطلاعات را جمع‌آوری کردید، می‌توانید تصمیم بگیرید کدام
تصویر بار شود.
یکی از معایب بزرگ این رویکرد این است که استفاده از جاوا اسکریپت به این معنی است که شما
بارگیری تصویر را حداقل تا زمانی که تجزیه‌کننده پیش‌نگر تمام شود، به تأخیر خواهید انداخت. این
بدین معنی است که بارگیری تصاویر حتی تا بعداز راه‌اندازی رویداد pageload
شروع نخواهد شد. علاوه‌براین، مرورگر به احتمال زیاد هر دو تصویر 1x و 2x را بارگیری می‌کند که منجر به افزایش سنگینی صفحه می‌شود.
تصاویر درون‌خطی: شطرنجی و برداری
دو روش اساساً متفاوت برای ایجاد و ذخیره تصاویر وجود دارد—و این بر نحوه استقرار تصاویر به‌صورت واکنش‌گرا تأثیر می‌گذارد.
تصاویر شطرنجی — مانند عکس‌ها و تصاویر دیگر، به‌صورت شبکه‌ای از نقطه‌های رنگی مجزا نمایش داده می‌شوند. تصاویر شطرنجی ممکن است از دوربین یا اسکنر گرفته شده باشند یا با عنصر بوم HTML ایجاد شده باشند. قالب‌هایی مثل PNG، JPEG، و WebP برای ذخیره کردن تصاویر شطرنجی استفاده می‌شوند.
تصاویر بُرداری مانند نشان‌واره‌ها و هنر خطی به‌عنوان مجموعه‌ای از منحنی‌ها، خطوط، اشکال، رنگ‌های پرکننده، و گرادیان‌ها تعریف می‌شوند. تصاویر برداری را می‌توان با برنامه‌هایی مانند Adobe Illustrator یا Inkscape ایجاد کرد، یا بااستفاده از قالب برداری مانند SVG به‌صورت کد دست‌نویس کرد.
قالب SVG
«نگاره‌سازی برداری مقیاس‌پذیر» (SVG) امکان گنجاندن گرافیک‌های برداری واکنش‌گرا را در صفحه وب فراهم می‌کند. مزیت قالب‌های فایل بُرداری نسبت به قالب‌های فایل شطرنجی این است که مرورگر می‌تواند تصویر بُرداری را در هر اندازه‌ای ارائه دهد. قالب‌های برداری هندسه تصویر را توصیف می‌کنند—اینکه چگونه از خطوط، منحنی‌ها، رنگ‌ها و غیره ساخته شده است. ازسوی‌دیگر، قالب‌های شطرنجی فقط اطلاعاتی درباره نقطه‌های رنگی مجزا دارند، بنابراین مرورگر باید حدس بزند که چگونه جاهای خالی را هنگام مقیاس‌بندی پر کند.
در زیر دو نسخه از یک تصویر وجود دارد: تصویر PNG در سمت چپ و SVG در سمت راست. SVG در هر اندازه‌ای عالی به‌نظر می‌رسد، درحالی‌که PNG کنار آن در اندازه‌های نمایش بزرگ‌تر شروع به تار شدن می‌کند.
اگر می‌خواهید تعداد درخواست‌های فایل را که صفحه‌تان ایجاد می‌کند کاهش دهید، می‌توانید تصاویر را بااستفاده از قالب SVG یا Data URI به‌صورت درون‌خطی کدگذاری کنید. اگر منبع این صفحه را مشاهده کنید، خواهید دید که هر دو نشان‌واره زیر به‌صورت درون‌خطی اعلام شده‌اند: یک URI داده و یک SVG.
SVG پشتیبانی عالی در تلفن همراه و رایانه دارد، و ابزارهای بهینه‌سازی می‌توانند اندازه SVG را به‌طور قابل‌توجهی کاهش دهند. دو نشان‌واره SVG درون‌خطی زیر یکسان به‌نظر می‌رسند، اما یکی حدود ۳ کیلوبایت و دیگری فقط ۲ کیلوبایت است:
URI داده
URI داده‌ها روشی برای گنجاندن فایل، مانند تصویر، به‌صورت درون‌خطی با تنظیم
src عنصر img به‌عنوان رشته کدبندی‌شده Base64 بااستفاده از
قالب زیر ارائه می‌دهد:
<img src="data:image/svg+xml;base64,[data]">
شروع کد برای نشان‌واره HTML5 بالا به این شکل است:
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiB
BZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW ...">
(طول نسخه کامل بیش‌از ۵۰۰۰ نویسه است!)
ابزار کشیدن و رها کردن مانند jpillora.com/base64-encoder برای تبدیل فایل‌های دودویی مانند تصاویر به URI داده دردسترس است. درست مثل SVG، URI داده‌ها در مرورگرهای تلفن همراه و رایانه به‌خوبی پشتیبانی می‌شود.
درون‌خطی کردن در CSS
URIهای داده و SVGها را می‌توان در CSS نیز به‌صورت درون‌خطی قرار داد—و این در هر دو نسخه تلفن همراه و رایانه پشتیبانی می‌شود. در اینجا دو تصویر با ظاهر یکسان وجود دارد که به‌عنوان تصاویر پس‌زمینه در CSS پیاده‌سازی شده‌اند؛ یکی URI داده، یکی SVG:
مزایا و معایب درون‌خطی کردن
کد درون‌خطی برای تصاویر می‌تواند پرجزئیات باشد—به‌ویژه URI داده—پس چرا باید بخواهید از آن استفاده کنید؟ برای کاهش درخواست‌های HTTP! SVG و URI داده‌ها می‌توانند کل صفحه وب، ازجمله تصاویر، CSS، و جاوا اسکریپت را فعال کنند تا با یک درخواست بازیابی شوند.
ازسوی دیگر:
- در تلفن همراه، نمایش URI داده‌ها در تلفن همراه می‌تواند به‌طور قابل‌توجهی کندتر از تصاویر
srcخارجی باشد. - شناسه‌های منبع یکسان داده می‌توانند اندازه درخواست HTML را به‌طور قابل‌توجهی افزایش دهند.
- این کار باعث پیچیدگی نشانه‌گذاری و گردش کار شما می‌شود.
- قالب URI داده به‌طور قابل‌توجهی بزرگ‌تر از دودویی است (تا ۳۰٪) و بنابراین اندازه کل بارگیری را کاهش نمی‌دهد.
- URI داده‌ها را نمی‌توان در حافظه نهان ذخیره کرد، بنابراین باید برای هر صفحه‌ای که در آن استفاده می‌شود بارگیری شود.
- در IE 6 و 7 پشتیبانی نمی‌شوند، در IE8 پشتیبانی ناقص است.
- با HTTP/2، کاهش تعداد درخواست‌های دارایی اولویت کمتری خواهد داشت.
مانند همه چیزهای واکنش‌گرا، باید آنچه را که بهترین عملکرد را دارد آزمایش کنید. از ابزارهای توسعه‌دهنده برای اندازه‌گیری اندازه فایل بارگیری، تعداد درخواست‌ها، و تأخیر کل استفاده کنید. گاهی اوقات URI داده‌ها می‌تواند برای تصاویر شطرنجی مفید باشد—برای مثال، در صفحه اصلی که فقط یک یا دو عکس دارد که در جای دیگری استفاده نمی‌شود. اگر نیاز به درون‌خطی کردن تصاویر برداری دارید، SVG گزینه بسیار بهتری است.
تصاویر در CSS
ویژگی CSS background ابزاری قدرتمند برای افزودن تصاویر پیچیده به عناصر است،
افزودن چندین تصویر را آسان می‌کند، و باعث تکرار آن‌ها می‌شود،
و موارد دیگر. وقتی با پُرسمان‌های رسانه ترکیب می‌شود، ویژگی پس‌زمینه حتی قدرتمندتر می‌شود و بارگیری تصویر شرطی را براساس وضوح صفحه‌نمایش، اندازه نمای دید، و موارد دیگر فعال می‌کند.
خلاصه
- از بهترین تصویر برای ویژگی‌های نمایشگر استفاده کنید، اندازه صفحه‌نمایش، وضوح دستگاه، و چیدمان صفحه را درنظر بگیرید.
- ویژگی
background-imageرا در CSS برای نمایشگرهای با DPI بالا بااستفاده از پُرسمان‌های رسانه باmin-resolutionو-webkit-min-device-pixel-ratioتغییر دهید. - از srcset برای ارائه تصاویر با وضوح بالا علاوه‌بر تصویر 1x در نشانه‌گذاری استفاده کنید.
- هنگام استفاده از تکنیک‌های جایگزینی تصویر جاوا اسکریپت یا هنگام ارائه تصاویر با وضوح بالا و فشرده‌سازی بالا به دستگاه‌های با وضوح پایین، هزینه‌های عملکرد را در نظر بگیرید.
از پرسمان‌های رسانه برای بار کردن تصویر شرطی یا جهت هنری استفاده کنید
پرس‌وجوهای رسانه‌ای نه‌تنها بر چیدمان صفحه تأثیر می‌گذارند، بلکه می‌توانید از آن‌ها برای بار کردن مشروط تصاویر یا ارائه جهت هنری بسته به عرض نمای هدف استفاده کنید.
برای مثال، در نمونه زیر، در صفحه‌نمایش‌های کوچک‌تر فقط small.png بارگیری می‌شود و روی محتوای div اعمال می‌شود، درحالی‌که در صفحه‌نمایش‌های بزرگ‌تر background-image: url(body.png) روی بدنه اعمال می‌شود و background-image:
url(large.png) روی محتوای div اعمال می‌شود.
.example {
height: 400px;
background-image: url(small.png);
background-repeat: no-repeat;
background-size: contain;
background-position-x: center;
}
@media (min-width: 500px) {
body {
background-image: url(body.png);
}
.example {
background-image: url(large.png);
}
}
از image-set برای ارائه تصاویر با وضوح بالا استفاده کنید
تابع image-set() در CSS ویژگی رفتار background را بهبود می‌بخشد،
و ارائه چندین فایل تصویری را برای مشخصات مختلف دستگاه
آسان می‌کند. این کار به مرورگر اجازه می‌دهد بهترین تصویر را براساس ویژگی‌های دستگاه انتخاب کند، برای مثال استفاده از تصویر 2x در نمایشگر 2x، یا تصویر 1x در دستگاه 2x هنگام استفاده از شبکه با پهنای باند محدود.
background-image: image-set(
url(icon1x.jpg) 1x,
url(icon2x.jpg) 2x
);
In addition to loading the correct image, the browser also scales it accordingly. به عبارت دیگر، مرورگر فرض می‌کند که تصاویر 2x دو برابر بزرگ‌تر از تصاویر 1x هستند، بنابراین تصویر 2x را با ضریب ۲ کوچک می‌کند تا تصویر با همان اندازه در صفحه ظاهر شود.
پشتیبانی از image-set() هنوز جدید است و فقط در Chrome و
Safari با پیشوند فروشنده -webkit پشتیبانی می‌شود. دقت کنید که تصویر جایگزینی برای زمانی که image-set() پشتیبانی نمی‌شود اضافه کنید؛ برای مثال:
.sample {
width: 128px;
height: 128px;
background-image: url(icon1x.png);
background-image: -webkit-image-set(
url(icon1x.png) 1x,
url(icon2x.png) 2x
);
background-image: image-set(
url(icon1x.png) 1x,
url(icon2x.png) 2x
);
}
کد بالا دارایی مناسب را در مرورگرهایی که از image-set پشتیبانی می‌کنند بار می‌کند؛
درغیراین‌صورت، به دارایی 1x برمی‌گردد. هشدار واضح این است که اگرچه
پشتیبانی مرورگر image-set() کم است، اکثر مرورگرها دارایی ۱ برابر را دریافت می‌کنند.
از پرسمان‌های رسانه برای ارائه تصاویر با وضوح بالا یا جهت هنری استفاده کنید
پرس‌وجوهای رسانه می‌توانند براساس نسبت پیکسل دستگاه قوانینی ایجاد کنند، که امکان مشخص کردن تصاویر مختلف برای نمایشگرهای 2x درمقابل 1x را فراهم می‌کند.
@media (min-resolution: 2dppx),
(-webkit-min-device-pixel-ratio: 2)
{
/* High dpi styles & resources here */
}
Chrome، Firefox، و Opera همگی از (min-resolution: 2dppx) استاندارد پشتیبانی می‌کنند،
درحالی‌که مرورگرهای Safari و Android هر دو به نحو پیشوند فروشنده قدیمی‌تر
بدون واحد dppx نیاز دارند. به‌یاد داشته باشید که این سبک‌ها فقط درصورتی بار می‌شود که دستگاه با پُرسمان رسانه مطابقت داشته باشد و باید سبک‌ها را برای حالت پایه مشخص کنید.
این کار همچنین این مزیت را دارد که اگر مرورگر از پُرسمان‌های رسانه‌ای مختص وضوح پشتیبانی نکند،
مطمئن می‌شوید که چیزی ارائه می‌شود.
.sample {
width: 128px;
height: 128px;
background-image: url(icon1x.png);
}
@media (min-resolution: 2dppx), /* Standard syntax */
(-webkit-min-device-pixel-ratio: 2) /* Safari & Android Browser */
{
.sample {
background-size: contain;
background-image: url(icon2x.png);
}
}
همچنین می‌توانید از نحو min-width برای نمایش تصاویر جایگزین بسته به اندازه ناحیه نمایش استفاده کنید. این تکنیک این مزیت را دارد که اگر پرسمان رسانه مطابقت نداشته باشد، تصویر بارگیری نمی‌شود. برای مثال، bg.png فقط درصورتی بارگیری می‌شود و در body اعمال می‌شود که عرض مرورگر ۵۰۰ پیکسل یا بیشتر باشد:
@media (min-width: 500px) {
body {
background-image: url(bg.png);
}
}
استفاده از SVG برای نمادها
هنگام افزودن نماد به صفحه‌تان، درصورت امکان از نمادهای SVG یا در برخی موارد از نویسه‌های یونیکد استفاده کنید.
خلاصه
- برای نمادها، به‌جای تصاویر شطرنجی از SVG یا یونیکد استفاده کنید.
جایگزین کردن نمادهای ساده با یونیکد
بسیاری از قلم‌ها از تعداد بی‌شماری از نویسه‌های یونیکد پشتیبانی می‌کنند که می‌توان از آن‌ها به‌جای تصاویر استفاده کرد. برخلاف تصاویر، قلم‌های یونیکد به‌خوبی مقیاس‌بندی می‌شوند و صرف‌نظر از اینکه چقدر کوچک یا بزرگ در صفحه نمایش داده شوند، ظاهر خوبی دارند.
فراتر از مجموعه نویسه‌های معمولی، یونیکد ممکن است شامل نمادهایی برای پیکان‌ها (←)، عملگرهای ریاضی (√)، اشکال هندسی (★)، تصاویر کنترلی (▶)، نت‌نویسی موسیقی (♬)، حروف یونانی (Ω)، و حتی مهره‌های شطرنج (♞) باشد.
گنجاندن نویسه یونیکد به همان روشی انجام می‌شود که نهادهای نام‌گذاری‌شده انجام می‌شوند:
&#XXXX، که در آن XXXX نشان‌دهنده شماره نویسه یونیکد است. برای مثال:
You're a super ★
شما یک ★ فوق‌العاده هستید
جایگزین کردن نمادهای پیچیده با SVG
برای الزامات پیچیده‌تر نماد، نمادهای SVG معمولاً سبک‌وزن هستند، استفاده از آن‌ها آسان است، و می‌توان آن‌ها را با CSS سبک‌بندی کرد. SVG نسبت به تصاویر شطرنجی مزایای زیادی دارد:
- آن‌ها گرافیک‌های برداری هستند که می‌توانند به‌طور نامحدود مقیاس‌بندی شوند.
- جلوه‌های CSS مانند رنگ، سایه، شفافیت، و پویانمایی‌ها ساده هستند.
- تصاویر SVG را می‌توان مستقیماً در سند درج کرد.
- آن‌ها معنایی هستند.
- این عناصر با مشخصه‌های مناسب، دسترس‌پذیری بهتری ارائه می‌دهند.
With SVG icons, you can either add icons using inline SVG, like
this checkmark:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="32" height="32" viewBox="0 0 32 32">
<path d="M27 4l-15 15-7-7-5 5 12 12 20-20z" fill="#000000"></path>
</svg>
or by using an image tag, like this credit card icon:
<img src="credit.svg">.
بااحتیاط از قلم‌های نماد استفاده کنید
قلم‌های نماد محبوب هستند و استفاده از آن‌ها آسان است، اما درمقایسه با نمادهای SVG معایبی دارند:
- این نمادها گرافیک‌های برداری هستند که می‌توانند به‌طور نامحدود مقیاس‌بندی شوند، اما ممکن است هموارسازی شوند که منجر به نمادهایی می‌شود که به‌اندازه انتظار واضح نیستند.
- سبک‌بندی محدود با CSS.
- موقعیت‌یابی دقیق پیکسل می‌تواند دشوار باشد، بسته به ارتفاع خط، فاصله حروف، و غیره.
- این عناصر معنایی نیستند و استفاده از آن‌ها با صفحه‌خوان یا دیگر فناوری‌های کمکی می‌تواند دشوار باشد.
- اگر به‌درستی محدود نشوند، می‌توانند منجر به حجم فایل بزرگی شوند، درحالی‌که فقط از زیرمجموعه کوچکی از نمادهای دردسترس استفاده می‌کنند.
With Font Awesome, you can either add icons by using a unicode
entity, like this HTML5 logo (<span class="awesome"></span>)
or by adding special classes to an <i> element like the CSS3
logo (<i class="fa fa-css3"></i>).
صدها قلم نماد رایگان و پولی دردسترس است، ازجمله Font Awesome، Pictos، و Glyphicons.
حتماً وزن درخواست HTTP اضافی و اندازه فایل را با نیاز به نمادها متعادل کنید. برای مثال، اگر فقط به چند نماد نیاز دارید، بهتر است از تصویر یا تصویر Sprite استفاده کنید.
بهینه‌سازی تصاویر برای بهبود عملکرد
تصاویر اغلب بیشترین بایت‌های بارگیری‌شده را تشکیل می‌دهند و همچنین اغلب مقدار قابل‌توجهی از فضای بصری صفحه را اشغال می‌کنند. درنتیجه، بهینه‌سازی تصاویر اغلب می‌تواند بیشترین صرفه‌جویی در بایت و بهبود عملکرد را برای وب‌سایت شما به‌همراه داشته باشد: هرچه بایت‌های کمتری برای بارگیری توسط مرورگر وجود داشته باشد، رقابت کمتری برای پهنای باند مشتری وجود دارد و مرورگر می‌تواند سریع‌تر همه دارایی‌ها را بارگیری و نمایش دهد.
خلاصه
- قالب تصویر را به‌طور تصادفی انتخاب نکنید—قالب‌های مختلف موجود را بشناسید و از قالبی استفاده کنید که مناسب‌تر است.
- ابزارهای بهینه‌سازی و فشرده‌سازی تصویر را در گردش کار خود بگنجانید تا اندازه فایل‌ها را کاهش دهید.
- با قرار دادن تصاویر پرکاربرد در تصاویر اسپرایت، تعداد درخواست‌های http را کاهش دهید.
- برای بهبود زمان بار کردن اولیه صفحه و کاهش سنگینی اولیه صفحه، تصاویر را فقط پس‌از پیمایش به نمای دید بار کنید.
قالب مناسب را انتخاب کنید
دو نوع تصویر وجود دارد که باید درنظر بگیرید:
تصاویر بُرداری
و تصاویر شطرنجی.
برای تصاویر شطرنجی، باید قالب فشرده‌سازی مناسب را نیز انتخاب کنید،
برای مثال: GIF، PNG، JPG.
تصاویر شطرنجی، مانند عکس‌ها و تصاویر دیگر، به‌صورت شبکه‌ای از نقطه‌ها یا پیکسل‌های مجزا نمایش داده می‌شوند. تصاویر شطرنجی معمولاً از دوربین یا اسکنر می‌آیند، یا می‌توانند در مرورگر با عنصر canvas ایجاد شوند. با بزرگ‌تر شدن اندازه تصویر، اندازه فایل نیز بزرگ‌تر می‌شود. وقتی تصاویر شطرنجی بزرگ‌تر از اندازه اصلی‌شان مقیاس‌بندی می‌شوند، تار می‌شوند زیرا مرورگر باید حدس بزند که پیکسل‌های ازدست‌رفته را چگونه پر کند.
تصاویر بُرداری، مانند نشان‌واره‌ها و طراحی خطی، با مجموعه‌ای از منحنی‌ها،
خطوط، اشکال، و رنگ‌های پرکننده تعریف می‌شوند. تصاویر بُرداری با برنامه‌هایی مثل Adobe Illustrator یا Inkscape ایجاد می‌شوند و در قالب بُرداری مثل SVG ذخیره می‌شوند. ازآنجایی‌که تصاویر بُرداری براساس
اشکال اولیه ساده ساخته می‌شوند، می‌توان آن‌ها را بدون افت کیفیت یا
تغییر در اندازه فایل مقیاس‌بندی کرد.
هنگام انتخاب قالب مناسب، مهم است که هم منشأ تصویر (شطرنجی یا برداری) و هم محتوا (رنگ‌ها، پویانمایی، نوشتار، و غیره) را درنظر بگیرید. هیچ قالبی برای همه انواع تصویر مناسب نیست و هرکدام نقاط قوت و ضعف خود را دارند.
هنگام انتخاب قالب مناسب، با این دستورالعمل‌ها شروع کنید:
- از
JPGبرای تصاویر عکاسی استفاده کنید. - از
SVGبرای هنر برداری و گرافیک‌های رنگی یکدست مانند نشان‌واره‌ها و هنر خطی استفاده کنید. اگر هنر برداری دردسترس نیست،WebPیاPNGرا امتحان کنید. - به‌جای
GIFازPNGاستفاده کنید زیرا رنگ‌های بیشتری را امکان‌پذیر می‌کند و نسبت‌های فشرده‌سازی بهتری ارائه می‌دهد. - برای پویانمایی‌های طولانی‌تر، از
<video>استفاده کنید که کیفیت تصویر بهتری ارائه می‌دهد و به کاربر امکان می‌دهد بازپخش را کنترل کند.
اندازه فایل را کاهش دهید
با «پس‌پردازش» تصاویر پس‌از ذخیره کردن، می‌توانید اندازه فایل تصویر را به‌طور قابل‌توجهی کاهش دهید. ابزارهای مختلفی برای فشرده‌سازی تصویر وجود دارد—پراتلاف و بی‌اتلاف، آنلاین، GUI، خط فرمان. درصورت امکان، بهتر است بهینه‌سازی تصویر را خودکار کنید تا به‌صورت توکار در گردش کارتان قرار گیرد.
ابزارهای متعددی وجود دارد که فشرده‌سازی بدون اتلاف بیشتری را روی فایل‌های JPG و PNG بدون تأثیر بر کیفیت تصویر انجام می‌دهند. برای JPG،
jpegtran یا
jpegoptim را امتحان کنید (فقط در Linux دردسترس است؛
با گزینه strip-all-- اجرا کنید). برای PNG،
OptiPNG یا
PNGOUT را امتحان کنید.
استفاده از تصویرهای اسپرایت
CSS spriting تکنیکی است که در آن تعدادی تصویر در یک تصویر «sprite sheet» ترکیب می‌شوند. سپس می‌توانید با مشخص کردن تصویر پس‌زمینه برای یک عنصر (برگه اسپرایت) به‌علاوه یک افست برای نمایش بخش صحیح، از تصاویر تکی استفاده کنید.
.sprite-sheet {
background-image: url(sprite-sheet.png);
width: 40px;
height: 25px;
}
.google-logo {
width: 125px;
height: 45px;
background-position: -190px -170px;
}
.gmail {
background-position: -150px -210px;
}
.maps {
height: 40px;
background-position: -120px -165px;
}
مزیت Spriting این است که تعداد بارگیری‌های لازم برای دریافت چندین تصویر را کاهش می‌دهد، درحالی‌که همچنان امکان ذخیره در حافظه پنهان را فراهم می‌کند.
بارکردن کُند را درنظر بگیرید
بار کردن کُند می‌تواند سرعت بار شدن صفحه‌های طولانی را که تصاویر زیادی در زیر خط تا دارند به‌طور قابل‌توجهی افزایش دهد، زیرا این تصاویر را یا درصورت نیاز یا پس‌از اتمام بار شدن و رندر شدن محتوای اصلی بار می‌کند. علاوه‌بر بهبود عملکرد، استفاده از بارکردن کُند می‌تواند تجربه‌های پیمایش بی‌پایان ایجاد کند.
هنگام ایجاد صفحه‌های پیمایش بی‌پایان مراقب باشید—چون محتوا وقتی بار می‌شود که نمایان شود، ممکن است موتورهای جستجو هرگز آن محتوا را نبینند. علاوه‌براین، کاربرانی که به‌دنبال اطلاعاتی هستند که انتظار دارند در پانویس ببینند، هرگز پانویس را نمی‌بینند زیرا محتوای جدید همیشه بار می‌شود.
کاملاً از تصاویر اجتناب کنید
گاهی اوقات بهترین تصویر اصلاً تصویر نیست. هرگاه ممکن بود، از قابلیت‌های بومی مرورگر برای ارائه عملکرد یکسان یا مشابه استفاده کنید. مرورگرها تصاویری تولید می‌کنند که قبلاً به عکس نیاز داشتند. این یعنی مرورگرها دیگر نیازی به بارگیری فایل‌های تصویری جداگانه ندارند و درنتیجه از ایجاد تصاویر با مقیاس نامناسب جلوگیری می‌شود. می‌توانید از یونیکد یا قلم‌های نماد ویژه برای رندر کردن نمادها استفاده کنید.
نوشتار را به‌جای جاسازی در تصاویر، در نشانه‌گذاری قرار دهید
هرجا ممکن باشد، نوشتار باید نوشتار باشد و در تصاویر جاسازی نشده باشد. برای مثال، استفاده از تصاویر برای عناوین یا قرار دادن اطلاعات تماس (مانند شماره تلفن یا نشانی) مستقیماً در تصاویر، مانع از کپی و جای‌گذاری اطلاعات توسط کاربران می‌شود؛ این کار اطلاعات را برای صفحه‌خوان‌ها غیرقابل‌دسترس می‌کند و واکنش‌گرا نیست. درعوض، نوشتار را در نشان‌گذاری‌تان قرار دهید و درصورت لزوم از قلم‌های وب برای دستیابی به سبک موردنظرتان استفاده کنید.
استفاده از CSS برای جایگزین کردن تصاویر
مرورگرهای مدرن می‌توانند از ویژگی‌های CSS برای ایجاد سبک‌هایی استفاده کنند که قبلاً به تصاویر نیاز داشتند. برای مثال: گرادیان‌های پیچیده را می‌توان بااستفاده از ویژگی background ایجاد کرد، سایه‌ها را می‌توان بااستفاده از box-shadow ایجاد کرد، و گوشه‌های گرد را می‌توان با ویژگی border-radius اضافه کرد.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet augue eu magna scelerisque porta ut ut dolor. Nullam placerat egestas nisl sed sollicitudin. Fusce placerat, ipsum ac vestibulum porta, purus dolor mollis nunc, pharetra vehicula nulla nunc quis elit. Duis ornare fringilla dui non vehicula. In hac habitasse platea dictumst. Donec ipsum lectus, hendrerit malesuada sapien eget, venenatis tempus purus.
<style>
div#noImage {
color: white;
border-radius: 5px;
box-shadow: 5px 5px 4px 0 rgba(9,130,154,0.2);
background: linear-gradient(rgba(9, 130, 154, 1), rgba(9, 130, 154, 0.5));
}
</style>
به‌خاطر داشته باشید که استفاده از این تکنیک‌ها به چرخه‌های پردازشی نیاز دارد که می‌تواند در تلفن همراه قابل‌توجه باشد. اگر بیش‌ازحد استفاده شود، هر مزیتی را که ممکن است کسب کرده باشید ازدست خواهید داد و ممکن است مانع عملکرد شود.