بهینه سازی تصاویر برای موبایل – تکنیک های متداول

[rezadehghan 1]

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

چه کسانی از تصاویر رسپانسیو استفاده می کنند؟

جستجویی در کدنویستی وب سایت های اصلی مانند 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 فرمت های مورد نیاز خود را بسازید. می توانید اکثر اشکال را با این روش ساخته و هر تغییری که خواستید را بر روی آنها اعمال کنید، یا به آنها افکت های مورد نظر خود را بدهید.

 

تکنیک های طراحی برای افزایش سرعت بارگذاری صفحه

 

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

Raluca Budiu می گوید اطمینان حاصل کنید که ابتدا موارد ضروری بارگذاری می شوند:

“در زمان لود شدن صفحه، اطمینان حاصل کنید که ابتدا متن بارگذاری می شود. به این ترتیب کاربران می توانند شروع به خواندن محتوا کنند. وقتی تصاویر بارگذاری می شوند، محتوایی که پیش از این بارگذاری شده است را تغییر ندهید. این کار باعث می شود جای آنها در صفحه تغییر کند و گاهی اوقات کاربران بر روی لینک اشتباه کلیک می کنند، چرا که لینک مورد نظر آنها به طور غیرمنتظره ای محو شده است.”

میان زمان بارگذاری مورد انتظار کاربر (perceived load time) و زمان بارگذاری واقعی (actual load time) تفاوت وجود دارد. مهم ترین مسئله برای کاربر این است که محتوایی که می خواهند ببینند، در دسترسشان باشد. کاربران دوست ندارند به یک صفحه خالی زل بزنند و منتظر باشند مرورگر تصاویری را بارگذاری کند که هیچوقت قرار نیست ببینند.

سه تکنیک متداول برای انجام این کار وجود دارد. Robert Gaines، توسعه دهنده وب و اپلیکیشن می گوید:

1. بارگذاری با تاخیر(Deferred loading): در این مدل بارگذاری، با استفاده از JavaScript، بارگذاری تصاویر و دیگر موارد موجود در صفحه، تا زمانی که محتوای اصلی صفحه بارگذاری نشده است، متوقف می شود. بارگذاری با تاخیر، مدت زمان لازم برای بارگذاری محتوای ثانویه را کاهش می دهد، همچنین نیاز به کوچک کردن تصاویر را نیز کم می کند.
2. بارگذاری تنبل (Lazy Loading): عناصر صفحه را تنها در زمان نیاز بارگذاری می کند. بنابراین ابتدا محتوای محلی که کاربر مشاهده می کند بارگذاری می شود، بعد همینطور که کاربر به پایین صفحه می آید، محتوای پایین صفحه نیز بارگذاری می شود. این روش بیشتر در گالری تصاویر مثل تصویر بندانگشتی محصولات در سایت های خرده فروشی استفاده می شود. تصاویر بزرگ نیز تنها زمانی بارگذاری می شوند که بر روی آنها کلیک شود.
3. بارگذاری پله پله تصاویر (Progressive image loading): در این شکل بارگذاری، ابتدا تصاویر با کیفیت کم بارگذاری می شوند و بعد از این که بارگذاری محتوای ثانویه پایان یافت، این تصاویر با تصاویر باکیفیت جایگزین می شوند. بارگذاری پله پله تصاویر عملکرد صفحه را با استفاده از ویژگی های بصری متعادل می کند. بر خلاف بارگذاری با تاخیر، در این نوع بارگذاری کاربران منتظر نمی مانند تا تصاویر بعد از محتوای اولیه بارگذاری شوند و از همان ابتدا تصاویر را می بینند.

ابزارهایی مانند Photoshop امکان ذخیره تدریجی فرمت های JPEG یا PNG را نیز می دهد که در نتیجه به روشی که توضیح داده شد، بارگذاری می شوند.

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

منبع : برترین سایت آموزش سئو ایران ، نیوسئو ، امیر قمصری