Image Tools Guide: Resize, Convert, and Analyze Images

Learn to manipulate images effectively with web-based tools. From resizing to format conversion, master image processing.

Image Resizing

Resizing Methods

Method	Quality	Use Case
Nearest Neighbor	Low	Pixel art
Bilinear	Medium	General
Bicubic	High	Photos
Lanczos	Highest	Enlargement

JavaScript Image Resize

function resizeImage(img, width, height) {
  const canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;

  const ctx = canvas.getContext('2d');
  ctx.imageSmoothingEnabled = true;
  ctx.imageSmoothingQuality = 'high';
  ctx.drawImage(img, 0, 0, width, height);

  return canvas.toDataURL('image/jpeg', 0.9);
}

Maintaining Aspect Ratio

function calculateSize(origWidth, origHeight, maxWidth, maxHeight) {
  const ratio = Math.min(maxWidth / origWidth, maxHeight / origHeight);
  return {
    width: Math.round(origWidth * ratio),
    height: Math.round(origHeight * ratio)
  };
}

Format Conversion

JPG vs PNG

Feature	JPG	PNG
Compression	Lossy	Lossless
Transparency	No	Yes
File Size	Smaller	Larger
Best For	Photos	Graphics

JavaScript Conversion

// JPG to PNG
function jpgToPng(jpgDataUrl) {
  return new Promise((resolve) => {
    const img = new Image();
    img.onload = () => {
      const canvas = document.createElement('canvas');
      canvas.width = img.width;
      canvas.height = img.height;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0);
      resolve(canvas.toDataURL('image/png'));
    };
    img.src = jpgDataUrl;
  });
}

// PNG to JPG (with background color for transparency)
function pngToJpg(pngDataUrl, bgColor = '#ffffff') {
  return new Promise((resolve) => {
    const img = new Image();
    img.onload = () => {
      const canvas = document.createElement('canvas');
      canvas.width = img.width;
      canvas.height = img.height;
      const ctx = canvas.getContext('2d');
      ctx.fillStyle = bgColor;
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      ctx.drawImage(img, 0, 0);
      resolve(canvas.toDataURL('image/jpeg', 0.9));
    };
    img.src = pngDataUrl;
  });
}

Image Metadata

Common Metadata Fields

• Dimensions (width x height)
• File size
• Color depth
• Color space
• DPI/PPI
• EXIF data (photos)

Reading Image Info

function getImageInfo(file) {
  return new Promise((resolve) => {
    const img = new Image();
    img.onload = () => {
      resolve({
        width: img.naturalWidth,
        height: img.naturalHeight,
        aspectRatio: (img.naturalWidth / img.naturalHeight).toFixed(2),
        fileSize: file.size,
        type: file.type
      });
    };
    img.src = URL.createObjectURL(file);
  });
}

GIF Handling

GIF Features

• Multiple frames (animation)
• 256 color palette
• Transparency (1-bit)
• Lossless compression

Viewing GIF Frames

// GIF frames can be extracted using libraries like gifuct-js
import { parseGIF, decompressFrames } from 'gifuct-js';

async function extractFrames(gifUrl) {
  const response = await fetch(gifUrl);
  const buffer = await response.arrayBuffer();
  const gif = parseGIF(buffer);
  const frames = decompressFrames(gif, true);
  return frames;
}

Image Optimization Tips

1. Choose right format (JPG for photos, PNG for graphics)
2. Resize to needed dimensions
3. Compress appropriately
4. Use modern formats (WebP) when possible
5. Lazy load images

Try Our Image Tools

• Image Resize - Resize images
• JPG to PNG - Convert JPG to PNG
• PNG to JPG - Convert PNG to JPG
• Image Info - View image metadata
• GIF Viewer - Analyze GIF files
• Image to Base64 - Encode images

Conclusion

Understanding image manipulation helps optimize web performance and maintain quality across different use cases.