چطور بهینه سازی تصاویر سایت خود را بررسی کنیم

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

این مطلب چه سودی برای شما دارد؟

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

چه چیز هایی را در این مطلب یاد نمی گیرید؟

ما در این مطلب وارد موارد پیچیده و تکنیکی در مورد هر بخش از بهینه سازی  تصاویر نمی شویم و موضوع های تخصصی مربوط به این قضیه را بررسی نمی کنیم و این مسئله را برای بعد می گذاریم.

قبل از اینکه سراغ بررسی بهینه سازی تصاویر وب سایت برویم، بگذارید اول از همه به این سوال جواب دهیم: چرا بهینه سازی تصاویر برای ما مهم است؟

1. تاثیر گذاری تصاویر در وب سایت ها رو به افزایش است


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

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

چطور بهینه سازی تصاویر سایت خود را بررسی کنیم 

تصویر دوم نسخه ی جدید سایت مک دونالد است و همانطور که می بینید از عکس و ویدیو های بیشتری در طراحی آن استفاده شده است

چطور بهینه سازی تصاویر سایت خود را بررسی کنیم 

 

2. موبایل ها هر روز بیشتر از دیروز در فضای وب دیده می شوند.

در سال 2015 گوگل اعلام کرد که در 10 کشور، آمار جستجو های انجام شده با موبایل بیشتر از سایر ابزار ها بوده و امروز یعنی در سال 2018  می بینیم که حدود 52 درصد از ترافیک ورودی وب سایت ها از طرف موبایل هاست، این آمار به ما نشان می دهد که موبایل ها در دنیای اینترنت در حال پیشترفت هستند. از آنجایی که بارگذاری وب سایت روی موبایل ها سرعت کمتری دارد و از طرف دیگر سرعت بارگذاری وب سایت برای شما بسیار مهم است؛ پس باید مطمئن شوید که عکس های وب سایت بهینه سازی شده و سرعت بارگذاری را کند نمی کند.

3. سرعت سایت برای سئو و تجربه کاربری بسیار مهم است.


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

4. استفاده از تصاویر بهینه سازی شده هزینه بر است.


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

5. بهینه سازی تصاویر = بهینه سازی کلمات کلیدی


اگر خیلی دوست دارید که محتوای تولیدی بر روی وب سایت شما کاملا برای کلمات کلیدی مورد نظرتان بهینه سازی شده باشد؛ پس شما نباید (و اصلا نمی توانید) اهمیت بهینه سازی تصاویر را انکار کنید.

خب وقت این شده که به سراغ بررسی سئو تصاویر برویم

مرحله 1: یک فهرست از تصاویر خود بسازید


به یاد داشته باشید قبل از این که بخواهید مشکلات مربوط به بهینه سازی تصاویر را تشخیص دهید؛ شما باید یک فهرست از تصاویر موجود روی وب سایت خود تهیه کنید. ابزار پیشنهادی پونه مدیا برای انجام این کار Screaming Forg است.

چطور با استفاده از Screaming Forg یک فهرست برای تصاویر خود بسازیم؟

این ابزار به شما کمک می کند تا به سادگی و به سرعت یک فهرست از عکس های موجود بر روی سایت خود بسازید.

اول از همه مطمئن شوید که Screaming Forg خود را بر روی حالت "Spider" بگذارید، تنظیمات استاندارد این برنامه مناسب است و نیاز نیست که خود را درگیر تنظیمات آن کنید. بعد از آن آدرس سایت خود را وارد می کنید و می توانید Crawl کردن را شروع کنید.

 چطور بهینه سازی تصاویر سایت خود را بررسی کنیم

وقتی عمل خزش یا همان Crawl به پایان رسید بر روی گزینه ی Image کلیک کنید تا فهرست کامل تصاویر وب سایت خود را ببینید.

 چطور بهینه سازی تصاویر سایت خود را بررسی کنیم

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


Screaming Frog
تمام تصاویر روی  سایت شما و عکس هایی که از سایت دیگران استفاده کرده اید را در این گزارش  به شما نشان می دهد. این گزارش شامل تصاویر موجود بر روی دامنه ی شما و دامنه ی دیگران است. استفاده از تصویر، از یک منبع بیرونی یا خارجی دو مسئله با خود به همراه دارد:

1-   عکس ها و کد های مربوط به تصاویر استفاده شده در سایت شما، از سایت دیگران است

2-    تصاویر وب سایت شما با استفاده از یک  سیستم CND نمایش داده می شوند.

اگر از سیستم CND استفاده می کنید که لازم نیست نگران چیزی باشید. اما در صورتی که میخواهید تعداد زیادی از عکس هایی که روی وب سایت دیگری هستند را روی سایت خود نمایش دهید، باید توجه داشته باشید که عکس هایی که استفاده می کنید اورجینال نیستند؛ پیشنهاد ما به شما این است که به دنبال راهی باشید که کیفیت تصاویر خود را ارتقاء دهید و به فکر تهیه تصاویر اورجینال برای سایت خود باشید.

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

محدودیت های Screaming frog


Screaming frog
 فقط عکس هایی که در کد HTML هستند را شناسایی و فهرست بندی می کند و به تصاویر در کد CSS اهمیتی نمی دهند. معمولا عکس های پس زمینه  که در هر صفحه از  سایت نمایش داده میشوند (مواردی مانند لوگو، تصاویر بنر و آیکن های منو) با کد CSS به نمایش درآمدند و این نکته بسیار ضروری است که از وجود آنها غافل نشویم. 

مرحله 2: مشکلات بهینه سازی را تشخیص دهید


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

این مرحله با دو فاکتور مهم در سرعت بارگذاری سایت شروع می  کنیم، یعنی سایز و فرمت تصاویر!

اول : آیا به عکس نیاز دارید؟


در این مرحله اگر تشخیص دادید که با CSS و یا استفاده از فونت ها  می توانید تجربه ی کاربری خوبی در مخاطب بوجود بیاورید؛ پس دیگر نیازی به استفاده از عکس ندارید.

فرمت صحیح را برای تصاویر انتخاب کنید.


دو فرمت اولیه برای تصاویر وجود دارد: Vector و Raster. این که چه فرمتی برای تصویر خود انتخاب کنید، بستگی به این دارد که می خواهید کیفیت تصاویر در چه حدی باشد.

تصاویری که دارای شکل های ساده و جزئیات کم هستند را می توانید درفرمت Vector و عکس هایی که دارای جزئیات بالا و شکل های پیچیده هستند را باید با فرمت Raster ذخیره کنید.

یکی از راه های مشخص کردن فرمت تصاویر وب سایت، استفاده از ستون Content در لیستی است که Screming Frog در اختیار شما قرار داده.
  

کارایی تصاویر را بررسی کنید.


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

وقتی بهترین فرمت را برای تصاویر خود انتخاب کردید؛ وقت آن است که عوامل دیگری که که ممکن است تاثیر منفی روی کار شما داشته باشند را بررسی کنید. این عوامل عبارتند از:

  • بایت بر پیکسل (byte per  pixle)
  • تمام پیکسل ها (total pixle)

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

 

بهینه سازی بایت بر پیکسل

 

بگذارید دوباره به فهرست تصاویری که Screaming Frog در اختیار ما گذاشته است نگاهی بیاندازیم، استاندارد Screaming Frog برای هر تصویر نهایتا زیر 100kb است. اگر حجم همه ی عکس های شما زیر 100kb باشد شما مشکلی ندارید و همه چیز درست است.

ولی ما به دنبال "درست" نمی گردیم؛ ما به دنبال بهینه سازی هستیم.

نظرتان را جع به یک حجم کمتر مثلا 75 kb چطور است؟ به نظر ما این عدد خوبی است و پیشنهاد می کنیم که تنظیمات Scream Frog خود را بر روی 75kb  قرار دهید.  حجم مربوط به Screaming frog را می توانید با روش زیر روی مقدار دلخواه خود تنظیم کنید:
Configuration >>> Spider>>> preferences

چطور بهینه سازی تصاویر سایت خود را بررسی کنیم

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

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

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


بهینه سازی بایت بر پیکسل یعنی پایین آوردن حجم عکس و بهینه سازی تمام پیکسل ها به معنی تغییر ابعاد عکس است.

 

سایز طبیعی و سایز نمایشی

در حالت ایده ال سایز طبیعی تصویر باید با سایز نمایشی در سایت متناسب باشد.
این کار باعث می شود که تصویر شما از نظر ظاهری با عقل جور دربیاید و عناصر داخل عکس با هم متناسب باشد. (مثلا عکس یک نفر به خاطر تغییر سایز پهن یا باریک نشود و حالت طبیعی خود را حفظ کند)
شاید به نظرتان این یک موضوع بسیار پیش پا افتاده بیاید؛ ولی یکی از مشکلاتی که در بهینه سازی تصاویر زیاد دیده می شود همین است.

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


یکی دیگر از راه های کاهش تعداد کل پیکسل ها این است، عکس را برش دهیم، چون که همیشه همه ی پیکسل های یک عکس به درد ما نمی خورد، برای همین میتوان طوری عمل برش را انجام داد که علاوه بر کم کردن تعداد پیکسل ها، تصویر مفید تر به نظر برسد. به عنوان مثال به دو تصویر زیر نگاه کنید.
تصویر برش داده نشده (بهینه سازی نشده)

 چطور بهینه سازی تصاویر سایت خود را بررسی کنیم

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

 چطور بهینه سازی تصاویر سایت خود را بررسی کنیم

تصویر را از نظر بهینه سازی کلمه های کلیدی بررسی کنید.


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

اسم فایل تصویر

وقتی عکس مورد نظر خود را برای انتشار روی وب سایت آماده کردید، باید از اینکه اسم فایل با موضوع تصویر همخوانی دارد مطمئن شوید. (مثلا برای عکس یک مراسم ورزشی نباید از شماره استفاده کنید). اگر موضوع تصویر با عنوان صفحه  تشابه داشته باشند و از یک کلمه ی کلیدی در آنها استفاده شده باشد باعث بهبود کیفیت سئو صفحه خود شده اید.

شما می تواند در قسمت Address در Screaming Frog اسم تمام تصاویر را چک کنید.

 در مثال زیر یک نمونه نام گذاری بد و نام گذاری خوب را مورد بررسی قرار می دهیم:

اسم گذاری بد: asdjolih85900.jpg

اسم گذاری خوب:  how-google-crawl-your-site.jpg

نکات مهم برای انتخاب اسم فایل

  • از کلماتی استفاده کنید که عکس شما را توضیح دهد.
  • از حروف ربط مانند a، an، and ،از، و ، که، تا و...استفاده نکنید
  • از اسم های کوتاه استفاده کنید.
  • از کلمه های کلیدی بی هدف و پرتکرار استفاده نکنید.

 

متن Alt یا متن جانشین

این متن به موتور های جستجو می فهماند که تصویر قرار گرفته بر روی وب سایت شما در چه موردی است  و در واقع به درد افرادی که از سایت شما بازدید می کنند نمی خورد؛ در ادامه باید گفت که همه ی عکس ها باید تگ جانشین یا همان متن Alt بهینه سازی شده داشته باشند.

نکات مهم برای نوشتن متن Alt

 

  • برای تمام عکس ها از متن Alt استفاده کنید.
  • از کلمه های کلیدی بی هدف و زیاد و پر تکرار استفاده نکنید، این متن باید توضیح دهنده عکس شما باشد.
  • کوتاه بنویسید. نظر متخصصان پونه مدیا این است که ترجیحا زیر 100 کارکتر باشد.

 

اینکه تصویر چقدر کیفیت موضوعی دارد را مورد بررسی قرار دهید

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

مواردی که باید برای بررسی کیفیت موضوع مد نظر داشته باشید عبارتند از:

اصالت یا اورجینال بودن: بررسی کنید که آیا عکس های موجود بر روی سایت شما به صورت اختصاصی برای سایت شما استفاده می شود؟

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

هدف: عکس های سایت شما چه چیزی را به معرض نمایش می گذارند؟ ما از این موضوع خبر نداریم که سایت شما در چه مورد است ولی پیشنهاد ما به شما این است که همه ی تصاویر شما باید در رسیدن به هدف شما مفید باشندو.

 

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

اکنون که همه ی موارد و راههای بهینه سازی تصاویر وب سایت خود را یاد گرفته اید بهتر است که دست به کار بهینه سازی شوید.
بهترین کار این است که بر اساس روند زیر پیش بروید:

  • فرمت فایل را بررسی کنید
  • سایز تصویر خود را بررسی کنید
  • فشرده سازی فایل تصاویر
  • درست کردن نام فایل ها
  • به روز کردن متن Alt

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

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

فشرده سازی JPEG

فشرده سازی PNG

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

 

نیاز به مشاوره بیشتر دارید؟

متخصصان پونه مدیا منتظر شما هستند

دیدگاه‌ها  

0
0
# محمدی 1397-06-15 11:03
عالی بود
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

نظر خودتان را با ما در میان بگذارید