Blazor تحسين سهل للصور باستخدام

تطبيق Blazor الخاص بك: تحسين سهل للصور باستخدام BlazorImage

في مشهد تطوير الويب اليوم، يعد تحسين الصور أمرًا بالغ الأهمية لتقديم تجارب مستخدم سريعة وجذابة. يمكن للصور الكبيرة وغير المحسّنة أن تبطئ تطبيقات Blazor الخاصة بك بشكل كبير، مما يؤدي إلى إحباط المستخدمين وتصنيفات SEO ضعيفة. ولكن ماذا لو كان بإمكانك أتمتة هذه العملية بسلاسة داخل مشاريع Blazor الخاصة بك؟

إليك BlazorImage، مكتبة قوية وسهلة الاستخدام لتحسين الصور مصممة خصيصًا لتطبيقات Blazor. سواء كنت تبني مواقع ويب ثابتة أو تطبيقات تفاعلية من جانب الخادم، يوفر BlazorImage مجموعة شاملة من الميزات لضمان أن صورك دائمًا صغيرة الحجم وفعالة وسريعة للغاية.

تحدي تحسين الصور في Blazor

يمكن أن يكون تحسين الصور يدويًا مهمة شاقة وتستغرق وقتًا طويلاً. غالبًا ما يحتاج المطورون إلى التوفيق بين أدوات وتقنيات متعددة لتغيير حجم الصور وضغطها وتحويلها إلى أكثر التنسيقات كفاءة. يمكن أن تصبح هذه العملية أكثر تعقيدًا عند التعامل مع التصميمات المتجاوبة والحاجة إلى تقديم أحجام صور مختلفة للأجهزة المتنوعة.

تقديم BlazorImage: حليفك في تحسين صور Blazor

يبسط BlazorImage سير العمل هذا بالكامل من خلال توفير طريقة سهلة الاستخدام للمطورين لتحسين الصور تلقائيًا مباشرة داخل تطبيق Blazor الخاص بك. تتعامل هذه المكتبة مع العمل الشاق، مما يسمح لك بالتركيز على بناء واجهات مستخدم مذهلة دون القلق بشأن تعقيدات تحسين الصور.

المميزات

• 🖼️ أصول ثابتة مُحسَّنة: يُنشئ صورًا مُحسَّنة للغاية مباشرة كأصول ثابتة لتحميل سريع للغاية.
• 🗜️ ضغط الصور: يمكن غالبًا تقليل أحجام الصور بنسبة تتراوح بين 70-90٪.
• 📏 صور متجاوبة: يُنشئ تلقائيًا أحجام صور متعددة لعرض شاشة مختلف، مما يضمن أوقات تحميل وأداء مثاليين.
• 📸 تنسيقات الصور: يدعم تنسيقات صور متعددة، بما في ذلك WebP و JPEG و PNG و AVIF، مما يسمح بمرونة في تقديم الصور.
• ⚪ عنصر نائب: يُنشئ صورة عنصر نائب منخفضة الجودة لتحسين تجربة المستخدم أثناء التحميل.
• 🔄 التحميل الكسول: يُحسن أوقات تحميل الصفحة الأولية عن طريق تحميل الصور فقط عندما تكون مرئية للمستخدم.
• 🗄️ تخزين مؤقت ذكي: تخزين مؤقت طويل الأجل مع إعادة تحقق فعالة يضمن محتوى جديدًا دون إعادة المعالجة.
• ⚡ عرض متعدد الاستخدامات: يدعم كلاً من أوضاع العرض الثابت والتفاعلي لتحقيق أقصى قدر من المرونة في تطبيقات Blazor الخاصة بك.

🚀 البدء

المتطلبات الأساسية

• .NET 9.0 SDK أو أعلى

القيود

• يدعم حاليًا .NET 9.0 أو أعلى فقط.
• يتم دعم الصور المحلية فقط في هذا الوقت. من المخطط دعم الصور البعيدة في الإصدارات المستقبلية.
• Blazor WebAssembly غير مدعوم بعد.

التثبيت

قم بتثبيت BlazorImage عبر .NET CLI أو عن طريق إضافة مرجع حزمة إلى ملف مشروعك.

باستخدام .NET CLI:

dotnet add package BlazorImage --version 1.0.3

باستخدام مدير حزم NuGet:

<PackageReference Include="BlazorImage" Version="1.0.3" />

بعد ذلك، أضف مساحة اسم BlazorImage إلى ملف _Imports.razor الخاص بك:

@using BlazorImage

تسجيل الخدمات

