تصاویر SVG چه تاثیری بر سئو سایت دارند؟

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

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

اما سوالی که معمولا برای کاربران پیش می‌آید این است که برای کسب بهترین نتیجه عکس‌های خود را با چه فرمتی بارگذاری کنیم. در این مقاله فرمت SVG و تاثیر آن بر سئو را بررسی می‌کنیم. با ما همراه باشید.

انواع ترسیمات

پیش از معرفی این فرمت بهتر است در مورد انواع ترسیمات در دنیای IT صحبت کنیم. در دنیای کامپیوتر ترسیمات می‌توانند از دو نوع Raster یا Vector باشند.

• Raster یا گرافیک شطرنجی به حالتی گفته می‌شود که در آن تصاویر به صورت مجموعه‌ای از پیکسل‌ها ذخیره می‌شوند. نکته مهم این است که در این حالت رنگ هر پیکسل به طور جداگانه ذخیره می‌شود و تغییر در اندازه باعث افت کیفیت خواهد شد.
• Vector Graphics یا گرافیک برداری روشی در تولید و ذخیره فایل‌های تصویری کامپیوتری است که در آن تصویر در قالب مجموعه‌ای از مشخصات هندسی نقاط، خط‌ها، منحنی‌ها و چندضلعی‌ها ذخیره می‌شود. واژه «بردار» در این کاربرد معنایی وسیع‌تر از یک خط راست دارد. یکی از شناخته شده‌ترین فرمت‌های ذخیره فایل‌های گرافیک برداری، فرمت SVG است.

SVG چیست؟

SVG یا Scalable Vector Graphics در فارسی به گرافیک برداری مقیاس‌پذیر ترجمه شده است. این فرمت یکی از قالب‌های تصویربرداری بر اساس XML است و عمدتا مخصوص فضای وب است.

به این مثال ساده توجه کنید. نمونه فایل SVG بالا می‌تواند یک مربع آبی به عرض 250 پیکسل را نمایش دهد.

<svg xmlns=”http://www.w3.org/2000/svg”>

<rect width=”250″ height=”250″ fill=”#0000FF”/>

</svg>

کاربرد تصاویر با فرمت SVG مشابه سایر فرمت‌های عکس مانند PNG، JPEG و WebP است اما جوهره اصلی آن متفاوت است. به این معنی که این تصاویر مبتنی بر بیت‌مپ (Bitmap) هستند که یعنی از مقدار مشخصی پیکسل تشکیل شده‌اند.

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

مزایای استفاده از فرمت SVG

این فرمت امکانات و قابلیت‌هایی در اختیار کاربران قرار می‌دهد که موجب ترغیب آن‌ها به استفاده از SVG می شود. از جمله:

مقیاس‌بندی  Pixel‌Perfect

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

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

حجم کم‌تر

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

ضمنا، می‌توان با استفاده از gzip آن‌ها را فشرده کرد و سایز تصویر را تا حد زیادی کم‌تر کرد و به این ترتیب تعداد بایت‌های کمتری از سمت سرور  مجازی یا CDN را می‌توان ارسال کرد.

استایل‌دهی به فرمت SVG با استفاده از CSS

خوشبختانه امکان استایل دهی به تصاویر SVG به راحتی با کد‌های CSS امکان‌پذیر است و نیازی به کدهای پیچیده نیست.

جایگزین HTML

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

پیشرفت در آینده

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

تبدیل به انیمیشن

با توجه به این که می‌توان SVG را به طور مستقیم با ویرایشگر متن ایجاد کرد، پس می‌توان آن‌ها را متحرک کرد و به انیمیشن تبدیل کرد

تاثیر SVG بر روی سئو سایت

گفتیم که تصاویر SVG مبتنی بر XML هستند ، بنابراین قابلیت خواندن و تجزیه و ایندکس‌شدن توسط موتورهای جستجو را دارند و همین امر موجب می‌شود محتوا برای موتورهای جستجو قابل تشخیص باشد و دسترسی را بهبود بخشد. در واقع از آگوست ۲۰۱۰ گوگل محتوای درون SVG را هم ایندکس می‌کند. وجود این ویژگی در SVGها بسیار موثرتر از Alt در تگ‌های img است.