البرامج التعليمية
كيفية ضغط صور المنتجات دون فقدان التفاصيل المهمة
اختر تنسيق التسليم، قارن عمليات التصدير، وتحقق من صور منتجاتك التي تم تحميلها. يتضمن قائمة تحقق عملية للجودة وميزانية توضيحية لحجم الملف.
اضغط صور المنتجات عن طريق إنشاء نسخة تسليم بالحجم الذي تحتاجه الوجهة، واختيار تنسيق مقبول، ومقارنة عمليات التصدير بالتفاصيل التي يجب أن يراها العملاء. احتفظ بالنسخة الأصلية. احكم على النتيجة بعد الرفع وقبله، لأن الوجهة قد تغير حجم ملفك أو تعيد ضغطه. لا يوجد هدف واحد بالكيلوبايت يناسب جميع صور المنتجات.
زجاجة بسيطة على خلفية عادية وإعلان مصور من أربع لوحات لهما نقاط فشل مختلفة. قد تفقد الزجاجة تفاصيل الملصق؛ وقد يفقد الإعلان الخطوط الرفيعة للوحات والنصوص الصغيرة. ملفك الأصغر يكون مفيدًا فقط إذا بقيت المعلومات المهمة.
فصل الأبعاد والتنسيق ووزن الملف
تصف أبعاد البكسل عرض الصورة وارتفاعها. يصف وزن الملف البايتات التي يجب تخزينها أو نقلها. يحدد التنسيق والضغط كيفية تمثيل هذه البكسلات. تغيير تسمية الدقة مثل DPI، دون تغيير البكسلات أو الترميز، ليس طريقة عملية لجعل صورة الويب أخف.
يشرح دليل أداء الصور من web.dev مطابقة تسليم الصورة لحجم عرضها وتقليل بايتات الصورة غير الضرورية. يمكن للتسليم المتجاوب توفير أحجام مصادر مختلفة للشاشات المختلفة. هذه ميزة موقع ويب؛ تحميل ملف ضخم وحده لا يضمن وصول الإصدار الأصغر الصحيح إلى الهاتف.
لمتجرك الخاص، افحص الحجم الذي تم تنزيله فعليًا في المتصفح. بالنسبة للسوق أو المنصة الاجتماعية، تحقق من متطلبات التحميل الحالية والمعاينة النهائية. هذه بيئات تسليم مختلفة.
اختر تنسيقًا يناسب الصورة والوجهة
يوثق مرجع تنسيقات الصور من MDN قدرات تنسيقات JPEG و PNG وتنسيقات الويب الحديثة. ما يلي هو دليل اختيار عملي، وليس وعدًا بأن نموذج تحميل معين يقبل كل تنسيق.
| نوع الملف | مرشح مفيد لـ | التفاصيل التي يجب فحصها |
|---|---|---|
| JPEG | الصور الفوتوغرافية بدون شفافية | حواف الملصقات، الملمس، وهالات الضغط |
| PNG | نسخة بدون فقدان أو صور تحتاج إلى مناطق شفافة | ما إذا كان الملف الناتج كبيرًا بشكل غير ضروري للوجهة |
| WebP | تسليم مواقع الويب التي تدعمه، باستخدام ترميز مع فقدان أو بدون فقدان حسب الاقتضاء | النصوص الدقيقة والتدرجات عند الإعدادات المختارة |
| AVIF | تسليم مواقع الويب باستخدام مسار نشر متوافق | الجودة، سير العمل المدعوم، والنتيجة المشفرة الفعلية |
لا تحول صورة فوتوغرافية إلى امتداد مختلف عن طريق إعادة تسمية الملف. قم بتصديرها عبر أداة تقوم بالفعل بترميز التنسيق المختار. أيضًا، لا يمكن لتصدير بدون فقدان استعادة المعلومات التي تم التخلص منها بالفعل بواسطة تصدير سابق مع فقدان.
إجراء مقارنة بثلاث نسخ
لنفترض إعلانًا خياليًا من أربع لوحات لمنظم مكتب بحري. يتضمن نسيجًا قماشيًا، وشعارًا أبيض صغيرًا، وفاصل لوحات رفيع، وعبارة “Room for the essentials.” قم بإعداد ثلاث نسخ تسليم من نفس الأصل: إعداد جودة محافظ، وإعداد متوسط، ومرشح أصغر.
استخدم نفس أبعاد البكسل لهذه المقارنة حتى تختبر الضغط بدلاً من عدة تغييرات في وقت واحد. سجل التنسيق، إعداد التصدير، والبايتات الناتجة. أرقام الجودة خاصة بالمشفر؛ “80” في أداة واحدة لا يجب أن تتطابق مع “80” في أداة أخرى.
قارن كل نسخة بالحجم الذي سيراه العميل. ثم قم بالتكبير لفترة وجيزة لتحديد التلف. قد لا يهم العيب المرئي فقط عند التكبير الشديد بالنسبة للموضع المقصود، لكن الكلمات غير المقروءة بالحجم الطبيعي تهم.
| نقطة الفحص | نتيجة مقبولة | سبب لرفض المرشح |
|---|---|---|
| اسم المنتج | مقروء بالحجم المقصود للعرض | تتداخل الحروف أو تختفي |
| الملمس الدقيق | لا يزال يعبر عن المادة بدقة | يصبح القماش بقعة ملطخة |
| حدود اللوحة | فصل واضح بين المشاهد | تشتت الهالات أو الضوضاء عن التسلسل |
| خلفية ناعمة | متساوية بصريًا في العرض العادي | تظهر خطوط واضحة عبر التدرج |
| صورة المنتج الظلية | مخطط نظيف ومعروف | تغير تشوهات الحواف الانطباع عن الشكل |
إذا بدت جميع الإصدارات الثلاثة ضعيفة، فتحقق من الأصل وحجم العرض. لا يمكن للضغط حل مشكلة نص كان صغيرًا جدًا بالفعل في التكوين.
تحديد ميزانية للصفحة، وليس لملف واحد فقط
تخيل صفحة تقوم بتحميل ثماني صور منتجات فورًا. بافتراض أن حجم كل منها 600 كيلوبايت، فإن إجمالي هذه الصور يبلغ حوالي 4.8 ميغابايت باستخدام الوحدات العشرية. وعند 180 كيلوبايت لكل منها، يبلغ إجماليها حوالي 1.44 ميغابايت. يوضح هذا الحساب حجم النقل التراكمي؛ إنه ليس تحسينًا مقاسًا لوقت التحميل أو حدًا عالميًا موصى به.
تعتمد التجربة الفعلية أيضًا على الصور التي يتم تحميلها في البداية، وظروف الاتصال، والتخزين المؤقت، وموارد الصفحة الأخرى، ومعالجة الصور في موقع الويب. قد لا تكون الصورة الكبيرة أسفل الصفحة جزءًا من النقل الأولي إذا كان الموقع يؤجل تحميلها.
استخدم الحساب لتحديد مكان التحقيق. إذا كانت الصورة الأولى للمنتج واضحة وصغيرة بالفعل ولكن اثنتي عشرة صورة معرض مخفية يتم تنزيلها بدقة كاملة، فقد تكون جولة أخرى من الضغط المكثف على الصورة الأولى هي الحل الخاطئ.
فحص النسخة المنشورة
قم بتحميل المرشح الذي اخترته، ثم افتح الوجهة الموجهة للعملاء. قارن نسختها وحوافها وألوانها بملف التسليم الخاص بك. تحقق من التخطيط بحجم الهاتف وكذلك العرض الأوسع. يمكن للمنصة قص الصورة أو إعادة ضغطها بعد قبول التحميل.
احتفظ بسجل تسليم صغير: اسم الملف الأصلي، أبعاد التصدير، التنسيق، البايتات الناتجة، الوجهة، والإصدار. إذا بدت الصورة المنشورة أسوأ، فإن هذا يجعل من السهل فصل الأصل الضعيف، ومشكلة التصدير، وتحويل الوجهة.
للحصول على تصميم إبداعي من أربع لوحات تم إنشاؤه في Panelly Studio، قم بتنزيل الصورة النهائية وقم بإعداد أي ضغط خاص بالوجهة في أداة الصور المعتادة لديك. لا تفترض أن Studio يعرض كل تنسيق أو إعداد مشفر موصوف هنا. احتفظ بالنسخة الأصلية الكاملة متاحة للمواضع المستقبلية.
الأسئلة الشائعة
هل يجب أن تكون كل صورة منتج أقل من 100 كيلوبايت؟
استخدم ميزانية خاصة بالوجهة ومقارنة بصرية. يمكن أن يكون الحد الثابت صارمًا جدًا للصور المفصلة وسخيًا بشكل غير ضروري للصور المصغرة الصغيرة. تحقق من الصفحة بأكملها بالإضافة إلى الملف الفردي.
هل يمكنني ضغط نفس ملف JPEG بشكل متكرر؟
فضل إنشاء كل نسخة تسليم جديدة من الأصل المحتفظ به. يمكن أن تؤدي عمليات الحفظ المتكررة مع فقدان إلى تراكم التلف وتجعل من الصعب تحديد متى فقدت التفاصيل المهمة.
لماذا تبدو صورتي أسوأ بعد الرفع؟
قد تقوم الوجهة بتحويلها. قارن الأصل، نسختك المصدرة، والإصدار المعروض للعملاء. هذا الفحص الثلاثي يحدد أين يجب تركيز التصحيح التالي.
