inline کردن عکس در سئوی حرفه ای

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

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

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

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

base64 encoding

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

<img src="data:image/jpeg;base64,/9j/4AAQSkZJRAKACgAoAKACgD/9k=">

 

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

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

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

به عنوان مثال شکل نارنجی رنگ در ابتدای خط به صورت بکگراند در CSS تعریف شده است. کد استفاده شده در ادامه نمایش داده شده است:
.inline {background:url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7)no-repeat right center;}

کاربرد base64 در هک

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

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

فرمت های گوناگونی برای ذخیره سازی عکس ها وجود دارد که یکی از آنها فرمت SVG است. جهت آشنایی بیشتر با این فرمت می توانید مقاله فرمت عکس Webp و 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>

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

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

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

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

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

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

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

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

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

Rating: 5

3 نظر برای “بهینه سازی سایت با inline کردن عکس

  1. سلام استاد،
    چرا وقتی از عکسی که به صورت base64 در html به صورت اینلاین گذاشته اید در گوگل کروم inspect می گیریم، تعداد کاراکتر کمی را به عنوان base64 عکس نمایش می دهد ولی در واقعیت تعداد کاراکترهای bae64 آن عکس خیلی بیشتر باید باشد؟

    Rating: 5
    1. سلام، هنگامی که در گوگل کروم از عکس base64 که فرمودید inspect گرفتید، در بین کاراکترهای base64 می توانید سه نقطه پشت سر هم ببینید که نشان دهنده این است که تعداد کاراکترها زیاد بوده و مرورگر کروم آنها را دارد به صورت خلاصه به شما نمایش می دهد. اگر با موس بر روی کاراکترهای خلاصه شده hover کنید، همه کدهای base64 عکس مربوطه را خواهید دید.

  2. با توضیحاتی که شما دادید مزیت این لاین کردن عکس در نهایت افزایش سرعت لود صفحات هست که روی رنک صفحات هم تاثیر مثبت میزاره این برای سایت هایی که تصاویر زیادی را در سی اس اس به عنوان بکگراند دارند خیلی عالیه

    Rating: 5

دیدگاه و سوالات خود را با ما در میان بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *