keyboard_arrow_up

Image Processing for Website

expand_circle_right

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:
  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.

Categories   •  Tech  •  Dev
Tags   •  Image  •  Web