اشتباهات رایج در بهینه سازی تصاویر وب سایت | گستران وب

اشتباهات رایج در بهینه سازی تصاویر وب سایت

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

چرا بهینه سازی تصاویر سایت مهم است؟

دلایل بسیاری وجود دارد که چرا باید از تصاویر در نوشته ها و مقالات خود استفاده کنیم:

  • – تصاویر بهترین محرک جهت دعوت کاربران برای انجام عملی است. با استفاده از تصاویر می توانید بازدید کنندگان را به عضویت در خبرنامه سایت، اشتراک گذاری مقالات در شبکه های اجتماعی و یا خرید محصول تشویق کنید.
  • – تصاویر باعث افزایش ارتباط نویسنده با خواننده سایت می شود.
  • – تصاویر می توانند به راحتی مفهوم را به مخاطب برسانند.
  • – و…

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

۱۰ اشتباه رایج در بهینه سازی تصاویر

با اینکه اکثر سایت از تصاویر عالی استفاده می کنند اما اغلب مشکلات رایجی در آنها دیده می شود که می توان با رفع کردن آنها، سایت را برای کاربران و حتی موتورهای جستجوگر بهینه سازی کرد. در زیر به ۱۰ مورد این موارد اشاره شده است، با ما همراه باشید.

۱- استفاده از تصاویر با ابعاد بزرگ

فرض کنید که می خواهید برای صفحه افراد تیم از تصویر شخصی هریک استفاده کنید که سایز مورد نیاز ۱۵۰× ۱۵۰ پیکسل است، اما از یک تصویر چهره ای که ۵ مگابایت حجم دارد استفاده می کنید.
مشکل را متوجه شدید؟ برخی افراد تصاویر ۵ مگابایتی برا به طور مستقیم در سایت آپلود می کنند! پوسته وردپرس شما این تصویر را همانگونه استفاده خواهد کرد و تنها به مرورگر اعلام خواهد کرد که آن را در سایز ۱۵۰× ۱۵۰ پیکسل نشان دهد. در حقیقت مروگر تنها ۰٫۰۰۴۵% از تصویر اصلی را نشان خواهد داد!
با این کار شما پهنای باند خودتان و بازدید کنندگان را بیهوده اتلاف خواهید کرد. البته در این حالت باید فضای بیشتری نیز برای سایت خود تهیه کنید که می تواند باعث افزایش قیمت نگه داری سایت شود و البته سرعت بارگزاری سایت کاهش پیدا کرده و بازدید کنندگان مجبور خواهند بود تا زمان بیشتری را صبر کنند. بنابراین، همیشه تصاویر را به اندازه ای که واقعا مورد نیاز است کوچک کرده و سپس آنها را جهت استفاده در سایت آپلود کنید.

۲- انتخاب فرمت نادرست برای تصاویر

IMG_15052013_144347

فرمتی که از آن برای تصاویر استفاده می شود نقش مهمی را در بهینه سازی ایفا می کند. به عنوان یک قانون کلی برای تصاویر وکتور بهتر است از فرمت PNG و برای سایر تصاویر از فرمت JPG استفاده شود. از فرمت GIF تنها برای تصاویر متحرک مانند بنرهای تبلیغاتی استفاده کنید.

۳- عدم استفاده از حالت Progressive

05.01.progressive-base 05.02.progressive-example

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

۴- استفاده نکردن از Lazy Load

منظور از Lazy Load نمایش با تاخیر است. به عبارتی در این حالت تصاویر تا زمانی افراد به ناحیه ای که تصویر در آن قرار دارد اسکرول نکرده باشند، تصاویر بارگزاری نخواهند شد. این روش را می توان از جمله روش های بسیار موثر در کاهش مصرف منابع سایت و البته افزایش سرعت سایت دانست. برای فعال سازی این قابلیت در وردپرس می توانید از افزونه BJ Lazy Load استفاده کنید.

۵- عدم استفاده از شبکه تحویل محتوا (CDN)

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

۶- عدم استفاده از خصیصه alt برای تصاویر

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

۷- کم حجم نکردن تصاویر

عکس های کم حجم شده حدود ۴۰% درصد از حالت عادی سبک‌تر هستند. که به معنای کاهش مصرف پهنای باند و افزایش سرعت است. با اینکه ابزارهای آنلاین زیادی برای بهینه سازی تصاویر وجود دارند، اما اگر بخواهید این کار توسط خود وردپرس صورت بگیرد می توانید از افزونه های موجود برای این کار استفاده کنید که پیشنهاد ما WPSmush.it است.

۸- تصاویر ریسپانسیو

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

۹- توضیحات تصویر

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

۱۰- نام فایل تصویر

نام فایل تصاویر را با کلمات کلیدی مرتبط جایگزین کنید. این مورد اغلب توسط مدیران سایت ها نادیده گرفته می شود، بنابراین شما از این دسته افراد نباشید و نام تصاویر را هم بهینه کنید. با انجام دادن این موارد می توانید بازدید سایت خود از قسمت جستجوهای تصویری در موتورهای جستجو را نیز افزایش دهید.

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

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