اخبارو مقالات

تصاویر خود را بهینه کنید(قسمت 3)

ساخت برای تلفن همراه

در دنیای امروز ، اگر در مورد راه اندازی یک طراحی وب سایت ارزان جدی هستید ، نادیده گرفتن کاربران تلفن همراه گناه است. داده ها حاکی از آن است که تقریباً 60٪ از ترافیک جهانی از دستگاه های تلفن همراه ناشی می شود. بله ، در حالی که تلفن های همراه قدرتمندتر شده اند و شبکه های تلفن همراه بهتر شده اند ، داده ها نشان می دهد که سرعت داده های تلفن همراه هنوز بسیار کندتر از سرعتهای باند پهن هستند. کشورها یا مناطقی در کشورهایی وجود دارند که اتصال داده تلفن همراه پوسته پوسته است. بنابراین ، هنگام طراحی تجارب وب برای موبایل ، باید بسیار مراقب باشید.

 

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

 

ویژگی `sizes` اطلاعاتی در مورد طرح بندی تصویر ، ویژگی` srcset` لیست تصاویر را با عرض واقعی مشخص شده در برابر هر URL ارائه می دهد.

 

عامل دیگری که با دستگاه های تلفن همراه به تصویر می کشد ، نسبت Pixel Ratio یا مقدار DPR است. تلفن های همراه مدرن دارای صفحه نمایش های با تراکم بالا هستند که پیکسل های بیشتری را در همان اینچ مربع بسته بندی می کنند.

تصویری که در دستگاه های معمولی خوب به نظر می رسد ، در صفحه نمایش با تراکم بالا کمی تار به نظر می رسد. یک راه حل برای این بارگذاری یک تصویر با اندازه 2 برابر در صفحه های دارای DPR 2 ، یک تصویر 3 برابر روی صفحه با DPR 3 و تصویر معمولی یک تصویر با اندازه 1 برابر در دستگاه های دیگر است. همانطور که در زیر نشان داده شده است ، می توان با استفاده از برچسب عکس ریسپانسیو نیز این کار را انجام داد.

 

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

 

ImageKit پارامترهای DPR مبتنی بر URL به همراه پارامترهای تغییر اندازه و برش را در اختیارتان قرار می دهد و همچنین از نکات مشتری پشتیبانی می کند که استفاده از تصاویر پاسخگو و ارائه تصاویر عالی در دستگاه ها را بسیار آسان می کند.