ما متخصص محتوا هستیم، نه عکاس حرفه‌ای! پس چرا باید به مقالات خود عکس اضافه کنیم، وقتی که میدانیم کلمات به قدری جذاب و هیجان‌انگیز هستند که می‌توانند مخاطب را درگیر کنند؟

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

بخش مهمی از ارزش محتوا در تصاویر نهفته است!

مقاله‌ای که پیش روی شماست با آنچه تا امروز در مورد تصاویر و تاثیر آنها بر سئو سایت خوانده‌اید متفاوت است. اگر به این فکر می‌کنید که "در هر مقاله چند تصویر استفاده کنیم" احتمالا هنوز مفهوم سئو و تجربه کاربری را به درستی درک نکرده‌اید! ولی نگران نباشید، این سوال را از 2 منظر مهم بررسی خواهیم کرد؛ ابتدا درمورد تاثیر تصاویر بر تجربه کاربری صحبت خواهیم کرد و در ادامه به بررسی نقش آن در سئو و کیفیت محتوا می‌پردازیم.

1- تصاویر، چطور تجربه کاربری را بهبود می‌دهند؟

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

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

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

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

انتقال پیام؛ مهمترین فاکتور ما هنگام انتخاب یک تصویر است

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

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

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

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

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

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

درک ماهیت محتوا، انتخاب تصاویر را ساده می‌کند

بسیاری از تولیدکنندگان محتوا توجهی به ماهیت محتوا نکرده و به دنبال یک فرمول تکرارپذیر برای همه سایت‌ها می‌گردند. مثلا به‌ازای هر 300 کلمه حتما یک تصویر داشته باشیم یا در هر مقاله حداقل 4 تصویر درج شود. درحالی‌که، موضوع و هدف مقاله باید در تعیین تعداد و نحوه نمایش عکس‌ها در نظر گرفته شود.

برای درک بهتر این موضوع، عناوین زیر را در نظر بگیرید:

• مقاله آموزشی جامع؛ که یک موضوع مشخص را قدم به قدم  آموزش می‌دهد
• نظر یا تجربه شخصی؛ در مورد یک محصول، برند، فرصت شغلی و ...
• نقد و بررسی محصول؛ معرفی امکانات و مقایسه با محصولات مشابه
• خبر سیاسی یا ورزشی؛ متن مصاحبه یا یک اعلان عمومی از طرف دولت

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

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

از چه عکسی در مقالات استفاده نکنیم؟

راست‌ش را بخواهید وضعیت محتوای تصویری در مقالات فارسی اصلاً خوب نیست! قبل از انتخاب یک تصویر به موارد زیر توجه کنید:

حذف آن هیچ تاثیری در کیفیت محتوا ندارد

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

در سایت‌های مشابه استفاده شده‌ است

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

2- استفاده از تصاویر چطور به سئو کمک می‌کند؟

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

گوگل قادر به درک محتوای تصویر و ارتباط معنایی آن با محتوای متنی است.

شرکت مایکروسافت ابزاری به نام Computer Vision را معرفی کرده که قادر به درک محتوا و موضوع تصاویر است. برای بررسی توانمندی آن، عکس یکی از دوره‌های آکادمی وبسیما را بارگذاری کردیم، کپشن پیشنهادی جمله "a group of people in a room" بوده است.

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

متن جایگزین؛ پل ارتباطی میان تصویر و متن

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

توضیحات متنی (Caption)؛ فراتر از انتقال پیام به کاربر

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

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

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

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

وقتی تصویر از متن مهم‌تر است

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

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

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

[websima_workshop_cta ids="47"]

سخن پایانی؛ تصاویر، برگ برنده شما هستند

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

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

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

یکی از چالش‌هایی که همه‌ی ما هنگام تولید محتوا یا بهینه‌سازی صفحات سایت با آن برخورد می‌کنیم، دوراهی استفاده از فرمت png  یا jpg برای تصاویر؛ یا دوراهی ذخیره و استفاده از تصویر با پسوند jpg یا jpeg است. شناخت انواع این فرمت‌ها به ما کمک می‌کند تا یک‌بار برای همیشه درک درستی از تصاویر، نحوه ذخیره‌سازی و استفاده از آن‌ها پیدا کنیم.

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

