 |
چه کسانی از تصاویر رسپانسیو استفاده می کنند؟
جستجویی در کدنویستی وب سایت های اصلی مانند Amazon ،Facebook و BBC نشان می دهد که هیچکدام هنوز از عنصر picture (که در مقاله گذشته توضیح داده شد) برای ارائه تصاویر ریسپانسیو استفاده نمی کنند.
آیا انجام چنین کاری برای این وب سایت ها سودمند است؟ ارائه تصاویر مختلف برای هر پلتفرم، چند مزیت در بر دارد:
به وب سایت امکان نمایش تصاویر بزرگتر و با رزولوشن بالاتر را در دسکتاپ می دهد.
اندازه تصاویر و وزن کلی صفحه را کاهش می دهد و به همین جهت نیز باعث افزایش سرعت بارگذاری صفحات در موبایل می شود.
به سایت موبایلی امکان نمایش تصاویر زوم شده را می دهد. (به تصویر crop شده سگ در پایین توجه کنید).
خرده فروشان می توانند تصاویر Hero موبایل فرندلی را بر روی موبایل نمایش دهند و بر روی نمایشگر های بزرگ هم اندازه های طبیعی تصاویر را نمایش دهند.
استفاده از فونت آیکن,افزایش سرعت بارگذاری صفحات,بهترین فرمت عکس برای سایت
پیدا کردن بهترین فرمت برای تصاویر
طبق آمار httpArchive، متداول ترین فرمت هایی که برای سایت های موبایلی یا موبایل فرندلی استفاده می شوند، به ترتیب 46% فرمت JPEG، 28% فرمت PNG، 23% فرمت GIF و 1% فرمت SVG است.
استفاده از فرمت نادرست تصویر می تواند اندازه فایل را افزایش داده و زمانی که می خواهیم از تصاویر در مقیاس های مختلف استفاده کنیم، بر کیفیت آنها تاثیر می گذارد.
دو مدل تصویر در وب داریم: raster و vector. تصاویر مدل اول از نقطه ها تشکیل می شوند (مانند یک تصویر دیجیتالی)، در حالی که تصاویر مدل دوم از خطوط و اشکال تشکیل می شود. فرمت های JPEG، PNG و GIF از مدل raster هستند. فرمت SVG مدل vector است. SVG فرمت جدیدتری است که هنوز زیاد از آن استفاده نمی شود، اما Google و Udacity استفاده از آن را برای طراحی ریسپانسیو سایت ها پیشنهاد می کنند.
هرکدام از این فرمت ها مزایا و معایب مخصوص به خودشان را دارند، و هر طراحی هم نظر خاصی دارد و فرمت خاصی را می پسندد. شما باید برای انتخاب فرمت، سیاست های وب سایت خود را بررسی کنید، اما به طور کلی:
فرمت JPEG بیشتر برای گذاشتن عکس در وب استفاده می شود.
استفاده از فرمت GIF برای گذاشتن انیمیشن، عکس های ساده، آیکون ها و لوگوها مناسب است.
فرمت PNG برای عکس های باکیفیت تر، لوگوها، آیکون ها و دیگر تصاویر و عکس هایی که در آنها از افکت استفاده شده است به کار می رود.
SVG برای عکس ها، لوگوها و سربرگ صفحات به کار می رود.
جایگزین تصاویر سنتی
صفحات وب پر از تصاویر کوچک هستند، تصاویری مثل آیکون ها و دکمه ها. اگر هرکدام از این تصاویر با فرمت های تصویری خاصی از قبیل GIF/PNG/JPEG ساخته شده باشند، اندازه صفحه افزایش پیدا می کند چرا که برای بارگذاری هرکدام از این تصاویر، نیاز به ارسال درخواست جداگانه ای از جانب مرورگر است، که همین مسئله نیز به افزایش زمان بارگذاری صفحه کمک می کند.
سه روشی که به کمک آنها می توانید اندازه صفحات و تعداد درخواست ها را کاهش دهید، عبارت اند از:
فرمت CSS: این فرمت مجموعه ای از عکس های کوچک را به یک فایل CSS واحد تبدیل می کند. توجه داشته باشید که فایل های CSS حجیم که در آن از تصاویر زیاد و با بزرگی استفاده شده باشد، می تواند تاثیر برعکس بر روی سرعت سایت داشته باشد.
فونت آیکون ها: به شکل مجموعه ای از آیکون ها است که در قالب یک فایل واحد گنجانیده می شود.
اشکال CSS: اشکالی هستند که به جای روش های سنتی، با استفاده از فرمت CSS ساخته می شوند.
Mike D’Agruma به عنوان یک توسعه دهنده وب می گوید:
به منظور کاهش اندازه فایل، من معمولا از مجموعه آیکون های محبوب و بزرگ دوری می کنم و با استفاده از Fontastic فونت های آیکون مورد علاقه خودم را می سازم. این روش از چند جهت بسیار خوب است:
1) از آنجا که من تنها از تعداد کمی آیکون های خاص استفاده می کنم، اندازه فایل نهایی به میزان قابل توجهی کوچکتر خواهد شد.
2) این آیکون ها با فرمت SVG ساخته می شوند، که می توان اطمینان حاصل کرد برای همه دستگاه ها مناسب هستند.
3) این روش بسیار انعطاف پذیر است، چرا که آیکون های فونت کاملا با CSS قابل تغییر هستند.
یک راه دیگر برای آنکه بتوانید فایل های با اندازه مناسب بسازید که برای بارگذاری آنها زمان زیادی نیز صرف نشود، این است که با استفاده از فرمت CSS فرمت های مورد نیاز خود را بسازید. می توانید اکثر اشکال را با این روش ساخته و هر تغییری که خواستید را بر روی آنها اعمال کنید، یا به آنها افکت های مورد نظر خود را بدهید.
http://www.newseo.ir/seo-learning/mobile-image-optimization-common-techniques
نظرات شما عزیزان:
:: برچسب‌ها: بهینه سازی,
خبرنامه وب سایت: