بهینه سازی عکس برای موتور های جستجو

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

فرمت عکس

فرمت های مختلفی برای عکسها وجود دارند که معروف ترین آنها عبارتند از png ، jpg و gif دوفرمت Webp و SVG نیز در چند سال اخیر مورد استفاده قرار گرفته اند که در دنیای بهینه سازی سایت برای موتور جستجو (طراحی سایت , سئو سایت , طراحی سایت ) از اهمیت ویژه ای برخوردار هستند، در ادامه در مورد این دو فرمت توضیح داده شده است.

فرمت Webp

گوگل در سال ۲۰۱۰ فرمت Webp را برای عکس ها به صورت متن باز معرفی کرد. فایل های با فرمت Webp از فرمت های jpg و png فشرده تر هستند و از انیمیشن و transparency نیز پشتیبانی می کنند و بنابراین جایگزین  مناسبی برای فایل های GIF نیز هستند.

انواع فایل Webp

فرمت Webp با دو نوع Lossless یا بدون افت کیفیت و Lossy یا با افت کیفیت قابل ارائه هستند. طبق اعلام گوگل، فایل های Webp از نوع Lossless به میزان ۲۶ درصد و از نوع Lossy به میزان ۳۴-۲۵ درصد فشرده تر از فایل های JPEG فشرده شده با تکنیک های دیگر هستند. همچنین تبدیل فایل PNG بهWebp سایز فایل را به صورت میانگین به میزان ۴۵ درصد کاهش می دهد.

مرورگر های گوگل کرومو اپرا  از ابتدا از فرمت Webp پشتیبانی می کردند ولی مایکروسافت ایترنت اکسپلورر از ورژن ۶ به بعد از Webp پشتیبانی می کند.

فرمت SVG

SVG مخفف Scale Vector Graphic است و در سال ۲۰۰۱ توسط کمپانی W3C معرفی گردید. فایل های SVG به صورت وکتور هستند. اگر یک فایل SVG را با یک ادیتور متنی مانند notepad ناهید دید که یک فایل SVG کاملا به صورت کد نوشته می شود و به عنوان مثال می توانید کد رنگ قسمت های مختلف عکس را در ادیتور متنی تغییر دهید. یکی از مزیت های عکس های با فرمت SVG این است که می توان به راحتی از آنها به صورت inline در HTML استفاده نمود.

تبدیل فرمت عکس

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

نکته ای که باید به آن دقت کرد این است که از هر فرمتی که استفاده می شود، باید حداقل سایز فایل لازم را داشته باشد. همانطور که در فصل PageSpeed Insights گفته شد، به عنوان نمونه می توانید در نرم افزار فوتوشاپ با استفاده از save for web و تنظیم کیفیت روی عدد ۶۵-60، سایز فایل عکس را تا حدی کاهش دهید که چشم انسان متوجه افت کیفیت آن نشود.

inline کردن عکس

در راستای بهینه سازی سایت روش های زیادی برای بهینه سازی عکس و کاهش تعداد درخواست سرور وجود دارد که یکی از آنها کم کردن تعداد درخواست یا request به سرور جهت و عکس ها است. یکی از راههای کاهش تعداد درخواست به سرور استفاده از تکنیک inline کردن عکس است.

استفاده از base64 برای inline کردن عکس

از base64 برای encode کردن باینری به متن استفاده می شود. با استفاده از این تکنیک این امکان وجود دارد که هر عکسی را به صورت داده های متنی ذخیره کرد. خوشبختانه مرورگرهای مختلف می توانند base64 را decode کنند، به عبارت دیگر اگر شما یک عکس را به صورت base64 به صورت inline در فایل HTML در <img> بنویسید، مرورگرها می توانند آن عکس را در صفحه HTML رندر کرده و به کاربر نمایش دهند.

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

اضافه کردن عکس به صورت base64 در HTML به روش زیر است:

<“=img src=”data:image/jpeg;base64,/9j/4AAQSkZIKACgD/9k>

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

https://www.base64-image.de

اینلاین کردن عکس در CSS با base64

این امکان وجود دارد که از تکنیک base64 برای حذف درخواست به سرور جهت بارگذاری عکس در CSS استفاده نمایید. بدین جهت می توانید عکسbackground را به صورت base64 در CSS هم بنویسید.

در نمونه زیر یک عکس به صورت base64 در CSS به عنوان پس زمینه قرار داده شده است.

inline.