فرمت مناسب تصاویر برای سئوی سایت چیست؟

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

انواع فرمت‌های موجود تصویر مثل jpg ، png ، svg ، eps و غیره همگی در این دو دسته کلی قرار می‌گیرند. در تصویر زیر به خوبی این تقسیم‌بندی و فرمت‌های موجود برای آن‌ها را مشاهده می‌کنید.

 

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

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

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

در طرف مقابل تصاویر وکتور با استفاده از فرمول‌های بُرداری انعطاف‌پذیری بالایی دارند و برای طراحی‌های با ابعاد بسیار بزرگ و پروژه‌های چاپی مناسب‌تر هستند.

با این وجود، این نوع از فرمت‌های تصاویر نیز در فضای وب کاربردهایی دارند. یکی از مهم‌ترین کاربردهای تصاویر وکتور در فضای وب، استفاده برای طراحی‌های برندینگ مثل لوگوهاست؛ یا برای مثال تصاویر با پسوند SVG کاربردهای متعددی در طراحی UI صفحات وب دارند.

برای سئوی محتوا با کدام یک از این دو ساختار تصاویر و فرمت‌ها سر و کار داریم؟

غالبا تصاویری که ما از آن‌ها برای محتوای سایت‌های اینترنتی و در فضای وب استفاده می‌کنیم در دسته تصاویر پیکسلی، شطرنجی یا همان raster قرار می‌گیرند. پسوند‌هایی مثل JPG و PNG از جمله این تصاویر هستند.

در ادامه با معرفی پر کاربردترین پسوند‌های تصاویر در وب، برای استفاده بهینه از آن‌ها در وبسایت آماده می‌شویم.

تصاویر JPEG، سازگار با سئو و همه‌فن‌حریف

فرمت jpg رایج‌ترین و البته نام‌آشناترین فرمت تصویر مورد استفاده است. هر دو پسوند jpg و jpeg عینا مشابه هم هستند و از هیچ نظر تفاوتی با هم نداشته و هر دو مخفف عبارت Joint Photographic Experts Group هستند (در گذشته بدلیل محدودیت نمایش کارکترها در پسوند، از jpg استفاده می‌شده است).

تصاویر jpeg یکی از انتخاب‌های خوب برای استفاده در محتوا و فضای وبسایت هستند. با این وجود، نکته مهم درمورد آن‌ها، lossy بودن این نوع فرمت است.

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

در نتیجه؛ رسیدن به یک تناسب میان کیفیت و حجم، برای بارگذاری تصاویر jpeg در وبسایت‌ها اهمیت بسیار بالایی دارد.

پیشنهاد ما این است که با نگهداشتن dpi این فرمت بین 72 تا 150، حجم تصویر برای بارگذاری در صفحات وب را کمتر از 100 کیلوبایت حفظ کنید.

نحوه انجام این کار و روش‌های کاهش حجم تصاویر jpg با حفظ کیفیت را در مقاله‌ی "کاهش حجم تصاویر" برای شما تهیه کرده‌ایم. پیشنهاد می‌کنیم حتما این محتوای جذاب را مطالعه و مشاهده کنید.

فرمت PNG، تنوع رنگ کم و حجم پایین

PNG مخفف عبارت Portable Network Graphics است؛ با نگاه به نام این فرمت تصویر هم می‌توان کاربرد آن برای فضای وب را به خوبی درک کرد. از مزایای این نوع فرمت می‌توان به lossless بودن، تنوع رنگ مناسب و امکان ذخیره با قابلیت transparency اشاره کرد.

فایل‌های PNG با وجود lossless بودن (یعنی امکان ویرایش در عینِ عدم کاهش کیفیت) از جمله تصاویر با کیفیت پایین محسوب می‌شوند. قابلیت مهم دیگر تصاویر PNG امکان ذخیره‌سازی بصورت شیشه‌ای یا با transparency است که ما را برای استفاده از آن در المان‌های UI یک وبسایت ترغیب می‌کند. با این حال فرمت جایگزین بهتر برای این هدف (استفاده برای المان‌های طراحی یک سایت) فرمت SVG است که در ادامه مقاله آن را معرفی خواهیم کرد.

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

