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

آموزش کاهش حجم تصاویر بدون افت کیفیت در وب

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

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

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

آموزش فرمت فایل تصویر :

کانال Alpha : کانال آلفا همون شفافیت تصویر هست که با Transparency شناخته میشه.شفافیت یعنی، بخش هایی از تصویر که شفاف هست، پشت عکس نمایش داده میشه.مثلا اگر روی نوشته ای، یک تصویر قرار بدید، بخش هایی از تصویر که دارای شفافیت (Transparency) هست، خالی نمایش داده میشه و محتوای پشت عکس(نوشته ها) نمایش داده میشه.در حالت عادی هیچ عکسی گرد یا مثلت یا… نیست.همه عکس ها در دنیا مستطیل و مربع هستند.عکس هایی که شما به شکل مربع می بینید، در حقیقت عکس هی مربع یا مستطیل هستند، فقط دور اونها، شفاف شده و باعث میشه شما به جای عکسی باگوشه های تیز، عکس گرد و کلا غیر مستطیل و مربع ببینید.

Solid Color : به معنی رنگ ساده هست.مثلا قرمز خالی.سیاه خالی.سبز خالی.زرد خالی. اما رنگ سبزی که ترکیبی از سبز کمرنگ و پررنگ هست، solid color محسوب نمیشه.یا مثال دیگه، برگ درختان یک درخت در طبیعت با اینکه همگی سبز هستند، Solid محسوب نمیشه.چون در اون درخت ترکیبی از رنگ های سبز وجود داره که توسط زاویه تابش نور،سایه های ایجاد شده، عمر متفاوت هر برگ، رگه های روی هر برگ، جند رنگه بودن هر برگ (مثلا زرد متمایل به سبز در بالای برگ و سبز تیره در پایین برگ)،ایجاد شده.در حالت کلی، تصاویر طبیعت، هیچ کدوم دارای Solid Color نیستند.

فرمت ها:

1- BMP – به دلیل حجم بالا و عدم کاربرد و مزیت در وب، اصلا توصیه نمیشه.

2-JPG – این فرمت تصاویر رو فشرده سازی می کنه و محدودیتی در نمایش طیف های رنگی نداره و در سطوح مختلف با کیفیت و بی کیفیت قابل ذخیره سازی هست و به شدت استفاده از این فرمت توصیه میشه.

3-GIF – این فرمت حداکثر دارای 256 رنگ هست و طبیعتا کیفیت بالایی نداره.اما برای تصاویر ساده که رنگ های solid دارند، به شدت توصیه میشه چون حجم رو خیلی خیلی میتونه کم کنه.در حقیقت برای تصاویر ساده، بهترین فرمت GIF هست.همچنین این فرمت از کانال Alpha پشتیبانی می کنه.

4-PNG – این فرمت هم مشابه JPG هست اما در فشرده سازی تصویر به اندازه JPG قدرتمند نیست و مزیتش نسب به JPG اینه که از کانال Aplpha پشتیبانی می کنه.اگر به کانال alpha نیاز دارید و نمی خواید کیفیت تصویرتون پایین بیاد، استفاده از این فرمت توصیه میشه.

5-TIF – فرمتی هست که می تونه صفحه بخوره یعنی یک عکس چند صفحه ای ایجاد کنید.این فرمت مزایا و معایب و کاربردهای مختلفی داره که برای استفاده از وب توصیه نمیشه و اکثر مرورگر ها هم در نمایش این فرمت مشکل دارن و گاها وقتی صفحه ای دارای این عکس باشه، به جای نمایش اون، روی سیستم شما دانلود میشه.بنابراین دور این فرمت رو هم خط بکشید.

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

تصویر نمونه پر حجم
تصویر نمونه حجم متوسط
تصویر نمونه کم حجم

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

قبل از اینکه آموزش عملی را شروع کنیم نیاز است که شما قبل از کاهش حجم، متوجه شوید، چقدر امکان کاهش حجم وجود دارد.برای این تشخیص شما باید به سادگی و اندازه تصویر و فرمت آن نگاه کنید.اگر دارای رنگ های ساده و solid هست، بدون شک جای کار دارد.همچنین اگر ابعاد عکس بزرگ است (مثلا 2000 در 3000) با یک کاهش اندازه ، حجم آن به شدت کاهش می یابد.در نتیجه جای کار دارد و بدون شک برای مشاهده در صفحه نمایش، بدون زوم روی تصویر، نیازی نیست که با وضوح تصویر 3000 در 2000 نمایش داده شود.

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

