كيفية تحسين الصور لتسريع تحميل الصفحة

1. قدّم الأبعاد المناسبة

لا ترفع صورة أكبر بكثير من المساحة التي تملؤها. فقد يبلغ عرض صورة الهاتف 4000 بكسل، لكن إذا كان تخطيطك يعرضها في عمود عرضه 800 بكسل، فإن المتصفح يظل ينزّل كل بكسل زائد ثم يتخلص من معظمها.

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

2. اختر صيغة فعّالة

استخدم WebP أو JPG للصور الفوتوغرافية، وPNG أو WebP للرسومات ذات الشفافية. واستخدم SVG للشعارات والأيقونات البسيطة، لأنها تتحجم إلى أي حجم من ملف صغير.

وملفات WebP أصغر غالبًا بشكل ملحوظ من JPG أو PNG عند جودة بصرية مماثلة، وتدعمها المتصفحات الحالية عمومًا. أما PNG فالأفضل إبقاؤها للرسومات الحادة ولقطات الشاشة والصور التي تحتاج إلى ألوان دقيقة.

3. اضغط

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

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

4. حمّل ما يلزم فقط واحجز المساحة

أضف السمة loading="lazy" إلى الصور الواقعة أسفل الجزء الظاهر من الصفحة لتُحمَّل حين يقترب الزائر منها بالتمرير. ولا تُطبّق التحميل الكسول على الصورة الرئيسية في أعلى الصفحة، لأن ذلك سيؤخر أبرز محتوى.

وأعطِ كل صورة السمتين width وheight ليحجز المتصفح المساحة قبل وصول الملف. فهذا يمنع الصفحة من القفز أثناء تحميل الصور، وهو مزعج حين يحاول أحدهم القراءة أو النقر على زر. وتساعد السمتان نفسهما المتصفح على حساب النسب الصحيحة حين يجعل CSS الصورة مرنة.

مثال تطبيقي (توضيحي)

تخيّل تدوينة فيها صورة رئيسية قادمة مباشرة من الكاميرا: 4000 في 3000 بكسل، بصيغة JPG وبحجم عدة ميغابايت. تعرضها الصفحة بعرض 900 بكسل.

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

خطوات العمل

• اعرف أكبر حجم تُعرض به الصورة في صفحتك.
• غيّر حجم الأصل إلى نحو ضعف ذلك العرض، أو إلى العرض المعروض نفسه للشاشات الصغيرة فقط.
• حوّل إلى WebP أو JPG واضغط عند نحو 75 إلى 85 بالمئة.
• قارن بالأصل واخفض الجودة ما دامت الصورة تبدو كما هي.
• أضف width وheight، وloading="lazy" للصور أسفل الجزء الظاهر، في صفحتك.
• أعد تحميل الصفحة وتأكد من أن شيئًا لا يبدو ضبابيًا أو يتحرك من مكانه.

اختبر صفحاتك بأداة مثل PageSpeed Insights قبل التحسين وبعده، وانظر إلى أكبر صورة في الصفحة أولًا. فالتغييرات الصغيرة على تلك الصورة الواحدة تحدث غالبًا أكبر فرق.

أخطاء شائعة

• ضغط صورة JPG مضغوطة بشدة مرارًا، مما يضيف تلفًا مرئيًا في كل مرة. ابدأ دائمًا من الأصل.
• تطبيق التحميل الكسول على كل الصور، بما فيها صورة الأعلى.
• استخدام PNG للصور الفوتوغرافية، مما ينتج عادةً ملفات كبيرة جدًا.
• تصغير الصور بـ CSS فقط، فيظل المتصفح ينزّل الملف كاملًا.
• إغفال width وheight، مما يسبب قفزات في التخطيط.

قائمة مراجعة سريعة

• الأبعاد المناسبة للتخطيط
• WebP أو JPG للصور الفوتوغرافية، وSVG للشعارات البسيطة
• الجودة نحو 75 إلى 85 بالمئة، مع الفحص بالعين
• التحميل الكسول لما هو أسفل الجزء الظاهر فقط
• width وheight مضبوطان على كل صورة
• اختبار الصفحات قبل التحسين وبعده

نفّذ ذلك مع DoneImg في متصفحك

افتح أداة تغيير الحجم، واضبط العرض الذي تحتاجه ونزّل النتيجة. ثم افتح الضغط، واختر WebP أو JPG واضبط شريط الجودة مع مراقبة حجم الملف. وإذا احتجت صيغة مختلفة، فتتولى أدوات التحويل صيغ JPG وPNG وWebP.

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