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

ابزارهای فشرده سازی تصاویر,اهمیت بهینه سازی تصاویر,اهمیت سئو عکس
میزان اهمیت : معمولی
حتما در کانال تلگرام نیوسئو عضو شوید (در کانال محتوایی هست که در سایت نیست!) مدت زمان تخمینی مطالعه این مقاله 10 دقیقه می باشد.
لطفا به این مطلب رای دهید
[رای ها : 4 امتیاز : 5]

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

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

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

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

ابزارهای فشرده سازی تصاویر,اهمیت بهینه سازی تصاویر,اهمیت سئو عکس

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

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

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

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

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

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

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

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

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

سئو تصاویر,طراحی وب سایت ریسپانسیو

دوست عزیزم، جهت مشاهده ادامه این مقاله بسیار مفید، لطفا ایمیل خود را به دقت در فیلد ذیل وارد نمایید.* خیالتون راحت ! از ایمیل شما به صورت محرمانه نگهداری میشه و فقط مقالات برتر نیوسئو براتون ایمیل میشه.

لطفا ایمیل خود را به دقت وارد نمایید :

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *