Newsmtr Image Tools

Convert images online from one format into another

Select images

Convert Image

Compress, Convert & Resize Images — a practical guide

Images are central to modern digital communication. From photography and e-commerce to social media and web design, how you handle images affects performance, accessibility, and user experience. This guide bundles three closely related topics — compressing, converting, and resizing images — into a single practical reference. Whether you're a developer, designer, content creator, or site owner, you’ll find explanations, best practices, tools, and clear examples to improve your workflow.

Overview: when to compress, convert, and resize

Though distinct tasks, compressing, converting, and resizing are often done together. Think of them as stages in preparing an image for a specific use:

  • Resize: change pixel dimensions to match the intended display size (avoid sending enormous images when a small display size is required).
  • Compress: reduce file size by removing or encoding data more efficiently (lossy or lossless).
  • Convert: change file format (JPEG, PNG, WebP, AVIF, SVG, etc.) to gain features like transparency, smaller size, or better quality-per-byte.

Tip: Always keep a high-quality master (RAW, TIFF, or original PNG/JPEG) and generate derivatives for web/mobile from that master — never repeatedly compress the same lossy file.

Part 1 — Compress Image

What is image compression?

Image compression reduces the number of bytes required to represent an image. Two main approaches exist: lossy compression (which discards some data to save space) and lossless compression (which reduces size without changing pixel data).

When to use lossy vs lossless

  • Lossy (JPEG, lossy WebP, AVIF): Great for photos where slight quality loss is acceptable for large file-size reductions.
  • Lossless (PNG, lossless WebP): Use for graphics, screenshots, logos, or images with text where clarity matters.

Popular compression tools

Choose the tool based on convenience, privacy, and automation needs:

  • Online: TinyPNG, Squoosh, Compressor.io — quick and user-friendly for single files.
  • Desktop: Photoshop, Affinity Photo, GIMP — manual control and preview before export.
  • CLI/Server: ImageMagick, libvips, jpegoptim, pngquant, cwebp, avifenc — best for batch processing and pipelines.

Compression examples

# ImageMagick: compress to JPEG and strip metadata
magick input.png -strip -quality 85 output.jpg

# pngquant: lossy PNG optimization (good for screenshots/icons)
pngquant --quality=65-80 --ext .png --force image.png

# cwebp: convert JPEG/PNG to WebP (lossy, quality=80)
cwebp -q 80 input.jpg -o output.webp

Practical rule: start with quality settings around 70–85 for photographs and visually inspect results; for graphics, prefer lossless or moderate lossy settings.

Measuring quality

Use visual inspection first. Objective metrics like PSNR and SSIM can aid decisions, but they don’t always match perceived quality. Compare originals and compressed versions on multiple screens (desktop, mobile, high-dpi).

Part 2 — Convert Image

Why convert formats?

Conversion is about compatibility and capability. Different formats provide different features:

  • JPEG: excellent for photos, lossy, small files.
  • PNG: lossless, supports transparency — good for logos and screenshots.
  • WebP: modern format with both lossy and lossless modes, supports transparency and animation, generally smaller than JPEG/PNG.
  • AVIF: high compression efficiency, excellent quality-per-byte (growing support).
  • SVG: vector for icons and illustrations — infinitely scalable with tiny filesize for simple graphics.

Conversion strategies

  1. Decide target device and audience (older browsers vs modern, email clients, mobile apps).
  2. Prefer modern formats (WebP/AVIF) for web if you can provide fallbacks (JPEG/PNG) for older clients.
  3. Convert after resizing and color profile normalization (sRGB is recommended for web).

Conversion examples

# Convert PNG to WebP (cwebp)
cwebp -q 80 input.png -o output.webp

# Convert JPEG/PNG to AVIF (libavif)
avifenc --min 20 --max 40 input.jpg output.avif

# ImageMagick convert (general)
magick input.svg -resize 800x600 -background none output.png

Note: AVIF encoders may be slower or require more CPU than WebP; weigh encoding time vs bandwidth savings for server-side implementations.

Part 3 — Resize Image

What resizing changes

Resizing alters pixel dimensions (width x height). It reduces the number of pixels the browser must render, directly lowering file size after compression. Use resizing to produce device-appropriate images: thumbnails, medium (mobile), large (desktop), and original/master.

Common resizing scenarios

  • Thumbnails: 150–400px wide for galleries and lists.
  • Content images: 600–1200px depending on layout and responsive breakpoints.
  • Hero or full-width: 1600–2400px for wide screens, but provide smaller variants for mobile.