{background:url(data:image/gif;base64,ROIGODlhEAAQAMQAAORHHOVS}

KuhPGolfo0o/XBs/fNwfjZ0fKCrKUE1lBavAViFIDITImbKC5Gm2hB0SIBCBM

{;QiBOUjIQA7) no-repeat right center

اینلاین کردن عکس SVG

عکسهای با فرمت SVG را می توانید با هر ادیتور متنی مانند notepad در ویندوز باز کرده و کدهای درون آن را مشاهده کنید. اگر عکس SVG را با ادیتور متنی باز کنید، دو تگ <svg> و <svg/> را می توانید در ابتدا و انتهای کدها ببینید. برای inline کردن عکس SVG دقیقا به همین تگ باز و بسته شدن svg و هر آنچه در بین آنها است نیاز دارید.

برای اضافه کردن یک عکس با فرمت SVG از روش زیر عمل کنید:

<“svg width=”100” height=”100>

<circle cx=”50″ cy=”50″ r=”40″ stroke=”green” stroke-width=”4″ fill=”yellow>

<svg/>

ایراد inline کردن عکس

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

ولی وقتی از تکنیک inline کردن عکس استفاده می کنید، مرورگر آن عکس را کش نمی کند، و هر بار برای لود عکس باید کاراکترهای base64 درون HTML را بخواند. در نتیجه برای عکس هاىی که در  صفحات گوناگون استفاده می شوند، استفاده از تکنیک اینلاین کردن عکس ها در HTML کار منطق به نظر نمی رسد. توجه داشته باشید که اگر عکسی به صورت base64 به عنوان بکگراند در CSS آمده باشد، به دلیل کش شدن فایلهای CSS توسط مرورگرها، آن عکس نیز کش خواهد شد.

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

مرورگرهای +4 IE 8+، Edge، Opera 9+، Firefox 2+، Safari 3.1+، Chrome از base64 encoding پشتیبانی می کنند.

تکنیک CSS immage Sprites

در ارتباط با موضوع تکنیک CSS immage Sprites می توان گفت ابتدا در دهه ۸۰ میلادی تولید کنندگان بازی های آتاری و کمدو برای بالا بردن کارایی سخت افزار اقدام به ترکیب عکس های کوچکی که در صحنه های مختلف بازی استفاده می شد با یکدیگر کردند و سپس با گذاری عکس بزرگتر تولید شده در مموری، قسمتهایی از عکس بزرگتر را در صحنه هایی که می خواستند نمایش می دادند.

تکنیک CSS immage Sprites دقیقا از همان تنوری دهه ۸۰ بازی های آتاری تبعیت می کند. در تکنیک CSS Sprites شما می توانید تعدادی عکس را در یک عکس جدید در کنار یکدیگر قرار دهید و در حقیقت یک فایل عکس داشته باشید که تعدادی عکس دیگر در آن در موقعیت های مختلف در کنار یکدیگر قرار گرفته باشند. سپس شما می توانید عکس مذکور را یک بار بار گذاری کردهو با استفاده از مشخص کردن فاصله هر عکس کوچک از لبه های عکس بزرگ و همچنین تعیین پهنای هر عکس کوچک در CSS، اقدام به نمایش عکس کوچک مورد نظرتان کنید.

بنابراین از تکنیک CSS Sprites جهت بهینه سازی عکس(طراحی سایت , سئو سایت, طراحی سایت فروشگاهی) استفاده نمی شود و جهت بهینه سازی (طراحی سایت شرکتی , ساخت سایت , قیمت طراحی سایت , طراحی سایت )تعداد درخواست هایی که به سرور برای بارگذاری عکس ها ارسال می شود، استفاده میشود.

چه زمانی از CSS Image Sprites استفاده کنیم

استفاده از CSS Sprites همیشه جایز نیست و بیشتر برای عکس هایی مناسب است که در صفحات مختلف استفاده می شوند و در نتیجه با ادغام کردن عکس های پرکاربرد با این تکنیک می توانید تعداد درخواست به سرور را کاهش دهید.

چه زمانی از CSS Image Sprites استفاده نکنیم

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

استفاده از CSS Sprite Generator

ادغام کردن عکس ها و محاسبه فاصله هر عکس کوچک از لبه های عکس بزرگ و نوشتن CSS کمی وقت گیر است.

شما می توانید با استفاده از ابزار های آنلاین مانند سایت http://css.spritegen.com به راحتی عکس های خود را آپلود کنید و یک عکس بزرگ به همراه کلاس های CSS مورد نیاز و نحوه استفاده از آن در HTML را دریافت کنید.