، تهران , (اخبار رسمی): در این مقاله نیوسئو، امیر قمصری بهینه سازی تصاویر برای موبایل را به همراه سه تکنیک متداول شرح می‌دهد.
بهینه سازی تصاویر برای موبایل، بر روی افزایش سرعت بارگزاری سایت در تلفن‌های همراه تاثیر مستقیم دارد. دوستان عزیز نیوسئو، با آموزش سئو تصاویر به راحتی می‌توانید موجب افزایش ترافیک سایت خود شوید. در این مقاله به بررسی فرمت تصاویر می‌پردازیم و چند تکنیک طراحی سایت برای افزایش سرعت بارگزاری صفحه معرفی می‌کنیم.
چه کسانی از تصاویر رسپانسیو استفاده می‌کنند؟
جستجویی در کدنویستی وب‌سایت‌های اصلی مانند Amazon ،Facebook و BBC نشان می‌دهد که هیچکدام هنوز از عنصر picture (که در کتاب آموزش سئو سایت توضیح داده شد) برای ارائه تصاویر ریسپانسیو استفاده نمی‌کنند.
آیا انجام چنین کاری برای این وب‌سایت‌ها سودمند است؟ ارائه تصاویر مختلف برای هر پلتفرم، چند مزیت در بر دارد:
به وب‌سایت امکان نمایش تصاویر بزرگتر و با رزولوشن بالاتر را در دسکتاپ می‌دهد.
اندازه تصاویر و وزن کلی صفحه را کاهش می‌دهد و به همین جهت نیز باعث افزایش سرعت بارگذاری صفحات در موبایل می‌شود.
به سایت موبایلی امکان نمایش تصاویر زوم شده را می‌دهد.
خرده‌فروشان می‌توانند تصاویر Hero موبایل فرندلی را بر روی موبایل نمایش دهند و بر روی نمایشگرهای بزرگ هم اندازه‌های طبیعی تصاویر را نمایش دهند.
پیدا کردن بهترین فرمت برای تصاویر
طبق آمار httpArchive، متداول ترین فرمت‌هایی که برای سایت‌های موبایلی یا موبایل فرندلی استفاده می‌شوند، به ترتیب فرمت JPEG، فرمت PNG، فرمت GIF و فرمت 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، توسعه‌دهنده وب و اپلیکیشن می‌گوید:
بارگذاری با تاخیر(Deferred loading): در این مدل بارگذاری، با استفاده از JavaScript، بارگذاری تصاویر و دیگر موارد موجود در صفحه، تا زمانی که محتوای اصلی صفحه بارگذاری نشده است، متوقف می‌شود. بارگذاری با تاخیر، مدت زمان لازم برای بارگذاری محتوای ثانویه را کاهش می‌دهد، همچنین نیاز به کوچک کردن تصاویر را نیز کم می‌کند.
بارگذاری تنبل (Lazy Loading): عناصر صفحه را تنها در زمان نیاز بارگذاری می‌کند. بنابراین ابتدا محتوای محلی که کاربر مشاهده می‌کند بارگذاری می‌شود، بعد همینطور که کاربر به پایین صفحه می‌آید، محتوای پایین صفحه نیز بارگذاری می‌شود. این روش بیشتر در گالری تصاویر مثل تصویر بندانگشتی محصولات در سایت‌های خرده‌فروشی استفاده می‌شود. تصاویر بزرگ نیز تنها زمانی بارگذاری می‌شوند که بر روی آن‌ها کلیک شود.
بارگذاری پله‌پله تصاویر (Progressive image loading): در این شکل بارگذاری، ابتدا تصاویر با کیفیت کم بارگذاری می‌شوند و بعد از این که بارگذاری محتوای ثانویه پایان یافت، این تصاویر با تصاویر باکیفیت جایگزین می‌شوند. بارگذاری پله پله تصاویر عملکرد صفحه را با استفاده از ویژگی‌های بصری متعادل می‌کند. بر خلاف بارگذاری با تاخیر، در این نوع بارگذاری کاربران منتظر نمی‌مانند تا تصاویر بعد از محتوای اولیه بارگذاری شوند و از همان ابتدا تصاویر را می‌بینند.
ابزارهایی مانند Photoshop امکان ذخیره تدریجی فرمت‌های JPEG یا PNG را نیز می‌دهد که در نتیجه به روشی که توضیح داده شد، بارگذاری می‌شوند.
این مقاله آموزش تصاویر رسپانسیو، برای توسعه دهنده‌های وب است، اما همه می‌توانند از آن استفاده کنند. د
علاقه‌مندان به کسب اطلاعات بیشتر و مطالعه مطالب امیر قمصری می‌توانند به سایت نیوسئو مراجعه کنند.
### پایان خبر رسمی