Image Processing for Website
expand_circle_rightImage processing became essential part of web development nowadays. It is my way of image processing in Arch Linux with following steps:
- Resizing big image before optimizing using ImageMagic or FFmpeg
- Optimizing image using:
- Convert image to
webp
format usingcwebp
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
- Resize first (ImageMagick → 1200px max width)
- Optimize
jpegoptim
(JPEGs)pngquant
(PNGs)
- Convert to WebP (
cwebp -q 80
)
This gives me small, fast-loading, SEO-friendly images.