فرمت GIF، جلب توجه مخاطب با تصاویر متحرک

تصاویر GIF را اغلب ما با تصاویر متحرکی که در شبکه‌های اجتماعی رد و بدل می‌کنیم، می‌شناسیم. با این وجود تصاویر گیف در فضای وب و وبسایت‌ها نیز کاربردهای دارند. استفاده برای بنرهای تبلیغاتی، CTA یا کال تو اکشن‌ها و حتی بعضاً تصاویر یک مقاله، جاهایی هستند که می‌توانیم از این فرمت استفاده کنیم.

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

فرمت WEBP، تازه وارد دوست داشتنی برای سئوی تصاویر

یکی از فرمت‌های تصاویر که اخیراً رواج زیادی در فضای وب پیدا کرده، فرمت WEBP است. بسیاری از وبسایت‌هایی که محوریت فعالیت‌شان بر پایه تصاویر بوده، مثل Pinterest یا Dribbble اخیرا این فرمت را جایگزین تصاویر با فرمت JPG کرده‌اند. دلیل این کار هم تفاوت 30 درصدی حجم این فرمت در مقایسه با یک تصویر با کیفیت مشابه و با پسوند JPG است.

از مهم‌ترین ویژگی‌های این فرمت علاوه بر حجم کمتر در مقایسه با سایر فرمت‌ها، دارا بودن قابلیت transparency درست مانند فایل‌های PNG است. علاوه بر این، رشد روز افزون سازگاری مرورگرهای مختلف با فرمت WEBP نیز، به محبوب شدن هرچه بیشتر آن کمک کرده است.

با این تفاسیر، اگر بر سر دوراهی استفاده از فرمت JPEG یا WEBP متوقف شده‌اید، تضمین می‌دهیم که فرمت WEBP پاسخ اطمینان شما را به خوبی خواهد داد. (تصاویر همین مقاله نیز همه‌گی با فرمت Webp در دسترس شما قرار گرفته‌اند)

فرمت SVG، تصاویر به زبان ربات‌های گوگل

برخلاف سایر فرمت‎هایی که به معرفی آن‌ها پرداختیم، فرمت SVG در دسته‌بندی فرمت‎های بُرداری یا vector قرار می‌گیرد. اما به واسطه کاربردهای متنوع و جذاب آن در طراحی سایت و اهمیت آن در سئو تکنیکال، توضیح کوتاهی درمورد این فرمت خالی از لطف نیست.

[websima_workshop_cta ids="49"]

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

بر پایه‌ی متن بودن این فرمت (text-based) باعث شده تا گوگل به راحتی بتواند به کمک خزنده‌های خود این تصاویر را کراول، ایندکس و درک کند و از این جهت نیز نقش خود را به خوبی در سئو سایت ایفا می‌‎کنند. Scalable Vector Graphics همان‌طور که از نامشان پیداست مناسب تصاویر گرافیکی و طراحی‌ها هستند و استفاده از آن‌ها برای تصاویر رئال منطقی و نتیجه‌بخش نیست.

برای قسمت‌های مختلف سایت از چه فرمت تصویری استفاده کنیم؟

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

فرمت تصویر	کیفیت	حجم	زمان استفاده
JPG	مناسب	مناسب	تصاویر واقعی و اسلایدر
PNG	عالی	عالی	تصاویر گرافیکی با تنوع رنگ پایین
WEBP	مناسب	عالی	همه تصاویر سایت
GIF	پایین	زیاد	بنرهای تبلیغاتی
SVG	عالی	عالی	لوگو و آیکون‌ها (یک یا دو رنگ)

چطور فرمت تصاویر را تغییر دهیم؟

پیش از اینکه به سراغ روش‌های تغییر فرمت تصاویر برویم، مقاله‌ی "درک محتوای تصاویر" را مطالعه کنید. این مقاله به شما کمک می‎‌کند تا شکل محتوایی تصویرتان را پیدا کرده و انتخاب کنید. برای مثال درصورتی که محتوای تصاویر بلاگ شما غالبا تصاویر گرافیکی باشد، استفاده از فرمت PNG نتیجه بهتری از لحاظ کیفیت و سرعت لود صفحه بدنبال خواهد داشت.

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

دو راه اصلی برای تغییر فرمت تصاویر پیش روی شماست.

1. استفاده از نرم افزارهای گرافیکی (مانند فتوشاپ)
2. استفاده از ابزارهای آنلاین

1- تغییر فرمت تصویر با استفاده از فتوشاپ

برای ذخیره تصویر با فرمت مناسب، تصویر مورد نظرمان را با فتوشاپ باز کرده و بعد از انجام ویرایش‌های احتمالی، این مسیر را طی می‌کنیم:

ذخیره با فرمت JPG، GIF یا PNG:

File >> Export >> Save for Web (Legacy)

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

ذخیره با فرمت SVG

همانطور که گفتیم این فرمت برای تصاویر گرافیکی و فایل‌های برندینگ مناسب است. این پسوند قابلیت ویرایش در نرم افزار فتوشاپ را ندارد و برای ساخت و ذخیره‌سازی این فرمت باید از سایر نرم افزارهای گرافیکی مرتبط، مثل Adobe Illustrator و یا Affinity Designer استفاده کنیم.

ذخیره با فرمت WEBP

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

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

2- تغییر فرمت تصویر با ابزارهای آنلاین

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

وبسایت www.img2go.com

این وبسایت می‌تواند تصاویر را به 12 فرمت مختلف از جمله WEBP، SVG و JPG تبدیل کند. امکان آپلود تصویر از درایو گوگل، دراپ باکس و همینطور آدرس URL از جمله امکانات خوبی‌ست که این وبسایت در اختیار ما قرار می‌دهد. بعلاوه این امکان را داریم که علاوه بر تبدیل فرمت، حجم تصاویر را نیز به کمک ابزارهای جانبی این وبسایت، کاهش دهیم.

وبسایت image.online-convert.com

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

پشتیبانی از فرمت Webpp در وردپرس

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

//** *Enable upload for webp image files.*/
function webp_upload_mimes($existing_mimes) {
$existing_mimes['webp'] = 'image/webp';
return $existing_mimes;
}
add_filter('mime_types', 'webp_upload_mimes');
//** * Enable preview / thumbnail for webp image files.*/
function webp_is_displayable($result, $path) {
if ($result === false) {
$displayable_image_types = array( IMAGETYPE_WEBP );
$info = @getimagesize( $path );
if (empty($info)) {
$result = false;
} elseif (!in_array($info[2], $displayable_image_types)) {
$result = false;
} else {
$result = true;
}
}
return $result;
}
add_filter('file_is_displayable_image', 'webp_is_displayable', 10, 2);

سخن پایانی

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

فراموش نکنیم که تصاویر بخش مهمی از محتوای یک صفحه هستند. به همین دلیل در دوره تولید محتوا تکنیک‌های کاربردی و جذابی برای استفاده صحیح از تصاویر و تاثیر آنها بر سئو را ارائه کرده‌ایم.

 

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

به عبارت ساده‌تر، کاربران می‌توانستند بدون وارد شدن به سایت‌ها، تصاویر موجود در آن‌ها را دانلود کنند.

حتما با خودتان فکر می‌کنید «چقدر عالی؟» ولی قضیه پیچیده تر از چیزی بود که فکر می‌کنید!

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

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

زمزمه به وجود آمدن متن جایگزین تصویر یا alt عکس

بعد از طی کردن مراحل قضایی زیاد، سرانجام گوگل از طریق Twitter اعلام کرد:

«ما امروز در حال تغییر و به‌روزرسانی بخش جستجوی تصاویر خود هستیم تا به کاربران کمک کنیم آسان تر به سایت‌های مفید دسترسی داشته باشند. این یعنی مجبوریم دکمه View Image را از صفحه نتایج تصاویر خود حذف کنیم و به جای دکمه View را بدون تغییر نگه داریم تا جستجو کنندگان عکس مورد نظر را در محتوای داخل سایت مشاهده کنند.»

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

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

پس اگر سوالی شبیه «اصلاً سئو تصاویر در افزایش رتبه تاثیر داره؟» مثل یک چراغ دائماً در ذهن شما روشن می‌شود، باید با یقین و اطمینان کامل به شما بگوییم بله. در ادامه می‌فهمیم این تغییر به چه صورت است و چطور می‌توانیم از سئو تصاویر به نفع سایت خود استفاده کنیم.

alt text یا تگ آلت چطور متولد شد؟

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

حدس بزنید در قدم بعدی چه اتفاقی افتاد؟

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

ربات‌های گوگل؛ به نابیناهای دنیای وب سلام کنید

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

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

Alt Text چیست؟ نگاهی فنی تر به کاربرد متن جایگزین عکس

ویژگی alt text، توصیفی (ترجیجاً) کوتاه در حد 100 کاراکتر در مورد یک عکس است. هنگامی که می‌خواهید در سایت خود تصویری قرار دهید، می‌توانید (چون اجباری نیست!) با استفاده از متن جایگزین، محتوای تصویر را برای الگوریتم‌های گوگل قابل فهم کنید.

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

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

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

تگ آلت (alt tag) را از کجا ببینم؟

برای اینکه ببینید یک عکس در صفحه چه متن جایگزینی دارد، باید 3 مرحله ساده زیر را طی کنید:

1. با موس روی عکس مورد نظر بروید
2. راست کلید کنید و Inspect را بزنید
3. در بخش کدهای صفحه، عکس مورد نظر را پیدا کنید

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

اگر بخواهیم به طور خلاصه مهمترین کاربردهای تگ alt تصاویر را به شما بگوییم، به 3 مورد زیر می‌رسیم:

• اضافه کردن Alt Text به تصاویر یکی از اصول مهم دسترسی به محتوای موجود در وب است چرا که کاربرانی که اختلال بینایی دارند، می‌توانند با استفاده از سیستم‌های صوتی گویا، محتوای تصاویر را درک کنند و مانند یک کاربر عادی از اطلاعات مفید اینترنت بهره ببرند.
• اگر به هر دلیل، یک عکس کامل لود نشود، متن جایگزین آن در همان جایی که تصویر وجود دارد قابل مشاهده است. به این ترتیب
• استفاده از تگ‌های alt باعث می‌شود تا ربات‌های گوگل درک کامل‌تری از محتوای صفحه داشته باشند و این تصاویر را در بخش Google Images به صورت بهینه تری در اختیار جستجو کنندگان قرار دهد.

اگر هنوز نمی‌دانید که چه نکاتی در سئو برای تولید محتوای تصویری باید رعایت کنید، به دوره تولید محتوای حرفه‌ای مراجعه کنید.

[websima_workshop_cta ids="47"]

ویژگی متن جایگزین تصویر در وردپرس چیست؟

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

در وردپرس شما هر با اضافه کردن هر نوع رسانه مثل یک عکس، می‌توانید یک متن URL، عنوان یا Title، یک کپشن و از همه مهم تر یک متن جایگزین برای آن بنویسید. از بین این فاکتورها، 3 عامل اول بیشتر مورد استفاده کاربران قرار می‌گیرد ولی متن جایگزین علاوه بر استفاده کاربری، برای موتورهای جستجو اهمیت بسیار زیادی دارد.

چرا باید به سئو تصاویر سایت خود اهمیت دهید؟ 1 باور اشتباه و یک مثال برای نقض آن

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

هنوز هم شک دارید؟ پس با یک مثال این اهمیت را برای شما روشن می‌کنیم. 

یکی از باورهای اشتباه در مورد کاربرد متن جایگزین این است که خیلی‌ها فکر می‌کنند بهینه سازی Alt Text تنها وقتی تاثیرگذار است که کاربر وارد جستجوی تصویری یا Google Images شود و روی تصویر کلیک کند، ولی جالب است بدانید که طبق پیش بینی‌ها، تغییرات جدید گوگل به سمتی می‌رود که تصاویر بیشتری را در صفحه نتایج (SERP) به کاربر نشان دهد.

