- استخدام سمات HTML مثل srcset و sizes لتحسين التحميل وفقًا لدقة الجهاز.
- تطبيق عنصر الصورة لإدارة التوجيه الفني والتنسيقات الحديثة مثل WebP.
- تقنيات تحسين الصور في برنامج فوتوشوب تركز على وضع RGB، ودقة 72 بكسل لكل بوصة، والضغط الفعال.
- تطبيق CSS متقدم يستخدم خاصيتي object-fit و max-inline-size لضمان التكيف البصري.
اليوم، بات عدد الشاشات المتاحة هائلاً حقاً. فمن الساعة الذكية التي نرتديها على معصمنا إلى شاشات 4K العملاقة، يتميز كل جهاز بخصائصه الفريدة من حيث الحجم وكثافة البكسل. إذا استخدمنا صورة واحدة لكل شيء، فإننا نخاطر بأن تكون كبيرة الحجم بشكل مفرط على الهاتف المحمول وتستغرق وقتاً طويلاً للتحميل، أو أن تبدو سيئة للغاية على شاشة متطورة. مشوشة ومبكسلة تمامًا.
لتجنب هذه المشكلة، نحتاج إلى تطبيق استراتيجيات الصور المتجاوبة. لا يقتصر الأمر على تصغير حجم الصورة فحسب، بل يتعلق أيضاً بـ قم بتقديم الملف المحدد يعتمد ذلك على دقة الشاشة وعرض النافذة التي يحتاجها المتصفح. وهذا يضمن تجربة مستخدم سلسة، وتحميلًا سريعًا للموقع، وجودة عرض مثالية، بغض النظر عن سرعة الاتصال.
تدريب احترافي في برنامج فوتوشوب
قبل البدء بكتابة أي سطر من التعليمات البرمجية، يجب تنسيق الملف بشكل مثالي في برنامج فوتوشوب. الخطوة الأولى هي التأكد من أن... ملف تعريف الألوان في وضع RGBلأنه المعيار المطلق للبيئة الرقمية. إذا كانت صورتك بنظام CMYK (للطباعة)، فستبدو الألوان غريبة على الإنترنت، لذا انتقل إلى صورة > الوضع وقم بتغييره.
فيما يتعلق بالأبعاد، لا جدوى من تحميل صورة بحجم 8000 بكسل إذا كان الحد الأقصى لعرض موقعك الإلكتروني 1200 بكسل. اضبط حجم الصورة ليتناسب مع تصميمك. ومن التفاصيل الأساسية ضبط... دقة 72 بكسل لكل بوصة، وهي القيمة القياسية لعرض الصورة بشكل صحيح على الشاشات دون إضافة وزن غير ضروري.
لأغراض التصدير، يتوفر خيار حفظ للويب والأجهزة إنه حليفك الأمثل. عادةً ما يكون تنسيق JPG هو الأكثر تنوعًا للصور، ونسبة ضغط تبلغ حوالي 60% هي النسبة المثالية التي تحافظ على الجودة مع تقليل حجم الملف بشكل كبير. إذا كنت بحاجة إلى نسخ متعددة بسرعة، فاستخدم علامة التبويب تتيح لك خاصية 4-up إنشاء أربعة أنواع الحجم والجودة بنقرة واحدة، مما يوفر لك الكثير من الوقت.
قوة srcset والأحجام في HTML
عندما نريد أن يختار المتصفح أفضل نسخة من الصورة، فإن السمة srcset هي الأداة الرئيسيةبدلاً من استخدام خاصية src التقليدية فقط، نزود المتصفح بقائمة الملفات المتاحة وعرضها الفعلي (باستخدام مُعرّف 'w'). على سبيل المثال، يمكننا توفير نسخة بعرض 300w للأجهزة المحمولة ونسخة بعرض 1200w للشاشات الكبيرة.
لكن المتصفح يحتاج إلى دليل آخر: السمة يخبرك الحجم بالمساحة التي تحتاجها ستشغل الصورة مساحة محددة في التصميم. يختلف الأمر إذا كانت الصورة تشغل عرض الشاشة بالكامل (100vw) عن كونها ضمن عمود من ثلاثة أعمدة (33vw). بفضل ذلك، يُجري المتصفح الحسابات ويُنزّل الملف الأنسب فقط. تجنب هدر البيانات الهواتف.
يوجد أيضًا مُعرِّف كثافة البكسل (1x، 2x، 3x). يُعد هذا المُعرِّف ضروريًا لشاشات Retina أو 4K، حيث يحتوي بكسل CSS واحد على عدة بكسلات فعلية. من خلال الإشارة إلى صور عالية الكثافةنضمن أن تكون حدة الصورة مذهلة على الأجهزة المتميزة دون التأثير سلباً على الأجهزة ذات الشاشات القياسية.
تحكم كامل في عنصر الصورة
هناك حالات لا يكفي فيها تغيير الحجم فقط؛ بل نحتاج إلى تغيير الصورة بالكامل. وهذا ما نسميه... اتجاه الفنتخيّل صورة بانورامية لمنظر طبيعي مع شخص صغير في المنتصف؛ على الهاتف المحمول، سيبدو هذا الشخص كالنملة. باستخدام الوسم يمكننا تحديد نسخ مختصرة ومُوَسَّط للشاشات الضيقة.
نستخدم الوسوم ضمن هذا العنصر مع استفسارات وسائل الإعلاميقرأ المتصفح هذه القواعد، وإذا تحقق الشرط (على سبيل المثال، عرض أقل من 600 بكسل)، فإنه يعرض الصورة المُحسَّنة لهذا التنسيق. وأخيرًا، يجب علينا دائمًا تضمين وسم <img>. كنسخة احتياطية للمتصفحات القديمة أو كخيار افتراضي.
استخدام رائع آخر لـ هو تطبيق تنسيقات الجيل التالي مثل WebPيمكننا توفير تنسيق WebP للمتصفحات الحديثة التي تدعم الضغط القوي دون فقدان الجودة، وترك تنسيق JPG الكلاسيكي كبديل حتى لا يفوت أحد رؤية المحتوى.
إعدادات CSS لعرض مثالي
لمنع الصور من التجاوز وتشويه التصميم، من الضروري استخدام الخاصية الحد الأقصى لحجم النص المضمن: 100% (أو الحد الأقصى للعرض). هذا يُجبر الصورة على التكيف مع عرض الحاوية. إذا أردنا أيضًا الحفاظ على نسبة العرض إلى الارتفاع دون أن تتمدد الصورة بشكل غير مرغوب فيه، فإن الخاصية نسبة العرض إلى الارتفاع هي الحل الأمثل.
أحيانًا، عند فرض حجم معين، قد تتشوه الصورة. وهنا [يبدو أن ما يلي قسم منفصل وغير ذي صلة:] تناسب الكائنإذا استخدمنا قيمة "الاحتواء"، فسيتم تعديل الصورة مع الحفاظ على نسبة العرض إلى الارتفاع، حتى في حال وجود مساحات فارغة. أما إذا فضلنا أن تملأ الصورة المساحة بالكامل، حتى لو تم اقتصاصها قليلاً، قيمة "التغطية" هي الخيار الرابح.، مع القدرة على ضبط منطقة التركيز باستخدام موضع الكائن.
تحسين الحمل والأداء
ليس من الضروري تحميل جميع الصور في نفس الوقت. بالنسبة للصور التي لا تظهر في العرض الأولي، فإن السمة يُعدّ التحميل "الكسول" أمرًا ضروريًا.لأنه يؤخر التنزيل حتى يقوم المستخدم بالتمرير. وعلى العكس من ذلك، بالنسبة للصورة الرئيسية (البطل)، يجب أن نستخدم التحميل = "متحمس" وأولوية الجلب = "عالية" بحيث يمنحها المتصفح أولوية مطلقة ويتحسن أداء بروتوكول التحكم في الوصول (LCP).
يمكننا أيضًا اللعب بالخاصية فك التشفير = غير متزامنيُتيح ذلك استمرار عملية فك تشفير الصورة دون التأثير على عرض باقي الصفحة. وفي حالاتٍ مُحددة، إذا كانت الصورة هي العنصر الأهم، فإن استخدام خاصية "المزامنة" يضمن معالجتها بالتزامن مع المحتوى الأساسي.
ولإتمام عملية التحسين، يُنصح باستخدام صور متجهة SVG ينطبق هذا على الشعارات والأيقونات، لأنها لا تفقد جودتها عند تغيير حجمها، كما أن أحجام ملفاتها صغيرة جدًا. أما بالنسبة للصور الفوتوغرافية، فإن سير العمل الأمثل هو: تحسين الصور لاستخدامها على مواقع الويب في برنامج فوتوشوب، قم بالتصدير بأحجام متعددة، وقم بتطبيق خاصية srcset للدقة و أما بالنسبة للتصميم الفني، فقد تم تتويج كل ذلك باستخدام CSS المرن والتحميل الكسول.
كاتب شغوف بعالم البايت والتكنولوجيا بشكل عام. أحب مشاركة معرفتي من خلال الكتابة، وهذا ما سأفعله في هذه المدونة، لأعرض لك كل الأشياء الأكثر إثارة للاهتمام حول الأدوات الذكية والبرامج والأجهزة والاتجاهات التكنولوجية والمزيد. هدفي هو مساعدتك على التنقل في العالم الرقمي بطريقة بسيطة ومسلية.