WebP چیست؟ آموزش استفاده از WebP در ASP.NET Core به زبان ساده
احتمالا شما هم جدیدا با این موضوع برخورد کرده این که نتایج جستجوی تصاویر گوگل بیشتر با پسوند webp نمایش داده می شد. پسوندی که تا همین چند وقت پیش بسیار غریبه بود و البته همچنان هم کمی جدید به نظر می رسد . در واقع WebP را می توان نسل جدید تصاویر اینترنتی عنوان کرد که جایگزین تصاویر سنگین خواهند شد .webP یک فرمت تصویری جدید هست که توسط گوگل ارائه شده. مزیت اصلی این فرمت تصویری نسبت به سایر فرمتهای رایج مثل png و jpg حجم پایین تر آن بوده بطوری که 25-30 درصد کاهش حجم دارد.
دوره های شبکه، برنامه نویسی، مجازی سازی، امنیت، نفوذ و ... با برترین های ایران
سرفصل های این مطلب
این مسئله باعث افزایش بارگذاری سرعت سایت شده و در نتیجه تاثیر چشمگیری بر SEO سایت شما میگذارد.در حال حاضر اکثر مرورگرهای رایج از این فرمت پشتیبانی میکنن و شما میتونین در سایتهاتون ازش استفاده کنین . WebP در سال 2010 به دنیای وب معرفی شد و برگرفته ای از یک فرمت ویدیویی به شکل VP8 است . گوگل برای تحول وب از سال 2011 بصورت تخصصی بر روی این فرمت تصویر فشرده سازی شده و با کیفیت تمرکز کرد و این روزها وب سایتهایی که از WebP استفاده می کنند از نظر گوگل دارای کیفیت بهتری هستند.
آموزش استفاده از WebP در ASP.NET Core
خوب حالا میخوایم ببینیم چطور میتونیم از این فرمت جدید تو پروژه های asp.net core مون استفاده کنیم . در ابتدا ما بایستی 3 تا پکیج زیر رو با استفاده از nuget نصب کنیم :
Install-Package System.Drawing.Common
Install-Package ImageProcessor
Install-Package ImageProcessor.Plugins.WebP
حالا کدی که در view مون قرار میگیره به شکل زیر هست :
<form method="post" enctype="multipart/form-data">
<input name="imageFile" type="file" />
<input type="submit" value="Upload Image" />
</form>
@if (ViewBag.ImagePath != null)
{
<picture style="height:500px;width:500px;">
<source srcset="@ViewBag.ImagePath" type="image/webp" />
<img src="@ViewBag.ImagePath" style="height:500px;" />
</picture>
}
خوب حالا میریم سراغ کد Backend مون:
public IActionResult Index()
{
return View();
}
[HttpPost]
public IActionResult Index(IFormFile imageFile)
{
if (imageFile == null)
return View();
var storagePath = Path.Combine(_hostingEnvironment.WebRootPath, "images", Path.GetFileNameWithoutExtension(imageFile.FileName) + ".webp");
using (var stream = new FileStream(storagePath, FileMode.Create, FileAccess.Write))
{
using (ImageFactory imageFactory = new ImageFactory())
{
imageFactory.Load(imageFile.OpenReadStream())
.Format(new WebPFormat())
.Quality(50)
.Save(stream);
}
}
ViewBag.ImagePath = $"/images/{Path.GetFileName(storagePath)}";
return View();
}
ما دو تا Action با نام Index داریم. اولی برای پردازش درخواست های GET هست که صفحه رو به کاربر نمایش میده. Action بعدیمون برای پردازش درخواست های POST استفاده میشه که با فیلتر HttpPost این مسئله رو به asp.netcore گوشزد کردیم !!! همینطور اکشن POST مون یک پارامتر ورودی از نوع IFormFile داره که اسمش imageFile هست (اگر به کد View دقت کنین ، برای input file یی که قرار دادیم نام imageFile رو مشخص کردیم. خوب حالا کد رو خط به خط با هم بررسی کنیم:
if (imageFile == null)
return View();
در این قسمت چک میکنیم که آیا کاربر فایلی ارسال کرده یا نه (به غیراز این مسئله ، میتونین در مورد اینکه آیا اصلا عکسی ارسال کرده یا نه هم بررسی انجام بدین ، ولی در این مثال اینکار انجام نشده ) در خط زیر :
var storagePath = Path.Combine(_hostingEnvironment.WebRootPath, "images", Path.GetFileNameWithoutExtension(imageFile.FileName) + ".webp");
ما اومدیم آدرسی که میخوایم فایل تصویرمون ذخیره بشه رو مشخص کردیم.
- اگر دقت کنین ما از متغییری با ن ام _hostingEnvironment استفاده کردیم . این متغییر از نوع IWebHostEnvironment هست که از طریق سازنده (Constructor) با استفاده از DI به کلاسمون تزریق (Inject) شده .
خوب حالا میریم سراغ بررسی کدهای زیر:
using (var stream = new FileStream(storagePath, FileMode.Create, FileAccess.Write))
{
using (ImageFactory imageFactory = new ImageFactory())
{
imageFactory.Load(imageFile.OpenReadStream())
.Format(new WebPFormat())
.Quality(50)
.Save(stream);
}
}
در ابتدا یک FileStream با نام stream به مسیری که قرار هست فایل در اون ذخیره بشه ایجاد میکنیم. چون FileStream اینترفیس IDisposable رو پیاده سازی کرده ، با پایان اسکوپ using ، بصورت خودکار مناب اشغالی توسط این استریم آزاد میشه . بعد از اون یک ImageFactory ایجاد کردیم که از کلاسهای موجود در پکیج ImageProcessor هست و امکان کار با تصاویر رو برامون فراهم میکنه .
سپس متغییر imageFile که به عنوان پارامتر ورودی اکشنمون تعریف شده و امکان دسترسی به تصویر ارسالی رو برامون فراهم میکنه رو به متد Load پاس میدیم ، سپس با فراخوانی تابع Format مشخص میکنیم که میخوایم تصویرمون با چه فرمتی (در اینجا WebPFormat که از طریق پکیج ImageProcessor.Plugins.WebP نصب شده) ذخیره بشه . سپس کیفیت مورد نظر رو مشخص میکنیم ودر نهایت با فراخوانی تابع Save و پاس دادن متغییر stream ، تصویر نهایی رو در مسیر موردنظر ذخیره میکنیم.میتونین سورس مثال رو هم از فایل ضمیمه دانلود کنین.موفق و سربلند باشید