به عنوان مثال اگر عبارت «کتاب‌های سئو» را در گوشی سرچ کنید، می‌بینید که در جایگاه اول تصویر کتاب‌های سئو به کاربر نشان داده می‌شود:

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

1. گوگل اصلاً تصویری برای این مقاله در نظر نمی‌گرفت
2. عکس نشان داده شده، با عبارت کلیدی مرتبط نبود.

اگر می‌خواهید با باورهای اشتباه بیشتری در مورد سئو آشنا شوید، یک پیشنهاد جذاب برای شما داریم:

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

یک Alt عکس در عمل چه شکلی باید باشد؟

حالا که از اهمیت بالای توضیحات جایگزین عکس به خوبی آگاه شدید، نوبت به این می‌رسد که آستین‌ها را بالا بزنید و وارد عمل شوید! در اینجا می‌خواهیم یک عکس به شما نشان دهیم و 3 حالت خوب، بد، متوسط برای آن در نظر بگیریم.

تصویر زیر یکی از عکس‌هایی است که در مقالات آکادمی وبسیما استفاده شده است:

به 3 شکل می‌توانیم برای این عکس، یک متن جایگزین بنویسیم:

معمولی: <img src="crawl-budget.png" alt="بودجه خزش"/>

عالی: <img src="crawl-budget.png" alt="معرفی 8 روش برای افزایش بودجه خزش سایت"/>

نیاز به بهینه سازی دارد: <img src="crawl-budget.png" alt="سئو، افزایش رتبه سئو، بهبود رتبه سئو"/>

چطور برای مقالات خود تگ alt بنویسیم؟ 10 توصیه کاربردی، مفید و مختصر در سئو تصاویر

به گفته گوگل، الگوریتم‌های رتبه بندی نتایج، از 200 فاکتور برای آنالیز و ارزیابی کیفیت سایت‌ها استفاده می‌کنند که یکی از آن‌ها، بهینه سازی درست متن جایگزین عکس یا Alt Text است. با تغییراتی که گوگل در صفحه نتایج و به خصوص Google Images داده، بحث سئو کردن تصاویر و دریافت ورودی از جستجوی تصویری روز به روز اهمیت بیشتری پیدا می‌کند.

توصیه‌های مهم ما برای بهینه سازی هر چه بهتر سئو تصاویر شامل 10 مورد زیر است:

1. برای تمامی عکس‌هایی که در سایت خود آپلود می‌کنید، یک متن جایگزین مناسب بنویسید.
2. حداکثر 100 کاراکتر را برای توضیحات تصویر در نظر بگیرید.
3. توضیحات شما باید توصیفی دقیق، کامل و مفید از عکس باشد
4. اگر می‌خواهید از کلمات کلیدی در متن جایگزین استفاده کنید، یادتان باشد که این کار را با حساسیت بالایی انجام دهید. مثلاً از مترادف‌ها و کلمات هم خانواده استفاده کنید.
5. بهتر است عنوان سئو شما در حداقل یکی از توضیحات جایگزین تصاویر شما وجود داشته باشد.
6. در توضیحات خود از عبارت «عکسی از...» یا «یک تصویر از...» استفاده نکنید.
7. به دکمه‌های تصویری سایت (Site Buttons Images) متن جایگزین عکس اضافه کنید.
8. توضیحات Alt Text شما با عنوان سئو یکی نباشد.
9. برای توصیف عکس، سعی کنید تا جای ممکن از زبان طبیعی استفاده کنید. طوری آن را بنویسید که انگار دارید عکس را برای کسی توضیح می‌دهید و کسی با خواندن این توضیحات بتواند عکس را نقاشی کند!
10. یادتان باشد که به هیچ وجه از Keyword Stuffing یا بمباران کلمه کلیدی برای توضیحات عکس استفاده نکنید.

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

سخن پایانی؛ بهینه‌سازی تصویر ادامه دارد

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

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

 

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

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

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

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

[video width="1280" height="720" poster="https://websima.academy/wp-content/uploads/2020/11/image-optimize-seo-min.png" src="https://websima.academy/wp-content/uploads/videos/image-resize.mp4" ]

 

کم کردن حجم عکس چه تاثیری بر سئو سایت دارد؟

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

