در راستای بهینه سازی سایت حرفه ای روش های زیادی برای بهینه سازی عکس و کاهش تعداد درخواست به سرور وجود دارد که یکی از آنها کم کردن تعداد درخواست یا request به سرور جهت لود عکس ها است. یکی از راههای کاهش تعداد درخواست به سرور جهت لود عکسها، استفاده از تکنیک CSS Sprite است ولی اگر بخواهید به طور کامل برای لود یک عکس هیچ درخواستی به سرور ارسال نکنید، می توانید از تکنیک inline کردن عکس استفاده کنید.

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

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

جهت بارگذاری عکس به صورت base64 در HTML به روش زیر عمل کنید:

شما می توانید در مرورگر گوگل کروم با کلیک راست بر روی عکس بالا و کلیک بر روی inspect، از نحوه استفاده از base64 برای اینلاین کردن عکسها آشنا شوید.

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

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

کاربرد base64 در هک

یکی از تکنیک هایی که هکر ها استفاده میکنند، تکنیک encoding کدها با base64 است که شناسایی کدهای آلوده توسط کاربران را سخت تر کنند. برای اطلاعات بیشتر می توانید مقاله کدهای رمزگذاری شده و نامفهوم در سایت را مطالعه کنید.

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

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

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

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

مزیت inline کردن عکس

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

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

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

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

ضمنا مرورگرهای زیر از base64 پشتیبانی می کنند

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

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

کاربرد CSS Sprite در بهینه سازی سایت برای موتور جستجو

با استفاده از CSS Image Sprites، تعداد درخواست هایی که به سرور زده می شود کاهش می یابد و در نتیجه response time سرور بهبود می یابد. یک سئوکار حرفه ای باید دقت داشته باشد که جهت سئوی حرفه ای سایت باید حداکثر تلاش خود را بکند که تعداد درخواست های که به سرور ارسال می شود بهینه شود که ادغام کردن تعدادی عکس با یکدیگر یکی از این راه ها است.

تاریخچه Image Sprites

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

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

به عنوان نمونه در شکل زیر تعداد 3 عکس یوز با رنگ های زرد و صورتی و آبی نمایش داده شده اند. سه عکس مذکور در حقیقت درون یک عکس بزرگتر هستند و با استفاده از CSS Sprites در محل دلخواه نمایش داده شده اند.

در کجا از CSS Sprite استفاده کنیم

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

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

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

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

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

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

فرمت Webp

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

انواع فایل Webp

فرمت Webp با دو نوع Lossless یا بدون افت کیفیت و Lossy یا با افت کیفیت ارائه شده اند. طبق اعلام گوگل، فایل های Webp Lossless به میزان 26 درصد و فایل های Webp Lossy به میزان 25-34 درصد فشرده تر از فایل های JPEG فشرده شده با تکنیک های دیگر هستند. همچنین تبدیل فایل PNG به Webp سایز فایل را به صورت میانگین به میزان 45 درصد کاهش می دهد.

مرورگرهایی که از Webp پشتیبانی می کنند

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

فرمت SVG

SVG مخفف Scale Vector Graphic است و در سال 2001 توسط کمپانی W3C معرفی گردید. فایل های SVG به صورت وکتور هستند. اگر یک فایل SVG را با یک ادیتور متنی مانند notepad باز کنید، خواهید دید که یک فایل SVG کاملا به صورت کد نوشته می شود و به عنوان مثال می توانید کد رنگ قسمت های مختلف عکس را در ادیتور متنی تغییر دهید.

استفاده از SVG به صورت inline

از آنجایی که ماهیت عکس های SVG به صورت کد هستند میتوانید از آنها به صورت inline در کد HTML استفاده کنید. مزیت استفاده از inline SVG این است که برای بارگذاری آنها در مرورگر نیازی به ارسال request به سرور نیست و عیب آن این است که امکان کش شدن inline SVG مانند فایل SVG وجود ندارد.