Resizing with attention to quality

Resampling method matters: Lanczos often provides sharp results for photographs; Bicubic or Bilinear may suffice for simpler images. Avoid enlarging small images — upscaling introduces visible blur and artifacts.

Resize examples

# Using ImageMagick to resize with Lanczos filter
magick input.jpg -filter Lanczos -resize 1200x -quality 85 output-1200.jpg

# Using libvips (fast, memory efficient)
vips resize input.jpg output-600.jpg 0.5   # scale by 50%

Putting it together — real-world workflows

For production websites or applications, follow a reproducible pipeline:

  1. Keep master files: Store RAW/TIFF/original JPEG as the canonical source.
  2. Resize: Generate multiple sizes (thumbnail, small, medium, large) from the master.
  3. Convert: Produce modern format variants (WebP/AVIF) and safe fallbacks (JPEG/PNG).
  4. Compress: Apply appropriate compression settings for each variant.
  5. Cache & serve: Store outputs in a CDN or object storage and serve with proper caching headers.

Automate with tools like libvips, Sharp (Node.js), or serverless image processors. Avoid resizing in the browser; serve precomputed sizes or use a server-side transformation service.

Responsive images & HTML best practices

Use the <picture> element and srcset to deliver the most appropriate image to each device: 

<picture>
  <source type="image/avif" srcset="image-400.avif 400w, image-800.avif 800w, image-1600.avif 1600w" />
  <source type="image/webp" srcset="image-400.webp 400w, image-800.webp 800w, image-1600.webp 1600w" />
  <img src="image-800.jpg" srcset="image-400.jpg 400w, image-800.jpg 800w, image-1600.jpg 1600w" sizes="(max-width: 600px) 100vw, 800px" alt="Descriptive alt text">
</picture>

This technique provides modern formats when supported, with automatic fallback to JPEG.

Accessibility, SEO & metadata

Always include meaningful alt text. Keep descriptive filenames and surrounding text to help search engines understand image context. Decide whether to preserve metadata: photographers may keep EXIF/IPTC for credit, while public-facing images often strip GPS and private fields for privacy.

Performance considerations

  • Lazy-load offscreen images with loading="lazy".
  • Use HTTP/2 or HTTP/3 and a CDN for fast delivery.
  • Compress and cache aggressively; set appropriate cache headers for static assets.
  • A/B test quality settings if visual fidelity and page speed are both business metrics.

Common pitfalls and how to avoid them

  • Repeated lossy re-saves: Keep a lossless master to prevent cumulative quality loss.
  • Wrong format choice: Avoid JPEG for screenshots or images with text — use PNG or WebP lossless.
  • No fallbacks: When using AVIF/WebP, provide JPEG/PNG fallbacks for compatibility.
  • Oversized images: Don’t serve original camera files to web pages — resize first.

Tooling recommendations by use case

For designers (manual, visual control)

  • Photoshop, Affinity Photo, GIMP — export with preview and color profile control.

For developers (automation)

  • libvips / Sharp for Node.js (fast, efficient), ImageMagick for flexible operations, ffmpeg for animated sequences.

For marketers and content editors (ease of use)

  • Online tools (TinyPNG, Squoosh) and CMS plugins that auto-optimize uploads.

Future trends

Adoption of AVIF and better hardware acceleration will continue to improve compression efficiency. Machine-learning compression is emerging, enabling perceptual optimization that retains what humans notice and discards what they don’t. Expect content-delivery platforms to offer more on-the-fly transformation capabilities that remove the burden from site developers.

Quick checklist before publishing images

  1. Do you have an original master stored safely?
  2. Are images resized appropriately for their display role?
  3. Have you chosen the right format(s) for quality and compatibility?
  4. Are compression settings tuned for a good quality/size trade-off?
  5. Is there a modern-format variant with a fallback for older clients?
  6. Have you added descriptive alt text and optimized filenames?
  7. Do you serve images from a CDN with caching enabled?

Conclusion

Compressing, converting, and resizing images are simple in concept but require thoughtful decisions to deliver great user experiences. By following the workflows in this guide — keep masters, resize to appropriate dimensions, convert to efficient formats, and compress with perceptual quality in mind — you can greatly reduce load times, save bandwidth, and keep visuals crisp across devices. Automate repetitive tasks with modern tools, test on multiple devices, and always balance visual quality with performance needs.