1- جلوگیری از خروج سریع کاربران

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

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

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

2- صرفه جویی در فضای هاست و پهنای باند

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

تصویر بالا صفحه اصلی یک سایت اینترنتی را نشان می‌دهد که حجم آن 4.3 مگابایت است! تصور کنید که در روز 1000 نفر از این صفحه بازدید کنند، در نتیجه برای میزبانی همین صفحه از سایت به 120 گیگابایت پهنای باند ماهانه نیاز خواهیم داشت. جالب است که فقط تصویر موتور سیکلت نزدیک به 3 مگابایت است و با بهینه‌سازی (بدون کاهش کیفیت) به 150 کیلوبایت کاهش می‌یابد.

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

3- همراهی با الگوریتم جدید گوگل و مفهوم Core Web Vitals

گوگل به طور رسمی اعلام کرده است که از سال 2021، فاکتورهای مرتبط با تجربه کاربری را در الگوریتم‌های رتبه‌بندی نتایج جستجو وارد خواهد کرد. این فاکتورها که بخش مهمی از آن را مفاهیم Core Web Vitals تشکیل می‌دهد، نه تنها بر سرعت بارگذاری صفحه که بر موضوعات عمیق‌تری شامل زمان نمایش بزرگترین المان صفحه (Largest Contentful Paint) تمرکز دارند.

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

چگونه حجم عکس را کم کنیم؟ بدون افت کیفیت!

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

فتوشاپ؛ بهترین نرم افزار کاهش حجم عکس

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

1- ذخیر تصویر برای نمایش در وب (Save for web)

فتوشاپ نرم افزار محبوب و قدرتمند برای طراحان گرافیک است، توامندنی‌های این نرم افزار بسیار گسترده است. با توجه به اینکه فتوشاپ برای بیشتر مدیران سایت‌ها شناخته شده و در دسترس است، یکی از محبوب‌ترین روش‌های کاهش حجم عکس بدون افت کیفیت، استفاده از قابلیت Save For Web است. تصویر مورد نظر را در این نرم افزار باز کرده و پس از انجام تغییرات و اصلاحات به مسیر File > Export > Save for Web بروید. همچنین می‌توانید از کلید کنترلی ctrl+shift+Alt+S استفاده کنید.

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

2- انتخاب فرمت مناسب

نوع فرمت انتخابی برای تصویر، بر حجم آن تأثیرگذار خواهد بود. با توجه به نوع تصویر و محل مورداستفاده آن باید متناسب‌ترین فرمت را انتخاب کنید. برای تصاویری که طبیعی و واقعی هستند (مثلا یک منظره، خودرو، انسان و ...) و تنوع رنگ در آنها زیاد است، بهترین انتخاب فرمت JPG با کیفیت 55 تا 65 است. اگر عکس مورد نظر شما با نرم افزارهای گرافیکی طراحی شده و تعداد و تنوع رنگ‌ها در آن کم است پیشنهاد می‌کنیم از گزینه PNG-8 استفاده کنید.

در فرمت jpeg ابعاد تصویر مستقیما بر سایز آن تاثیر گذار است و در فرمت PNG تنوع رنگ. در نتیجه اگر یک تصویر با تعداد رنگ محدود و سایز بزرگ را به صورت PNG ذخیر کنید متوجه تفاوت چشم‌گیر در حجم نهایی آن خواهید شد.

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

3- انتخاب سایز استاندارد برای تصاویر

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

تصویر زیر نحوه نمایش تصاویر در سایت آکادمی وبسیما است. بزرگترین فضای موجود برای نمایش تصاویر عرض 820 پیکسل است. هرچقدر هم که تصویر ما بزرگتر از آن باشد برای کاربر تفاوتی نخواهد کرد. یک تصویر با عرض 1600 پیکسل عملا حجمی 4 برابر تصویر 800 پیکسلی دارد (عرض*ارتفاع).

برای انجام این کار نیز می‌توانید از فتوشاپ یا ابزار کراپ در انواع نرم‌افزارهای ادیت تصویر استفاده کرد. برای تغییر سایز طول و عرض یک تصویر در فتوشاپ کافیست به مسیر image > image size مراجعه کرده و در کادر width و height میزان طول و عرض دلخواه را وارد کنید.

