7 min read
Image Effects: What to Use for Blur, Tint, Duotone, Pixelate, and More
Choose an image effect by the job: make text readable, unify a mixed set, hide details, turn a photo into a graphic, or pull focus.
Topic · 12 articles
Images for the Web
Guides on how to find, choose, create, and prepare images that look sharp, load fast, and fit naturally into modern websites.
All articles — 12
5 min read
Duotone Effect: What It Is and How to Make One
A duotone effect maps shadows and highlights to two chosen colors. Learn when it helps web images, where it fails, and how to make one.
5 min read
Color Palette From Image: Get Brand Colors From Photos
Extract a color palette from an image by finding dominant, muted, dark, and light swatches. Use the result as a starting point for brand and UI colors.
5 min read
Web Image Formats: JPEG vs PNG vs WebP vs SVG
Compare JPEG, PNG, WebP, and SVG by compression, transparency, sharp edges, browser use, and the kind of image each format should store.
6 min read
AI Image Prompts for Web Images
Write AI image prompts with a clear subject, setting, style, lighting, composition, and output use so the generated image fits the page.
8 min read
Free Stock Images for Commercial Use: 10 Sites to Check
Free stock image sites can work for blogs, landing pages, and product pages, but the license still matters. Compare 10 sources and the checks to make before publishing.
5 min read
Image Aspect Ratio Guide: Which Shape to Use
Choose image aspect ratios for feeds, heroes, product cards, screenshots, and stories. Use 1:1, 4:5, 16:9, 9:16, and 3:2 with fewer bad crops.
6 min read
Prepare Images for Blog and Social Posts: Resize, Convert, Compress
Prepare blog and social images by resizing to real layout widths, choosing JPEG, PNG, or WebP, compressing output, and exporting platform crops.
6 min read
Responsive Images: srcset and sizes Explained
Use srcset and sizes to let the browser choose an image file by layout width and pixel density. Pair picture with format fallbacks when needed.
5 min read
Progressive JPEGs for Earlier Image Paints
Progressive JPEGs show a low-detail image before all bytes arrive. Convert and check JPEGs when blank image space hurts perceived load.
6 min read
Best Image Format for Web: WebP, JPEG, PNG, or AVIF?
Use WebP or AVIF for small web images, JPEG for broad photo compatibility, and PNG when transparency or exact UI edges matter.
5 min read
Compress Images for Web: Resize, Format, Quality
Compress web images by resizing first, choosing WebP, JPEG, or PNG, then lowering quality until artifacts appear. Use the browser compressor to compare savings.