كيفية ضغط الصور دون فقدان الجودة (PNG، JPG، WebP، AVIF): الطرق وسير العمل الموصى به

What affects file size

Image size depends on four main factors:

• Dimensions (width × height): Most impactful. A 4000×3000px image weighs ~15x more than 1000×750px with same compression.
• Compression: Lossy vs lossless. JPG/WebP lossy reduce weight by removing imperceptible visual information. PNG is lossless by default.
• Color profile: sRGB is web standard (~3KB). Adobe RGB or ProPhoto RGB add 50-200KB unnecessarily. Always convert to sRGB for web.
• EXIF/XMP metadata: Camera info, GPS, software. Can add 10-100KB. Remove with -strip (ImageMagick) or optimization tools.

Priority: 1) Resize first, 2) Choose appropriate format, 3) Adjust compression, 4) Remove metadata.

Strategies by format

JPG/JPEG: perceptual quality, progressive, subsampling

JPG is ideal for photographs with many colors and gradients. Does not support transparency.

• Perceptual quality: Quality parameter (0-100) controls compression. Sweet spot: 75-85. Below 70 shows blocks. Above 90 weight increases without significant visual improvement.
• Progressive vs baseline: Progressive JPG loads in layers (low→high quality). Better visual experience and sometimes smaller size.
• Chroma subsampling: 4:2:0 (standard) reduces colors while maintaining luminance. 15-30% savings without visible degradation. 4:4:4 preserves all color data (not recommended for web).

PNG: lossless, palettes, color reduction

PNG is lossless: every pixel preserved exactly. Ideal for logos, icons, screenshots with text, transparency.

• PNG-8 vs PNG-24 vs PNG-32: PNG-8 (up to 256 colors) weighs 50-70% less than PNG-24/32 (millions of colors). Use PNG-8 for simple graphics without gradients.
• Palette optimization: pngquant intelligently reduces colors while maintaining visual quality. --quality 90-100 controls balance.
• Color reduction: Subtly posterize gradients to reduce palette without obvious banding.

WebP/AVIF: smart conversion and recommended limits

WebP and AVIF are modern formats offering better compression than JPG/PNG.

WebP

• Lossy: Quality 75-85 equals JPG 80-90 with 20-35% less weight.
• Lossless: 20-30% lighter than equivalent PNG.
• With transparency: Supports alpha in both modes.

AVIF

• Superior compression: 30-50% lighter than WebP with similar quality.
• Slow encoding: Can take 10-20x longer than WebP. Use fast presets for development.
• Recommended quality: 60-75 (equals JPG 80-90).

Quick tools (Squoosh, TinyPNG, Iloveimg)

For users without technical knowledge, these web tools are ideal:

• Squoosh (squoosh.app): From Google. Side-by-side visual comparison. Supports WebP, AVIF, mozJPEG. Local processing (privacy). Excellent for understanding parameters.
• TinyPNG/TinyJPG: Simple interface, drag and drop. Smart lossy compression. Free limit: 20 images, max 5MB each. API available for automation.
• Iloveimg: Complete suite (compress, resize, convert, crop). Batch processing. Free limit: no registration.
• Our Optimize tool: Optimize images — local processing, no limits, no registration. Supports JPG, PNG, WebP.

Pro/CLI tools (ImageMagick, cwebp, avifenc, pngquant)

ImageMagick

All-in-one suite for image manipulation. Installation: apt install imagemagick (Linux) or brew install imagemagick (macOS).

Common commands for resizing and compressing JPG, converting to WebP, batch conversion.

cwebp (WebP encoder)

Official Google encoder for WebP. Installation: apt install webp or brew install webp.

Used for lossy and lossless WebP compression.

avifenc (AVIF encoder)

Part of libavif. Installation: apt install libavif-bin or compile from source.

Used for AVIF compression with quality and speed control.

pngquant

PNG optimizer with color reduction. Installation: apt install pngquant or brew install pngquant.

Used for reducing PNG file sizes intelligently.

Ideal workflow for web (resize → choose format → compress → lazy-load → CDN)

Step 1: Resize to actual dimensions

Never upload images larger than necessary. Use maximum width where it will be displayed:

• Full-width hero: 1600-2000px
• Article content: 800-1200px
• Thumbnail: 300-400px
• Header logo: 200-400px

Step 2: Choose format

• Photo without transparency → WebP or AVIF (with JPG fallback)
• Vector logo/icons → SVG
• Raster logo with transparency → WebP or PNG-32
• Screenshots → PNG (if sharp text) or WebP lossless

Step 3: Compress with appropriate quality

Step 4: Implement lazy-load

Lazy loading for images outside initial viewport: loading="lazy" attribute.

Step 5: Serve from CDN with automatic transformation

Modern CDNs (Cloudflare Images, Cloudinary, Vercel) detect browser and serve optimal format automatically.

Metrics to monitor (LCP, CLS, TTFB of main image)

LCP (Largest Contentful Paint)

Largest image visible in initial viewport (hero, banner) defines LCP on many sites.

Target: <2.5s (good), 2.5-4s (needs improvement), >4s (poor)

Optimizations:

• Reduce hero image weight to <150KB (ideal <100KB)
• Preload with <link rel="preload" as="image" href="hero.webp">
• Dimensions in HTML to avoid reflow
• Modern formats (WebP/AVIF)
• CDN with cache near user

CLS (Cumulative Layout Shift)

Unexpected layout changes while page loads. Images without dimensions cause CLS.

Target: <0.1 (good), 0.1-0.25 (needs improvement), >0.25 (poor)

Solution: Always specify width and height attributes to reserve space.

TTFB (Time to First Byte) of image

Time from request to first byte received. Affected by CDN, cache, HTTP compression.

Optimizations: CDN with nearby edge locations, HTTP/2 or HTTP/3, appropriate caching.

Practical cases: logo, hero photo, iconography

Case 1: Header logo

Requirements: Transparency, sharp on retina, <50KB.

Solution: If vector → SVG (<10KB). If complex effects → WebP lossless. Export at 2x or 3x display size.

Case 2: Full-width hero photo

Requirements: High visual quality, <150KB, responsive.

Solution: Resize to 1600px width, create WebP and AVIF versions, generate responsive versions (800px, 1200px, 1600px), implement with picture and srcset.

Case 3: Icon set (UI icons)

Requirements: Sharp, lightweight, scalable.

Solution: Prefer SVG whenever possible (SVG sprites or icon fonts). If raster → optimized PNG-8 or WebP.

Downloadable checklist + preset template

Image compression checklist

• ✓ Resized to actual usage size (no larger)
• ✓ Modern format selected (WebP/AVIF for photos, SVG for vectors)
• ✓ Quality adjusted (75-85 for lossy, lossless where sharpness needed)
• ✓ EXIF metadata removed (-strip)
• ✓ Color profile sRGB (not Adobe RGB)
• ✓ Width/height attributes in HTML (prevent CLS)
• ✓ Lazy loading applied (outside initial viewport)
• ✓ Fallback for old browsers (picture with multiple formats)
• ✓ CDN or cache configured correctly
• ✓ Metrics validated (LCP <2.5s, weight <targets)

Preset template by image type