در سیستم‌های مدیریت محتوا مانند وردپرس چندین نسخه با سایزهای مختلف از یک تصویر تولید می‌شود که براساس سایز صفحه نمایش کاربر فراخوان می‌شوند. به عبارت دیگر تصویری که در موبایل به کاربر نمایش داده می‌شود از نظر ابعاد و حجم به مراتب کوچکتر از نسخه دسکتاپ است. به این تکنیک Responsive Images گفته می‌شود.

استانداردها و تکنیک‌های بهینه‌سازی تصاویر و بهبود سرعت سایت به صورت کامل و کاربردی در کارگاه آموزش سئو تکنیکال ارائه می‌شود.

[websima_workshop_cta ids="49"]

کاهش حجم عکس با ابزارهای آنلاین

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

imagecompressor.com ؛ ساده و سریع

کار کردن با این وب‌سایت بسیار ساده است. شما می‌توانید تا 20 تصویر را به صورت همزمان در این ابزار وارد کرده و نسخه بهینه شده آنها را در یک فولدر زیپ شده دریافت کنید.

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

این ابزار به شما اجازه می‌دهد فاکتور کیفیت را تغییر داده و تاثیر آن بر کیفیت تصویر را در لحظه مشاهده کنید. براساس تنوع رنگ، محل استفاده و محتوای تصویر این عدد بهتر است بین 85 تا 95 انتخاب شود (پیش فرض روی 90). در تصویر بالا شما مقایسه نسخه بهینه شده (سمت راست) با نسخه اصلی را مشاهده می‌کنید. جالب است که با کاهش 84 درصدی حجم عکس (520 کیلوبابیت) چشم ما قادر به تشخیص تفاوت کیفیت آنها نیست.

tinypng.com ؛ استفاده از API

ابزار دوم سایت tinypng است که مشابه ابزار قبلی اجازه ارسال همزمان 20 تصویر و دریافت آنها به صورت زیپ یا ارسال به Dropbox را دارد.

میزان فشرده‌سازی تصویر در این ابزار 89 درصد بوده که از imagecomressor بیشتر است. تفاوت اصلی در این سایت این است که امکان مقایسه قبل و بعد از بهینه‌سازی و تعیین میزان فشرده‌سازی را ندارید ولی این سایت از یک سرویس API نیز پشتیبانی می‌کند (رایگان نیست) که به شما اجازه می‌دهد تصاویر را به صورت اتوماتیک برای این ابزار ارسال کرده و نسخه بهینه شده را (حتی در ابعاد دلخواه) دریافت کنید. به عنوان مثال سایتی مثل دیوار که تصاویر آن را کاربران بارگذاری می‌کنند می‌تواند با استفاده از این ابزار همه عکس‌ها را پیش از انتشار بهینه‌سازی کرده و از حفظ کیفیت و سرعت سایت خود مطمئن باشد.

compressnow.com ؛ کاهش حجم تصاویر gif

مهمترین تفاوت این ابزار با دو گزینه قبلی این است که از تصاویر با فرمت Gif هم پشتیبانی می‌کند. در واقع اگر تصویر یا انیمیشن شما با فرمت gif تولید شده بهتر است از این ابزار برای کاهش حجم استفاده کنید.

برخلاف سایت tinypng که تصاویر با حجم بیشتر از 5 مگابایت برا قبول نمی‌کند در این سایت محدودیت سایز به 9 مگابایت افزایش یافته و امکان ارسال 10 تصویر به صورت همزمان در نظر گرفته شده است.

imageresizer.com ؛ تغییر ابعاد تصویر

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

اگر نیاز به انجام تغییرات در تصویر و بریدن گوشه‌های آن داشته و امکان دسترسی به فتوشاپ را ندارید، این ابزار بهترین گزینه در دسترس است.

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

کلیه استانداردهای سئو برای تصاویر و تاثیر آن بر سئو داخلی مقاله به صورت کامل در کارگاه آموزش تولید محتوا آموزش داده می‌شود.