فرمت تصاویر نیز بسیار مهم است.گاهی با یک تغییر فرمت، بدون افت کیفیت، کاهش شدید حجم را مشاهده می کنید.برای مثال، در اغلب تصاویر، اگر یک تصویر با فرمت PNG یا BMP را خیلی عادی با پسوند JPG ذخیره کنید، حجم تصویر به شدت کاهش می یابد.زیرا JPG دارای خاصیت فشرده سازی و در عین حال حفظ کیفیت به خصوص برای نمایش در صفحه های نمایش است.

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

نمونه تصویر حجم معمولی
تصویر حجم متوسط

تصویر با حجم بهینه شده

می دانید چه چیزی باعث شده است حجم تصویر از 135  کیلوبایت به 55 کیلوبایت کاهش یابد؟اصلی ترین دلیل آن کاهش ابعاد آن است.در این صفحه من قصد نداشتم اندازه اصلی تصویر که 1200 در 950 بود را نمایش دهم.چون اصلا طول صفحه سایت سئوروز، برای محتوا، تقریبا نصف 1200 پیکسل است.(توجه داشته باشید، فقط نحوه نمایش هر سه عکس در یک اندازه یعنی 600 در 475 است.اما دو تصویر اول، با ابعاد 1200 در 950 در سایت آپلود شده اند.فقط در قابی کوچکتر و فشرده تر نمایش داده می شوند).لذا شما باید، با توجه به محل نمایش عکس، ابعاد عکس را کم کنید.واقعا چه نیازی است که تصویر با وضوح 1200 در 950 پیکسلی در ابعاد 600 در 475 پیکسل نمایش داده شود؟و چه فایده ای دارد؟!

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

تمرین یک:

تصویر اصلی با ابعاد 1900 در 1200 با حجم 600 KB قابل مشاهده است:

تصویر اصلی پر حجم

تصویر بالا رو ، روی سیستم خودتون ذخیره کنید و با فتوشاپ باز کنید.سپس از منوی File گزینه Save for web & devices رو انتخاب کنید.در پنجره ای که باز میشه در سمت راست بالا،میزان Quality رو روی صفر قرار بدید و فرمت رو JPEG انتخاب کنید و ذخیره کنید:

کاهش حجم تصویر بدون افت کیفیت در فتوشاپ

نکته های مهم:

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

نمایش حجم حقیقی تصویر قبل از ذخیره

حال اگر تصویر را ذخیره کنید به 115 کیلوبایت مانند زیر تبدیل می شود و در ظاهر تفاوتی از نظر کیفیت با تصویر 575 کیلوبایتی ندارد:

تصویر کم حجم شده تمرین اول

حالا بیایید ابعاد تصویر را هم کاهش دهیم.زیرا برای نمایش (در این آموزش) نیازی به ابعاد 1900 در 1200 نیست!

مطابق شکل زیر از منوی Image گزینه Image Size را انتخاب کنید و طول و عرض عکس را به ابعاد دلخواه تغییر دهید (در اینجا 600 در 375).

کاهش اندازه تصویر در فتوشاپ

فراموش نکنید، هیچ وقت نسب ابعاد تصاویر را به هم نریزید زیرا تصویر حالت اصلی خود را از دست می دهد و کشیده یا جمع می شود.برای جلوگیری از اشتباه مطابق تصویری بالا، قبل از تغییر ابعاد، گزینه Constrain Proportions را تیک بزنید.همچنین اگر در تصویر خود از افکت و style استفاده کردید، گزینه Scale Styles را نیز تیک بزنید.(در این آموزش تیک زدن یا نزدن Scale Styles هیچ تفاوتی ندارد).سپس مجددا تصویر را مانند قبل، Save For Web کنید(عینا مرحله قبلی را هنگام ذخیره تکرار کنید) و نتیجه 20 کیلوبایتی را با همان کیفیت مشاهده کنید:

تصویر نهایی کاهش یافته حجم و ابعاد

نکته مهم:

شما نباید برای همه تصاویر به شکلی که توضیح داده شد عمل کنید و تا آخر کیفیت را پایین بیاورید(Quality را نباید صفر کنید).با هر عکس، با بالا پایین کردن کیفیت، و تغییر فرمت فایل ها(PNG 8 – JPG – GIF) و با تغییر اندازه عکس و تراکم رنگ ها، می توانید به نتیجه دلخواه برسید.همچنین عکس هایی که سایه دار هستند، را نمی توانید با تراکم رنگ پایین یا با فرمت GIF که تراکم رنگ 256 تایی دارد، کم حجم کنید.برای کاهش تصاویر سایه دار، علاوه بر موارد یاد شده، باید سایه ها را نیز حذف کنید.

محتوای دست چین شده برای شما:
ثبت مکان در گوگل مپ

آموزش جامع بهینه سازی تصاویر برای موتورهای جستجو

بهینه سازی یا سئو تصاویر همواره بخشی از بهینه سازی داخلی سایت (On Page Seo) بوده و هست.

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

alt مخفف Alternative Text به معنای متن جایگزین است که به خزنده ها کمک می کند که مفهوم و موضوع عکس را متوجه شوند. نتایج حاصل از جستجو در بخش تصاویر گوگل و همه موتور های جستجو تحت تأثیر مشخه alt و title تصاویر است.

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

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

<img src="https://webangel.marketing/x.jpg" alt="بهینه سازی تصاویر" title="بهینه سازی تصاویر" />

از آنجا که در PHP از همان کنترل های HTML استفاده می شود، کد بالا برای راهنمایی طراحان سایت و برنامه نویسان، کفایت می کند. اما برای ASP.NET معمولا از کنترل Image خود دات نت استفاده می شود.این کنترل، یک Property به نام Alternative Text دارد که همان alt است و یک Property به نام Tooltip دارد که همان title است.

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

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

برای مشخصه alt و title هم از تکرار کلمات کلیدی بیهوده پرهیز کنید.بحث keyword stuffing فقط مربوط به داخل متن و محتوا نمی شود. برای تصاویر نمادین و کلا تصاویری که معنی ندارند و صرفا خاصیت icon و ابزاری دارند و alt و title برای آنها بی معنی است، اصلا از alt و title استفاده نکنید.

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

گوگل و موتورهای جستجو، نیازی به درک کلید گزارش خرابی لینک دانلود سایت شما ندارند! و اصلا نباید خزنده ها را به اینها مشغول کنید. قرار نیست 100 درصد تصاویر شما alt داشته باشند. متاسفانه عددی ای با مراجعه به سایت های تحلیل سئو مثل www.woorank.com وقتی مشاهده می کنند که سایتی دارای تصاویر بدون alt است، فکر می کنند که ضعفی در کار است و یا برعکس وقتی همه تصاویر خود، حتی تصاویر بیهوده خود را با alt مقدار دهی می کنند با افتخار می گویند که تصاویر سایت ما 100% بهینه شده است!

استفاده بیش از حد از alt و بهینه سازی تصاویری که متن جایگزین واقعا برای آنها بیهوده است، حتی می تواند در سئوی شما مضر باشد (به پست over optimization چیست مراجعه کنید)

URL صفحه و اعتبار دامنه

URL صفحه ای که تصویر در آن قرار داده شده است می تواند بر ترافیک جذب شده از طریق موتورهای جستجوگر برای تصویر قرار داده شده در سایت تاثیر داشته باشد.

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

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

در این مقوله سئوی تصاویر با سئوی محتواهای متنی تفاوتی ندارد و کاملا مشابه می باشد.

محتواهای موجود در صفحه: محتواهایی که در اطراف تصویر قرار گرفته اند

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

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

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

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

برای مثال “در زیر شما می توانید تصویر از مطالب ذکر شده در بالا را مشاهده نمایید” و یا “در تصویر زیر نمودار مربوط به موارد اشاره شده در این متن ترسیم شده است” و همچنین پس از تصویر باید جملاتی قرار گیرند که بخشی از تصویر را توضیح دهند.

برای مثال “همان طور که در گوشه کناری سمت راست تصویر بالا مشاهده می کنید، شاخص درآمد در سال 1396 بیش از سال قبل بوده است”.

موتورهای جستجوگر مثل گوگل و یاهو این متن ها را برای بررسی میزان مرتبط بودن تصویر با محتوای صفحه مورد استفاده قرار می دهند.

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

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

استفاده از تصاویر استوک

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

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

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

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

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

محتوای دست چین شده برای شما:
بازاریابی اپلیکیشن چیست؟

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

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

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

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

تعامل بر انگیز بودن و محبوبیت تصاویر

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

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

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

شاید برای شما جالب باشد که بدانید مقوله لینک بیلدینگ در رابطه با رتبه بندی تصاویر در نتایج موتورهای جستجوگر نیز می تواند بسیار تاثیر گذار باشد.

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

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

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

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

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

موضوع مهم دیگر، حجم تصاویر است

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

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

1- همان تصویر 100 کیلوباتی در لیست نمایش داده می شود.در نتیجه  در لیستی از محصولات گوشی huawei، (مثلا 15 محصول) ، 1500 کیلوبایت یعنی 1.5 مگابایت فقط به تصاویر اختصاص دارد.

2-به جای استفاده از تصویر اصلی 100 کیلوبایتی در لیست، تصویر thumbnail و بی کیفیت تر و کوچک تر در لیست نمایش داده می شود

(هر عکس زیر 10 کیلوبایت).در نتیجه در صفحه لیست محصولات huawei ، حداکثر 150 کیلوبایت به تصاویر موجود در لیست اختصاص دارد.

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

روی صفحه نمایش کامپیوتر و موبایل و تبلت، چه نیازی است که تصاویر با کیفیت با رزولوشن خیلی بالا قرار داده شود؟ کیفیت تصاویر روی صفحه نمایش، از یک حد بیشتر شود، دیگر با چشم محسوس نیست و اگر هم محسوس باشد، برای کاربر فرق چندانی نخواهد کرد. لذا شما می توانید تصویری با حجم 700 کیلوبایت را بدون آنکه در یک نظر، روی صفحه نمایش، دچار کاهش کیفیت شود، تا 100 کیلوبایت و کمتر ، کم حجم تر کنید.

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

سوالات متداول:

1- اگر عکس های سایت ما alt و title نداشته باشد دیگر نمی توان آن را سئو کردن و در کلمات و عبارهای مد نظر، به صدر نتایج گوگل بیاییم؟

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

2-آیا alt و title باید یکسان باشند؟

هیچ بایدی ندارد.هر چیزی که به عکس مرتبط است قرار دهید.تکراری هم باشد مشکلی ندارد.

3- آیا title را حتما باید بگذاریم؟

خیر.مهمتر alt است.اگر title نگذاشتید مشکلی ندارد.

4- چه زمانی نباید از title استفاده کنیم؟

از آنجا که title بر خلاف alt به کاربر نشان داده می شود، خیلی مواقع، متن داخل title برای تصویر به صورت متن، در نتایج گوگل در قسمت توضیح زیر وب سایت (جایگزین meta description) نمایش داده می شود.

اگر سایت شما درباره نرخ دلار است و تصویر موجود در صفحه شما، بنر تبلیغاتی یک سایت تورو آژانس مسافرتی است نباید از title استفاده کنید.

زیرا مطالب مرتبط با نرخ دلار با title ترکیب می شود و کاربر در نتایج گوگل (در توضیحات) کنار مطالب مرتبط با نرخ دلار، نام آن آژانس مسافرتی را مشاهده می کند که می تواند منجر به دفع کاربر و کاهش نرخ CTR شود.

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

5- اگر تصاویر را کم حجم کنیم، به دلیل کیفیت پایین تصاویر، موجب دفع کاربر نمی شود؟

قرار نیست طوری کم کنید، که کیفیت پایین آن مشهود باشد.

ویرایش توسط حامد مهدی زاده

به پایان آمد این دفتر حكایت همچنان باقیست

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

متاسفیم که این پست برای شما مفید نبود!

Let us improve this post!

چگونه میتوانیم این پست را بهبود بخشیم؟

مسیر موفقیت شما با خدمات VIP وب آنجل

35 پاسخ

  1. کسانی که نرم‌افزار فوتوشاپ ندارن می‌تونن این ویژگی‌های تغییر حجم و سایز تصاویر رو در نرم‌افزار Light Image Resizer بدست بیارن
    حجم نرم‌افزار Light Image Resizer هفت مگابایته

  2. سلام منو که میشناسید امروز سومین نظری هست که میدم فکر کنم یه از طرف دار های سایتتون شدم خیلی خیلی ممنون بابت آموزش هاتون

    1. بله اسماعیل جان.لطف داری.متقابلا ما هم از همراهی شما خوشحالیم

  3. سلام خسته نباشید
    ممنون ولی ایا میشه همین کار و با موبایل هم انجام داد ؟ اگه میشه باید از کدوم نرم افزار استفاده کرد ؟ من نرم افزار فتوشاپ اکسپرس و دارم ولی اینکار و نمیتونم بکنم !!! توروخدا راهنمایی کنید من وبلاگ دارم و میخوام عکسا رو بزارم توش ولی نمیخوام کیفیتشون پایین بیاد چیکار کنم ؟؟
    ممنون

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

    1. نباید برای هر عکسی تا آخر، کیفیت رو پایین بیارید.عکس های با نور طبیعی و در طبیعت معمولا، بی کیفیت نمیشن.شما تا آخر کیفیت رو پایین نیارید.

  5. آقا سلام
    بنده تازه با سايت شما آشنا شدم
    مبتدي هستم.
    شروع كردم مطالب شما رو مطالعه مي كنم . اين مطلب واقعا به من كمك كرد.
    سطح يادگيري كه اينجا ياد مي گيرم رو با سايت هاي ديگه مقايسه مي كنم واقعا احساس مي كنم دارم حرفه اي مي شم (ازخود تعريف نباشه- از سايت شما دارم آموزش ها رو يكي يكي روزانه مطالعه مي كنم.)
    واقعا حق استادي به گردن ما داريد.
    باز هم تشكر براي اينكه ساده مي نويسيد و جامع تا همه بتونند ياد بگيرند.

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

  7. با سلام
    سوالي كه هنوز كسي پاسخ درستي به من نداده خدمت شما عرض مي كنم
    سايت من(neginazinco.com) در هنگام جستجو كلمه آبنما در حالت استفاده از فيلتر شكن در صفحات گوگل نمايش مي دهد(صفحه دوم) اما بودن استفاده از فيتر شكن اصلا در هيچ كدام از صفخات گوگل مشاهده نمي شود.لطفا دليل آن چيست.با تشكر از شما

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

  8. به نظرم سایت tinypng یکی از سایتهای خوب می باشد جهت بهینه سازی تصاویر

    1. زشته به خدا سال 2016، درج کامنت اسپم با ظاهر غیر اسپم! حداقل توی سایت هایی که بدرد چنین کاری میخورن، کامنت اسپم بذارید.

  9. با سلام
    ضمن تشکر از پست کابردی شما
    دو سئوال در رابطه با تصاویر سایت دارم که مطرح و تقاضا دارم که در صورت امکان پاسخ لازم ارائه فرمایید:
    1.مشخصات تصویر استناندارد وب سایت از جهت اندازه، رزولوشن، میزان فشرده سازی چیست، به نحوی که اگر قالب سایت را در فواصل زمانی خاص مثلاً سالانه عوض کردیم همان تصویر مناسب باشد؟
    2.آیا اگر در فتوشاپ سندی جدیدی باز شود و مثلاً فایلی با مشخصات :اندازه 600 در 300 پیکسل ، رزولوشن 96 و با 8 بیت ایجاد و یک عکس با فرمت jpg را پس از قراردادن در این سند و انجام تنظیمات آن با Save for web ذخیره نماییم یک تصویر بهینه سازی شده است یا این که بهینیه سازی عملی مجزایی است و در صورت اخیر یک تصویر را چگونه می توان (به غیر از استفاده از افزونه های مربوطه در این زمینه) برای یک سایت وردپرسی بهینه سازی کرد؟
    با تشکر

  10. مطالبتون واقعا عالین . از نظر من بهترین و با کیفیت ترین سایتی هستین که در زمینه سئو کار میکنه. تبریک میگم بهتون و ممنون از مطالب خوبتون

  11. آقای طاوسی بسیار از شما سپاسگذارم …. مطلبی رو یادم دادید که خیلی وقت بود راه حلی به خوبی برایش نداشتم . متشکرم . در پناه خداوند باشید.

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

  13. سلام و سپاس
    فکر نمیکنم این روش خیلی مناسب باشه, همانطور که میدونیم گوگل به کیفیت عکس هم اهمیت میده و از طرفی کاربران سایت هم کیفیت عکس براشون مهمه.

    یک روش ساده برای کم کردن حجم عکس بدون از دست دادن کیفیتش, کمپرس کردن اون به وسیله سایت https://compressor.io هست

    موفق باشید

  14. سلام
    خیلی ممنون آموزش بسیار کاملی است. سپاس از نویسنده ی توانا و با تجربه.
    ضمنا هنگام نوشتن نظر در سئوروز(باکس های نام و ایمیل و وبسایت) رنگ فونت سفید است البته در اینترنت اکسپلورر اگه حوصله دارید درستش کنید. سپاس

  15. سلام. این روش به طرز قابل توجهی کیفیت رو پایین میاره و در خیلی از موارد تاثیر نداره. ولی من با یه نرم افزار که اسمش jpg imager هست، کاور های مطالبم که معمولاً بین 100 تا 200 کیلوبایت هستن رو به کمتر از 40 کیلوبایت میرسونم و کیفیتش زیاد کم نمیشه.(میتونید توی سایتم نمونه هاشو ببینید) اما قبلاً با همین روش این کارو میکردم که واقعاً کیفیتشون افتضاح میشد و تازه مجبور میشدم حجمشون رو حدود 60 کیلوبایت بگیرم که بشه نوشته هاشو خوند!!!

  16. سلام.
    دوست عزیز من خودم توی فتوشاپ زمینه ای دارم و خودم یک وبمستر هستم. اما سوالم اینجاست که واقعا روی عکسی که نشان دادیم واقعا از Quality صفر استفاده کردید.
    ببینید هیچ تصویری جز تصاویری که دارای رنگ های خیلی خیلی ساده هستند نمیشه Quality صفر بهشون داد چون تصویر رو واقعا داغون میکنه چون این تصویری که شما Quality رو صفر کردید میتونم صد در صد بگم که شاید اگر Quality رو به زیر 40 یا 35 بیارید افت کیفیت پیدا می کنه تا جایی قابل دیدن هست.
    ولی امیدوارم که این مطلب رو تصحیح کنید.

    1. کیفیت صفر، روی هر عکسی مثل مثال این پست نمیشه.ولی خودتون میتونید ذخیره کنید و تست کنید.نسخه با کیفیت عکس، در پست موجود هست.

  17. سلام میخام حجم عکسی که به سامانه میفرستم کمتر از 120 کیلو بایت باشه.ممنون از راهنماییتون

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

    1. همچنین چیزی وجود نداره.اگر چنین چیزی وجود داشت، فیلم های قدیمی با وضوح پایین رو، میتونستن تبدیل به فیلم فول اچ دی کنن.پیکسل هایی که وجود نداره، رو نرم افزار نمیتونه به وجود بیاره که! شما می تونید یه تصویر رو تار کنید.ولی یه تصویر تار رو نمیتونید صاف کنید.چون وقتی تار هست، پیکسل ها و رنگ هاش از بین رفته.نرم افزار که نمیتونه حدس بزنه چه پیکسل هایی بوده! حداقل چنین چیزی با تکنولوژی فعلی در سال 2017 وجود نداره و بعید میدونم روزی به وجود بیاد.

  19. سلام. آقا یه سوال: 3 فاکتور کیفیت، اندازه و تگ alt تصاویر مستقیما روی سئو هم تأثیر دارن یا صرفا از این جهت که روی جذب کاربر تأثیر داره مهم هستن؟

    1. هر سه مستقیما برای موتور جستجو موثر هستند و همینطور از نظر UX.فقط alt ربطی به UX نداره.

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

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

وب آنجل
جستجو کردن