"سوء إختيارك لصيغة الصور في موقعك قد يكلفك الكثير"
إذا كنت مصمم أو مطور فأنت بالتأكيد قد سبق وتعاملت مع أنوع الصور المعروفة JPEG, PNG, GIF, SVG ولكن هل تدرك عواقب إستخدامك للصيغة الخاطئة؟
تابع هذا الثريد لتتعرف عن هذه الأنواع والوقت المناسب لإستخدام كل نوع منها.
إذا كنت مصمم أو مطور فأنت بالتأكيد قد سبق وتعاملت مع أنوع الصور المعروفة JPEG, PNG, GIF, SVG ولكن هل تدرك عواقب إستخدامك للصيغة الخاطئة؟
تابع هذا الثريد لتتعرف عن هذه الأنواع والوقت المناسب لإستخدام كل نوع منها.
عدم معرفتك بدور كل نوع قد يكلفك المئات من الكيلوبتات الزائدة عن اللزوم و التي ستجعل الزوار يهجرون موقعك، لا تستغرب ذلك فنحن في عصر السرعة!
الصيغة JPEG هي صيغة الطبيعة، قم بإستخدام هذه الصيغة عندما يكون لديك الكثير من الألوان في الصورة، وعندما تجد أنك تجيب بنعم عن أحد الأسئلة التالية:
- هل الصورة مشبعة بالألوان والتدرجات؟
- هل الصورة فوتوغرافية؟
- هل الصورة مشبعة بالألوان والتدرجات؟
- هل الصورة فوتوغرافية؟
الصيغة PNG هي صيغة البساطة، إستخدم هذه الصيغة عندما يكون لديك القليل من الألوان تغطي مساحات كبيرة من الصورة، وعندما تكون الخلفية شفافة و تجد أنك تجيب بنعم عن:
- هل العناصر التي في الصورة نصف شفافه؟
- زوايا العناصر في الصورة دائرية؟
- العناصر مائلة (قطرية)؟
- العناصر لديها ظلال؟
- هل العناصر التي في الصورة نصف شفافه؟
- زوايا العناصر في الصورة دائرية؟
- العناصر مائلة (قطرية)؟
- العناصر لديها ظلال؟
الصيغة GIF هي صيغة الصور المتحركة، قم بإستخدام هذه الصيغة عندما لا تمانع وجود القليل من الألوان فيها وعندما تكون الخلفية شفافة بنسبة ١٠٠٪ وتجد أنك تجيب بنعم عن أحد الأسئلة التالية:
- هل زوايا العناصر مربعة؟
- هل العناصر مستقيمة وغير مائلة؟
- هل زوايا العناصر مربعة؟
- هل العناصر مستقيمة وغير مائلة؟
للعلم أنه تم تطوير الصيغة PNG لتكون بديلة عن الصيغة GIF بقابلية ضغط أفضل.
لذا قد تجد أنه في بعض الأحيان لا تستطيع المفاضلة بين أي منها من ناحية الجودة حينها أجعل الحكم هو حجم الصورة.
لذا قد تجد أنه في بعض الأحيان لا تستطيع المفاضلة بين أي منها من ناحية الجودة حينها أجعل الحكم هو حجم الصورة.
يجب أن تأخذ بعين الإعتبار بأن إستخدام الصور من الصيغة GIF لعرض الصور المتحركة لم يعد الخيار الأفضل.
فبدلاً من إستخدام صورة GIF قم بتحويلها إلى فيديو بصيغتي mp4 و WebM ومن ثم عرضها كفيديو في الصفحة.
فبدلاً من إستخدام صورة GIF قم بتحويلها إلى فيديو بصيغتي mp4 و WebM ومن ثم عرضها كفيديو في الصفحة.
قم بالإستفادة من خصائص مشغل الفيديو بإخفاء أزرار التحكم وجعل الفيديو يتم تشغيلة بشكل تلقائي مراراً وتكراراً.
لن يلاحظ أحد بأنك تستخدم فيديو ولكنك ستلاحظ بأنك قمت بتوفير ما قد يصل إلى ٩٥٪ من حجم الصورة!
الصورة توضح مدى الفرق بالحجم بين الصورة المتحركة وبين الفيديو.
لن يلاحظ أحد بأنك تستخدم فيديو ولكنك ستلاحظ بأنك قمت بتوفير ما قد يصل إلى ٩٥٪ من حجم الصورة!
الصورة توضح مدى الفرق بالحجم بين الصورة المتحركة وبين الفيديو.
الصيغة SVG هي صيغة لا يستخدمها سوى الرائعين!
الصور التي من هذه الصيغة هي عبارة عن أكواد، تتميز هذه الصور بأنه لديها القابلية بأن يتم إعادة تحجيمها دون أن تفقد جودتها، وبالإمكان تحريكها وإضافة التنسيقات لها والتحكم بشفافيتها، والأهم حجمها صغير جداً.
الصور التي من هذه الصيغة هي عبارة عن أكواد، تتميز هذه الصور بأنه لديها القابلية بأن يتم إعادة تحجيمها دون أن تفقد جودتها، وبالإمكان تحريكها وإضافة التنسيقات لها والتحكم بشفافيتها، والأهم حجمها صغير جداً.
يجب أن تجعل خيار إستخدام ال SVG هو خيارك الأول فهذه الصيغة تقوم بإستبدال أغلب الصور التي قد تحتاج لإستخدامها بالصيغة PNG.
حتى أنها تستطيع إستبدال العديد من صور ال GIF المتحركة.
حتى أنها تستطيع إستبدال العديد من صور ال GIF المتحركة.
الصور الرقمية التي يتم عرضها بالشاشات لا تتأثر بمقدار الدقة (resolution).
لذا إذا كنت تصمم للويب فتجنب إعطاء صورة دقة بمقدار 300ppi فذلك لن يجعلها أكثر جودة وإنما ستقوم بإضافة المزيد من الحمل على موقعك بدون أي داعي.
لذا ابقي صور الويب بدقة 72ppi وإهتم فقط بأبعاد الصورة.
لذا إذا كنت تصمم للويب فتجنب إعطاء صورة دقة بمقدار 300ppi فذلك لن يجعلها أكثر جودة وإنما ستقوم بإضافة المزيد من الحمل على موقعك بدون أي داعي.
لذا ابقي صور الويب بدقة 72ppi وإهتم فقط بأبعاد الصورة.
وأخيراً تذكر بأن لا تفرط في إستخدام الصور وأن تتجنبها بأكبر قدر ممكن.
واذا كانت المعلومات في الصفحة لا تتأثر بوجود الصورة من عدمة فقم بإزالتها فهي ليست سوى عبئ زائد!
واذا كانت المعلومات في الصفحة لا تتأثر بوجود الصورة من عدمة فقم بإزالتها فهي ليست سوى عبئ زائد!
قم دائماً بتصدير الصور للويب وأيضاً قم بضغط الصور، إما عبر حلول برمجية أو خدمات ك tinypng.
تعرف على ال progressive images وابدأ بإستخدامها
وتذكر أن هناك لاعبين جدد لكن غير مدعومة بشكل كبير كصيغة WebP التي تسعى قوقل من خلالها تغيير مفاهيم صور الويب بإستبدال كل الصيغ التي ذكرناها
تعرف على ال progressive images وابدأ بإستخدامها
وتذكر أن هناك لاعبين جدد لكن غير مدعومة بشكل كبير كصيغة WebP التي تسعى قوقل من خلالها تغيير مفاهيم صور الويب بإستبدال كل الصيغ التي ذكرناها
جاري تحميل الاقتراحات...