بهينه سازي تصاوير براي موبايل – تكنيك هاي متداول

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

چه كساني از تصاوير رسپانسيو استفاده مي كنند؟

جستجويي در كدنويستي وب سايت هاي اصلي مانند 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 را نيز مي دهد كه در نتيجه به روشي كه توضيح داده شد، بارگذاري مي شوند.

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

منبع : نيوسئو - برترين سايت آموزش سئو ايران