آشنایی با فرمت تصاویر و ارتباط آن‌ها با سئو سایت

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

یکی از چالش‌هایی که همه‌ی ما هنگام تولید محتوا یا بهینه‌سازی صفحات سایت با آن برخورد می‌کنیم، دوراهی استفاده از فرمت 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 قرار می‌گیرد. اما به واسطه کاربردهای متنوع و جذاب آن در طراحی سایت و اهمیت آن در سئو تکنیکال، توضیح کوتاهی درمورد این فرمت خالی از لطف نیست.

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);

سخن پایانی

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

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