import type { Metadata } from "next"; import Link from "next/link"; type Guide = { slug: string; title: string; description: string; body: string[]; faq: { q: string; a: string }[]; }; const GUIDES: readonly Guide[] = [ { slug: "best-image-format-for-web", title: "Best image format for web (JPG vs PNG vs WebP vs AVIF)", description: "Learn which image format to use for websites: JPG/JPEG, PNG, WebP, and AVIF. Compare quality, compression, and compatibility.", body: [ "When you upload images to a website, the format you choose affects page speed, SEO, and how sharp your image looks. The best approach is to convert and compress based on the type of image: photos, UI screenshots, icons, or transparent graphics.", "Use JPG/JPEG for photos. JPEG compression is great for gradients and camera images. If you need smaller files, convert JPG to WebP or AVIF and compare results at similar quality.", "Use PNG for UI screenshots, logos, and transparency. PNG is lossless, so it preserves crisp edges and text. If your PNG is too large, consider converting PNG to WebP (lossy or lossless) depending on your needs.", "Use WebP for modern web delivery. WebP often compresses images better than JPG at similar quality, and it can keep transparency like PNG. Converting PNG to WebP is one of the most common website optimizations.", "Use AVIF when you want the smallest files. AVIF can deliver excellent compression for photos. Convert JPG to AVIF for modern browsers; keep JPG or PNG fallback if you need maximum compatibility.", ], faq: [ { q: "Which is better: WebP or AVIF?", a: "AVIF often compresses smaller for photos, while WebP is very fast and widely supported. For best results, convert an image to both and compare file size at similar quality.", }, { q: "Is PNG always better quality than JPG?", a: "PNG is lossless but can be huge for photos. JPEG is designed for photos and can look great at much smaller sizes. Choose based on image type and your compression needs.", }, ], }, { slug: "how-to-compress-images-without-quality-loss", title: "How to compress images without obvious quality loss", description: "Practical steps to compress images (JPG, PNG, WebP, AVIF) while keeping them sharp. Learn when to resize and which format to convert to.", body: [ "If you want to compress an image without obvious quality loss, start with the easiest win: resize to the actual display size. Many images are uploaded at 2–5× larger than needed.", "For photos, compress using JPG/JPEG quality around 80–90, or convert JPG to WebP/AVIF for smaller files at similar quality.", "For screenshots, logos, and UI, keep PNG when you need perfect edges and transparency. If the PNG is too large, try palette PNG or convert PNG to WebP (lossless or high-quality lossy).", "Always compare results at 100% zoom for text and edges. The goal is to reduce file size while keeping the image looking natural.", ], faq: [ { q: "What’s the best quality setting for JPG compression?", a: "A common sweet spot is 80–90 for photos. If you see artifacts, increase quality; if file size is still large, convert to WebP or AVIF.", }, { q: "Should I compress PNG or convert PNG to WebP?", a: "If you need PNG features (lossless pixels, transparency), compress with PNG presets. For web delivery, converting PNG to WebP often reduces file size more.", }, ], }, { slug: "webp-vs-png", title: "WebP vs PNG: which should you use?", description: "Compare WebP vs PNG for web images. Learn when to keep PNG, when to convert to WebP, and how compression impacts quality.", body: [ "PNG is a lossless image format that’s excellent for transparency, sharp UI, and screenshots. The downside is file size: PNG can be much larger than necessary for web delivery.", "WebP is a modern image format designed for the web. It can compress images much smaller than PNG while keeping good quality, and it supports transparency too.", "If you need pixel-perfect results (like UI assets), keep PNG or use a palette PNG preset. If you’re optimizing a website, converting PNG to WebP is often the fastest way to improve page speed.", "For photos, WebP or AVIF usually wins. For graphics and text-heavy screenshots, test both formats to avoid ringing or blur.", ], faq: [ { q: "Does WebP support transparency like PNG?", a: "Yes. WebP supports alpha transparency. Convert PNG to WebP when you want transparency with smaller file sizes.", }, { q: "Why does my WebP look blurry?", a: "If you used lossy compression with low quality, edges and text can blur. Increase quality or use lossless WebP for UI/screenshot content.", }, ], }, ] as const; export function generateStaticParams() { return GUIDES.map((g) => ({ slug: g.slug })); } export async function generateMetadata({ params, }: { params: Promise<{ slug: string }>; }): Promise { const { slug } = await params; const g = GUIDES.find((x) => x.slug === slug); if (!g) return { title: "Guide" }; return { title: g.title, description: g.description }; } export default async function GuidePage({ params, }: { params: Promise<{ slug: string }>; }) { const { slug } = await params; const g = GUIDES.find((x) => x.slug === slug); if (!g) { return (

Guide not found

Go back to guides.

Browse guides
); } return (

{g.title}

{g.description}

{g.body.map((p) => (

{p}

))}

FAQ

{g.faq.map((f) => (

{f.q}

{f.a}

))}
); }