لتمكين BlazorImage في تطبيق Blazor الخاص بك، قم بتسجيل الخدمات الضرورية داخل ملف Program.cs الخاص بك:

builder.Services.AddBlazorImage();

يمكنك تهيئة BlazorImage بشكل أكبر باستخدام الخيارات التالية داخل طريقة AddBlazorImage:

builder.Services.AddBlazorImage(options =>
{
    // مسار تخزين الصور المعالجة. الافتراضي: "_optimized"
    options.OutputDir = "Path";

    // مصفوفة أحجام لتكوين الصورة (بالبكسل). الأحجام الافتراضية: [480, 640, 768, 1024, 1280, 1536]
    options.Sizes = new int[] { 640, 1024, 1280 }; // موصى به: يغطي أحجام الشاشة الشائعة للتصميم المتجاوب (مثل [xs, sm, md, lg, xl, 2xl, ...])

    // الجودة الافتراضية للصور المعالجة (النطاق: 15-100). القيمة الافتراضية: 75
    options.DefaultQuality = 70; // موصى به: 70-80 (توازن جيد بين الجودة والحجم)

    // تنسيق الملف الافتراضي للصور المعالجة (مثل "webp"، "jpeg"). الافتراضي: "webp"
    options.DefaultFileFormat = FileFormat.webp; // موصى به: FileFormat.webp (يوفر ضغطًا وجودة فائقة حيثما كان ذلك مدعومًا)

    // عرض نسبة العرض إلى الارتفاع للصور. الافتراضي: 1.0
    options.AspectWidth = 1.0; // موصى به: 1.0 (الحفاظ على نسبة العرض إلى الارتفاع الأصلية افتراضيًا)

    // ارتفاع نسبة العرض إلى الارتفاع للصور. الافتراضي: 1.0
    options.AspectHeight = 1.0; // موصى به: 1.0 (الحفاظ على نسبة العرض إلى الارتفاع الأصلية افتراضيًا)

    // وقت انتهاء الصلاحية المطلق للصور المخزنة مؤقتًا، نسبيًا إلى الآن. الافتراضي: 720 ساعة (30 يومًا)
    options.AbsoluteExpirationRelativeToNow = TimeSpan.FromHours(720);

    // وقت انتهاء الصلاحية المنزلق للصور المخزنة مؤقتًا. الافتراضي: فارغ (معطل)
    options.SlidingExpiration = null;
});

تعيين نقطة نهاية وقت التشغيل

استدعِ طريقة الامتداد لتهيئة خدمة الملفات الثابتة للصور المُحسَّنة في ملف Program.cs الخاص بك:

app.MapBlazorImageRuntime();

مثال للاستخدام:

// إضافة لوحة معلومات BlazorImage (اختياري - للتطوير)
app.MapBlazorImageDashboard("/blazor/images");

// 👇 أضف هذا السطر لخدمة الصور المُحسَّنة
app.MapBlazorImageRuntime();

app.MapStaticAssets();

نقاط نهاية لوحة المعلومات

توفر مكتبة Blazor Image نقاط نهاية لوحة معلومات اختيارية لإدارة الصور المُحسَّنة المخزنة مؤقتًا، مما يسمح بإجراءات مثل مسح ذاكرة التخزين المؤقت. يمكنك تعيين نقطة النهاية هذه في ملف Program.cs الخاص بك:

app.MapBlazorImageDashboard("/blazor/images"); // مثال على المسار

تكامل Blazor

لإنهاء التكامل، قم بتضمين ورقة أنماط BlazorImage والبرنامج النصي داخل ملف App.razor الخاص بك:

<link rel="stylesheet" href="@Assets["YourProjectName.styles.css"]" />

<script src="_content/BlazorImage/BlazorImage.min.js"></script>

ملاحظة: استبدل "YourProjectName" بالاسم الفعلي لمشروع Blazor الخاص بك.

مكون Image

لاستخدام مكون <Image> في تطبيق Blazor الخاص بك، ما عليك سوى الرجوع إليه في ملفات .razor الخاصة بك. إليك مثال أساسي:

<Image Src="/images/my-image.jpg" Alt="منظر طبيعي جميل" Width="200" Height="200" />

سيؤدي هذا إلى عرض إصدارات مُحسَّنة من الصورة الموجودة في /images/my-image.jpg من مجلد wwwroot.

المعلمات الرئيسية:

يوفر مكون <Image> العديد من المعلمات لتخصيص سلوكه:

