بهینه سازی تصاویر برای موبایل - طراحی ریسپانسیو

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

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

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

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

مشکل سئو تصاویر این است که قانون سرسخت و قاطعی وجود ندارد. بهینه سازی تصاویر همیشه باید تعادلی را میان تجربه کاربری (User Experience)، جذاب بودن و عملکرد صفحه حفظ کند.

RalucaBudiu، مدیر مطالعات در گروه Nielsen Norman، می گوید:

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

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

قانون نوشته شده و آماده ای برای اندازه تصاویر موبایلی وجود ندارد و بیشتر باید با توجه به کیفیت و اندازه صفحه تصمیم گیری کرد. اما می توان به 100 تا از معروف ترین سایت ها رجوع کرد و از تصاویر آن الگو گرفت. طبق httpArchive، متوسط اندازه تصاویر JPG شامل 29KB و متوسط اندازه تصاویر PNG هم 16KB می باشد.

بخشی از کاهش حجم تصویر، مربوط به کاهش اندازه تصویر و رزولوشن آن (تعداد پیکسل ها) است و بخشی دیگر نیز درباره فشرده سازی تصاویر است. برخی ابزارهای خلاقانه، مانند Photoshop، فشرده سازی نیز انجام می دهند، اما معمولا این میزان فشرده سازی کافی نیست. مخصوصا در رابطه با تصاویری از نوع PNG.

امروزه در فضای مجازی تعداد زیادی ابزار جهت فشرده سازی وجود دارند که به کیفیت عکس لطمه ای وارد نمی کنند و باعث ارتقای کیفیت عکس می شوند. به طور مثال تصویر اصلی که در صفحه اصلی (Home Page) وب سایتتان قرار می دهید را می توانید با وب سایت ها یا ابزارهای فشرده سازی تصاویر مانند TinyPNG فشرده نمایید.

چند ابزار وجود دارد که می تواند تصاویر را به صورت تکی، یا دسته ای، به اندازه کافی فشرده نماید. می توانید برای این کار از وب سایت ها یا ابزارهای فشرده سازی تصاویر مانند TinyPNG استفاده نمایید. همچنین برای انجام مقایسه بین ابزارهای فشرده سازی اصلی، می توانید GitHub را مشاهده نمایید.

آیا باید از تصاویر با اندازه های مختلف برای موبایل، تبلت یا دسکتاپ استفاده کرد؟

وقتی وب سایت های جداگانه ای برای موبایل، تبلت یا دسکتاپ طراحی می کنید، چه این کار را با URLهای اختصاصی (site.com و m.site.com) انجام می دهید، چه با سایت های مختلف در یک adaptive web design) URL) الزامی است که این تصاویر برای بزرگترین دستگاه اندازه مناسبی داشته باشند.

در طراحی وب سایت ریسپانسیو (Responsive Web Design)، موقعیت تصاویر زیاد روشن نیست. در RWD قانون اصلی، ارائه وب سایتی مشابه برای تمامی دستگاه ها است. با استفاده از CSS می توان بسته به قابلیت های دستگاه و اندازه صفحه، محتوا را شکل داد و قالب بندی کرد.

البته، این بدین معنی نیست که الزاما وب سایت ها باید یک سایز مشخص از تصویر را برای تمامی دستگاه ها انتخاب کنند. Alex Painter، مشاور عملکرد وب در NCC Group می گوید:

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

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

البته دیگر نیازی به انجام این کار نیست. به کمک Responsive Images Community Group، ساخت تصاویر جایگزین برای دستگاه های مختلف شامل تصاویری که برای صفحات با اندازه های مختلف مناسب باشند، رزولوشن مناسبی داشته باشند(از نظر تعداد پیکسل ها) و برای قابلیت های دستگاه نیز مناسب باشند را برای توسعه دهندگان ساده تر کرده است.

HTML یک صفحه وب، به مرورگر می گوید کدام یک از این تصاویر را برای هر صفحه انتخاب کند و با چه عرضی، تصاویر نمایش داده شود.

پیش از این برخی توسعه دهندگان از JavaScript استفاده می کردند تا استفاده از تصاویر متفاوت را مشخص کنند. اما ویژگی picture می تواند کدنویسی ها و درخواست های اضافی که سرعت بارگزاری صفحه را کاهش می دهد، حذف کند.

Alex Painter در این زمینه می گوید: 

" ارائه تصویر مناسب برای هر دستگاه در حال حاضر زیاد سخت نیست. یک مدت برای تصاویر پس زمینه از مدل CSS استفاده کردیم، اما اخیرا، تصاویری که در HTML می آیند، بیشتر مشکل ساز هستند. خصوصیت ریسپانسیو بودن با عنصر<picture> در srcset (مجموعه ای از سورس های تصاویر جایگزین) این امکان را فراهم کرده است که کد بتواند تشخیص دهد چه تصاویری باید برای چه عرضی استفاده شود (یا به مرورگر این امکان را می دهد که مناسب ترین گزینه را از میان تصاویر موجود انتخاب نماید). در حال حاضر مرورگرها به خوبی از این خصوصیت پشتیبانی می کنند و توسعه دهندگان باید بیشتر از JavaScript، از این ویژگی استفاده کنند تا به هدف مطلبوب خود برسند."

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