Image Processing for Website

Image processing became essential part of web development nowadays. It is my way of image processing in Arch Linux with following steps:

1. Resizing big image before optimizing using ImageMagic or FFmpeg
2. Optimizing image using:
   • jpegoptim for JPG
   • pngquant for PNG or
   • optipng for PNG or
   • oxipng for PNG or
   • Squoosh or Squoosh GitHub of Google for JPG and PNG
3. Convert image to webp format using cwebp of libwebp

Install Required Software in Arch Linux

pacman -S jpegoptim pngquant libwebp libwebp-utils

Resize Image

Using ImageMagic

magick input.jpg -resize 1200x -strip -quality 85 output.jpg

Resize width to 1200px, keep aspect ratio, strip metadata.

• -resize 1200x → max width 1200px
• -strip → remove EXIF (saves KBs)
• -quality 85 → good tradeoff for web

Optimize Image

Using jpegoptim

jpegoptim --max=80 --strip-all *.jpg

Using pngquant

pngquant --quality=65-80 --ext .png --force *.png

Convert Image to WebP

using cwebp

cwebp -q 80 input.jpg -o output.webp

Workflow Conclusion

1. Resize first (ImageMagick → 1200px max width)
2. Optimize
   • jpegoptim (JPEGs)
   • pngquant (PNGs)
3. Convert to WebP (cwebp -q 80)

This gives me small, fast-loading, SEO-friendly images.