تصاویر تاثیر زیادی را در سئو سایت دارند. اگر از این فاکتور به درستی استفاده شود، علاوه بر افزایش سرعت بهینه سازی، تجربه کاربری نیز بهبود میبابد. در بهینه سازی تصاویر مواردی نظیر محتوا، کیفیت، اندازه، حجم و فرمتهای تصاویر باید رعایت شوند. از جمله چالش هایی که بر سر فرمت تصاویر وجود دارد، دوراهی استفاده از فرمت png یا jpg برای تصاویر، و یا ذخیره و استفاده از تصویر با پسوند jpg یا jpeg است.
شناخت انواع فرمت تصاویر باعث میشود انتخاب درستی را در رابطه با تصاویر سایتمان داشته باشیم. در ادامه به معرفی و توضیح انواع فرمت تصاویر و کاربرد صحیح آن ها میپردازیم.
فهرست مطالب
فرمت مناسب تصاویر برای سئوی سایت
فرمت های تصاویر دیجیتالی براساس ساختار و شیوهی شکلگیری به دو دسته شطرنجی (Raster) و تصاویر بُرداری (Vector) تقسیم میشوند. انواع فرمت های موجود تصویر نظیر jpg ، png ، svg ، eps و غیره همگی در این دو دسته کلی قرار میگیرند.
تصاویر شطرنجی از اجتماع متراکم پیکسل ها در کنار هم تشکیل شده و کیفیت آن با مقادیری مانند dpi یا ppi بررسی میشود. هرچقدر میزان تراکم یا dpi در این ساختار بیشتر باشد، کیفیت و البته حجم تصویر نیز افزایش مییابد. به همین جهت نیز میباشد هنگامی که ابعاد این تصاویر را نسبت به اندازه اصلی بیشتر میکنیم، با کاهش کیفیت تصویر مواجه خواهیم شد.
معمولا تصاویری که در محتوای صفحات سایتمان بکار میگیریم در دسته تصاویر پیکسلی، شطرنجی یا همان raster هستند. پسوندهایی مثل JPG و PNG از جمله این تصاویر میباشند.
تصاویر JPEG
فرمت jpg یا jpeg هردو مخفف عبارت Joint Photographic Experts Group میباشند و بایکدیگر تفاوتی ندارند. این فرمت ها از رایجترین و البته نامآشناترین فرمت تصویر مورد استفاده است.
تصاویر دارای فرمت jpeg یک انتخاب بسیار مناسب برای صفحات وبسایت است. اما این فرمت lossy است. بدین معنا که به واسطهی کاهش حجم تصویر، کیفیت آن نیز کاهش پیدا خواهد کرد. با این حال باید به یک تناسبی میان کیفیت و حجم به منظور بارگذاری تصاویر jpeg رسید. توصیه میکنیم با نگهداشتن dpi این فرمت بین 72 تا 150، حجم تصویر برای بارگذاری در صفحات وب را کمتر از 100 کیلوبایت حفظ کنید.
فرمت PNG
فرمت PNG کوتاه شدهی عبارت Portable Network Graphics میباشد. این فرمت نیز همانند فرمت پیشین بسیار رایج است. از جمله مزایای آن میتوان به lossless (یعنی امکان ویرایش در عینِ عدم کاهش کیفیت) بودن، تنوع رنگ مناسب و امکان ذخیره با قابلیت transparency اشاره کرد. از ویژگی های مهم فرمت PNG امکان ذخیرهسازی بصورت شیشهای یا با transparency است که از آن میتوان در المانهای UI استفاده کرد. با اینحال برای این منظور فرمت SVG جایگزین بهتری است.
فرمت GIF
مسلما فرمت GIF یا گیف زیاد به گوشتان خورده است. این فرمت مخصوص تصاویر متحرکی که در فضای وب و وبسایتها نیز کاربردها زیادی دارند.بنرهای تبلیغاتی، CTA یا کال تو اکشنها و حتی بعضاً تصاویر یک مقاله، جاهایی هستند که میتوان از فرمت گیف استفاده کرد.
تصاویر فرمت GIF دارای محدودیتهایی نیز میباشد. حجم بالا، تنوع رنگ بسیار پایین (حداکثر 256) رنگ و کیفیت نه چندان مناسب در اغلب تصاویر، از جمله مواردی است که باید درمورد این فرمت در نظر داشته باشیم.
فرمت WEBP
WEBP از جمله فرمت هایی است که اخیرا در فضای وب بسیار از آن استفاده میشود. وب سایت هایی مانند Pinterest یا Dribbble که محوریت فعالیتشان بر پایه تصاویر میباشد اخیرا این فرمت را جایگزین تصاویر با فرمت JPG کردهاند. دلیل این انتخاب نیز به خاطر تفاوت 30 درصدی حجم فرمت WEBP در مقایسه با یک تصویر با کیفیت مشابه و با پسوند JPG است.
علاوه بر حجم کم، دارا بودن قابلیت transparency از دیگر ویژگی های این فرمت است. همچنین سازگارتر شدن مرورگرهای مختلف سبب شده استفاده از فرمت WEBP در فضای وب گسترش یابد.
فرمت SVG
برخلاف سایر فرمت های مذکور، فرمت SVG در دستهبندی فرمتهای بُرداری یا vector قرار میگیرد. با اینحال کاربردهای متنوعی که در بحث طراحی سایت و همچنین اهمیت بالایی در سئو تکنیکال دارد. کیفیت تصاویر این فرمت بسیار بالا است و باتوجه به اینکه برپایه متن بنا شده حجم بسیار پایینی دارد. همچنین این ویژگی سبب شده که گوگل به راحتی بتواند به کمک ربات های خزندههای خود این تصاویر را کراول، ایندکس و درک کند و از این جهت نیز نقش خود را به خوبی در سئو سایت ایفا میکنند.
بیشترین کاربرد فرمت SVG برای برندینگ در فضای وب و همچنین تصویرسازیهای گرافیکی در وبسایتها میباشد. Scalable Vector Graphics همانطور که از عنوانش نیز مشخص است مناسب تصاویر گرافیکی و طراحیها هستند و استفاده از آنها برای تصاویر رئال، چندان منطقی و نتیجهبخش نیست.
فرمت های مناسب برای قسمتهای مختلف سایت
حال که با انواع فرمت ها آشنا شدیم باید ببینیم کدام فرمت تصاویر برای کدام قسمت سایت مناسب است. با توجه به اطلاعاتیکه در جدول پایین آمده است، خواهیم توانست بهترین فرمت را متناسب با کاربرد منظرمان انتخاب کنیم:
فرمت تصویر | کیفیت | حجم | مناسب برای |
JPG | مناسب | مناسب | تصاویر واقعی و اسلایدر |
PNG | عالی | عالی | تصاویر گرافیکی با تنوع رنگ پایین |
WEBP | مناسب | عالی | همه تصاویر سایت |
GIF | پایین | زیاد | بنرهای تبلیغاتی |
SVG | عالی | عالی | لوگو و آیکون ها (یک یا دو رنگ) |