• Src (مطلوب): مسار ملف الصورة الأصلي (نسبيًا إلى wwwroot). سيتعامل BlazorImage مع التحسين.
• Alt (مطلوب): نص بديل للصورة، ضروري لإمكانية الوصول.
• Fill (اختياري، منطقي): إذا كانت true، فسيحاول العنصر ملء حاويه الأصل مع الحفاظ على نسبة العرض إلى الارتفاع (على غرار CSS object-fit: cover). القيمة الافتراضية هي false.
• Width، Height: مطلوبان للصور ذات الحجم الثابت عندما تكون قيمة Fill هي false. لا يتم استخدامهما إذا كانت قيمة Fill هي true.
• Priority (اختياري، منطقي): إذا كانت true، يتم تعطيل التحميل الكسول، مما يضمن تحميل الصورة على الفور بأولوية عالية. القيمة الافتراضية هي false (تمكين التحميل الكسول).
• Title (اختياري، سلسلة): سمة العنوان للصورة.
• CssClass (اختياري، سلسلة): تطبيق فئات CSS مخصصة على علامة <img>.
• Style (اختياري، سلسلة): تطبيق أنماط مضمنة على علامة <img>.
• Quality (اختياري، عدد صحيح): الجودة المطلوبة للصورة المُحسَّنة (15-100). القيمة الافتراضية هي DefaultQuality التي تم تكوينها للمكتبة.
• Format (اختياري، تعداد FileFormat): تنسيق الإخراج المطلوب (مثل FileFormat.webp، FileFormat.jpeg، FileFormat.png، FileFormat.avif). القيمة الافتراضية هي DefaultFileFormat التي تم تكوينها للمكتبة.
  • ملاحظة: قد يتطلب إنشاء صور FileFormat.avif خطوة بناء أو معالجة ثانية بسبب تعقيد التشفير.
• Sizes (اختياري، سلسلة): سمة sizes للصور المتجاوبة، تحدد أحجام الصور لظروف إطار العرض المختلفة.
• Caption (اختياري، سلسلة): نص لعرضه كتعليق أسفل الصورة.
• CaptionClass (اختياري، سلسلة): تطبيق فئات CSS مخصصة على تعليق الصورة.
• DefaultSrc (اختياري، سلسلة): مسار لصورة احتياطية لعرضها إذا فشل تحميل الصورة الأصلية.
• EnableDeveloperMode (اختياري، منطقي): تمكين لوحة معلومات للمطور (من المحتمل لأغراض التصحيح).
• EnableInteractiveState (اختياري، منطقي): تمكين حالة تفاعلية للمكون.
• AdditionalAttributes (اختياري، Dictionary<string, object>): يسمح لك بتمرير أي سمات HTML أخرى مباشرة إلى علامة <img> الأساسية.

أمثلة الاستخدام:

ملء الحاوية:

<div style="width: 400px; height: 400px;">
    <Image Src="/images/my-wide-image.jpg" Alt="صورة عريضة" Fill="true" />
</div>

تحديد العرض والارتفاع:

<Image Src="/images/my-logo.png" Alt="شعار الشركة" Width="80" Height="80" />

تعطيل التحميل الكسول لصورة رئيسية:

<Image Src="/images/hero.jpg" Alt="صورة رئيسية" Priority="true" />

طلب تنسيق وجودة محددين:

<Image Src="/images/high-quality.png" Alt="صورة عالية الجودة" Format="FileFormat.png" Quality="80" />

سمة Sizes (مثال باستخدام Tailwind CSS):

<div className="relative">
    <div class="w-44 h-44 md:w-52 md:h-52">
        <Image Src="/images/avatar.jpg"
               Alt="صورة رمزية"
               Sizes="(max-width: 768px) 8rem, 13rem"
               CssClass="rounded-full object-cover"
               Fill="true"
               Priority="true" />
    </div>
</div>

سمة Sizes (مثال عام):

<Image Src="/images/responsive.jpg"
       Alt="صورة متجاوبة"
       Sizes="(max-width: 600px) 100vw, (max-width: 1200px) 80vw, 1200px" />

إضافة تعليق:

<Image Src="/images/product.jpg" Alt="لقطة المنتج" Caption="أحدث منتج" CaptionClass="product-caption" />

استخدام صورة افتراضية:

<Image Src="/images/non-existent.jpg" Alt="صورة احتياطية" DefaultSrc="/images/default.jpg" />

باستخدام هذه المعلمات، يمكنك إدارة وتحسين الصور بشكل فعال داخل تطبيقات Blazor الخاصة بك باستخدام مكون <Image>.