تحسين الصور للويب: الحجم والجودة والسرعة

الصور والأداء — علاقة لا تُتجاهل

الصور تمثل في المتوسط 50-70% من حجم صفحة الويب. تحسينها هو أسهل وأسرع طريقة لتحسين أداء موقعك. موقع يحمّل في ثانيتين يختلف كلياً عن موقع يحمّل في 5 ثوانٍ — والفرق في كثير من الأحيان هو في الصور.

تنسيقات الصور — أيها تختار؟

WebP — الخيار الأمثل للويب

# تحويل JPEG/PNG إلى WebP
apt install webp -y

# تحويل صورة واحدة
cwebp -q 80 image.jpg -o image.webp

# تحويل جماعي لكل JPEG في مجلد
find . -name "*.jpg" -exec sh -c 'cwebp -q 80 "$1" -o "${1%.jpg}.webp"' _ {} \;

# الحجم مقارنة بـ JPEG: أصغر بـ 25-35%
# الحجم مقارنة بـ PNG: أصغر بـ 25-35% أيضاً

AVIF — الجيل القادم

# أصغر من WebP بـ 30-50% لكن أبطأ في التشفير
# دعم المتصفحات: Chrome 85+, Firefox 113+, Safari 16+

# تحويل باستخدام ImageMagick
apt install imagemagick -y
convert image.jpg -quality 60 image.avif

SVG — للأيقونات والرسوم

# تصغير SVG باستخدام svgo
npm install -g svgo
svgo icon.svg -o icon.min.svg

# تصغير جماعي
svgo --folder ./images/icons/

متى تستخدم ماذا؟

الاستخدام	الأفضل	البديل
صور المحتوى	WebP	JPEG
صور شفافة	WebP	PNG
أيقونات	SVG	WebP
صور بجودة طبيعية	AVIF	WebP
دعم متصفحات قديمة	JPEG/PNG	-

أبعاد الصورة الصحيحة

لا تعرض صورة 3000px لعرض 300px

<!-- خطأ: صورة كبيرة جداً لعرضها الفعلي -->
<img src="hero-3000px.jpg" style="width: 600px">

<!-- صواب: استخدم srcset لأحجام مختلفة -->
<img
 src="hero-600.webp"
 srcset="
 hero-400.webp 400w,
 hero-800.webp 800w,
 hero-1200.webp 1200w
 "
 sizes="(max-width: 400px) 400px, (max-width: 800px) 800px, 1200px"
 alt="صورة الهيرو"
 loading="lazy"
>

توليد أحجام متعددة بـ ImageMagick

#!/bin/bash
# resize-images.sh
INPUT=$1
FILENAME=$(basename "${INPUT%.*}")

for width in 400 800 1200 1920; do
 convert "$INPUT" -resize "${width}x>" -quality 85 "${FILENAME}-${width}.jpg"
 cwebp -q 80 "${FILENAME}-${width}.jpg" -o "${FILENAME}-${width}.webp"
done

echo "Generated 4 sizes for $INPUT"

Lazy Loading

<!-- تأخير تحميل الصور خارج نطاق الرؤية -->
<img src="product.webp" loading="lazy" decoding="async" alt="...">

<!-- للصورة الأولى في الصفحة (above the fold): eager -->
<img src="hero.webp" loading="eager" fetchpriority="high" alt="...">

// Intersection Observer للتحكم الكامل
const images = document.querySelectorAll('img[data-src]');
const observer = new IntersectionObserver((entries) => {
 entries.forEach(entry => {
 if (entry.isIntersecting) {
 const img = entry.target;
 img.src = img.dataset.src;
 img.removeAttribute('data-src');
 observer.unobserve(img);
 }
 });
}, { rootMargin: '50px' });

images.forEach(img => observer.observe(img));

معالجة الصور على السيرفر

Intervention Image لـ Laravel

composer require intervention/image

use Intervention\Image\Facades\Image;

// معالجة عند رفع الصورة
public function store(Request $request): JsonResponse
{
 $image = $request->file('image');

 // الصورة الأصلية بجودة عالية
 Image::read($image)
 ->resize(1200, null, fn($c) => $c->aspectRatio)
 ->toWebp(85)
 ->save(storage_path("app/public/products/{$filename}-1200.webp"));

 // نسخة مصغرة للـ thumbnails
 Image::read($image)
 ->resize(400, 400)
 ->cover(400, 400)
 ->toWebp(80)
 ->save(storage_path("app/public/products/{$filename}-thumb.webp"));

 return response->json(['success' => true]);
}

توليد Thumbnails تلقائياً

// Job لمعالجة الصور في الخلفية
class ProcessProductImage implements ShouldQueue
{
 public function handle: void
 {
 $sizes = [
 'thumb' => [400, 400],
 'medium' => [800, 600],
 'large' => [1200, 900],
 ];

 foreach ($sizes as $name => [$w, $h]) {
 Image::read($this->imagePath)
 ->resize($w, $h, fn($c) => $c->aspectRatio->upsize)
 ->toWebp(82)
 ->save(storage_path("app/public/{$this->folder}/{$name}.webp"));
 }
 }
}

nginx و WebP Delivery

# خدمة WebP إذا كان المتصفح يدعمه
map $http_accept $webp_suffix {
 default "";
 "~*webp" ".webp";
}

server {
 location ~* ^(/.*)\.(png|jpg)$ {
 set $image_path $1;
 if (-f "$document_root${image_path}${webp_suffix}") {
 rewrite ^(.*)$ ${image_path}${webp_suffix} last;
 }
 }
}

قياس تحسين الصور

# حجم الصورة قبل وبعد
ls -lh image.jpg image.webp

# نسبة التوفير
original=$(stat -c%s image.jpg)
optimized=$(stat -c%s image.webp)
saving=$(( (original - optimized) * 100 / original ))
echo "Saving: ${saving}%"

أثر Optimization على Google PageSpeed

التحسين	تأثير على PageSpeed	صعوبة التنفيذ
WebP بدل JPEG	+5-15 نقطة	سهل
Lazy Loading	+5-10 نقطة	سهل
Resize مناسب	+5-10 نقطة	متوسط
AVIF	+5-10 نقطة	متوسط
CDN للصور	+5-20 نقطة	سهل

على سيرفرات كلاود

سيرفرات كلاود (cloud.net.sa) بـ SSD NVMe تجعل معالجة الصور سريعة جداً. عند تثبيت ImageMagick وتفعيل معالجة الصور في الخلفية عبر Queue، يمكنك معالجة آلاف الصور دون أثر على أداء الموقع. الـ bandwidth بـ 1TB+ تكفي لخدمة الصور مباشرة من السيرفر دون الحاجة لـ CDN في البداية.

خلاصة

تحسين الصور هو الفاكهة المتدلية في تحسين الأداء. تحويل الصور إلى WebP مع Lazy Loading يحسن تجربة المستخدم بشكل ملموس دون أي تغيير في الكود الجوهري.