PNG to WebP and Image Sizing: What Actually Matters
Two jobs account for most image editing: making a file smaller without it looking worse, and forcing it to an exact width and height for a platform. WebP conversion handles the first, and a size converter handles the second.
This guide shows how the PNG to WebP and Canvas Size Converter tools work and where the common myths about DPI and resizing go wrong.
Why WebP is smaller than PNG
WebP is a modern format with two modes. Lossless WebP typically shrinks around a quarter compared with a PNG of identical pixels, and lossy WebP cuts far more for photographs while still allowing transparency.
Browser support is now broad enough that WebP is a safe default for the web. The honest exception is older software or image pipelines that expect PNG specifically.
| Aspect | PNG | WebP |
|---|---|---|
| Compression | Lossless only | Lossless and lossy |
| Transparency | Full alpha | Supported, cleaner in lossless |
| Typical size | Larger | Smaller at similar quality |
| Best used for | Masters and maximum compatibility | Fast page delivery |
A practical pattern is to keep the PNG as your editable master and publish a WebP copy for the site. You lose nothing, because you can always re export.
When you should keep PNG
Keep PNG when you need the widest compatibility, when the file is a source you will edit repeatedly, or when the image is so small that a few kilobytes make no difference. For flat graphics with sharp edges, PNG lossless stays pixel perfect.
Resizing to exact pixel dimensions
On the web, what matters is the pixel width and height, not the printed size. A canvas size converter sets those numbers so an image fits a required slot, such as a profile banner or a thumbnail.
The key rule is to preserve the aspect ratio. Forcing a target width and height that do not match the original stretches or squashes the picture. If the platform demands a ratio you do not have, crop or pad instead of distorting.
The DPI myth on screens
DPI or PPI is just a label that tells a printer how big to place the image; a browser ignores it and uses pixel counts alone. Setting 300 DPI does not make a web image sharper or load faster, it only changes the suggested print size.
So for anything viewed on a screen, think in pixels. Save the DPI conversation for print files.
Frequently Asked Questions
Is WebP always better than PNG?
For page delivery, usually yes, because it is smaller at similar quality. For editing masters and maximum compatibility, PNG still has a place.
Does WebP support transparency?
Yes. Lossless WebP keeps full alpha like PNG. Lossy WebP supports transparency too, though edges can be less clean.
Do I need 300 DPI for images on a website?
No. Browsers use pixel dimensions and ignore DPI. Choose 300 DPI only when a file is meant for print.
Will resizing always lose quality?
Enlarging a small image adds blurry guesses and softens detail. Shrinking is generally safe when you keep the aspect ratio and let a good resampler do the work.
Are my images uploaded to a server?
No. Conversion and resizing run in your browser, so the pictures stay on your device.
More Guides
How to Turn a Picture of Text Into Real, Editable Text (Free OCR)
Extract editable text from photos, screenshots and PDFs with OCR that runs in your browser. What recognition is good at, how to capture clean input, and how scanned and digital PDFs differ.
How to Make a Signature Online and Export a Clean Transparent PNG
Create a clean signature image in the browser - draw it, type it or photograph it - and export a transparent PNG that drops onto any document. Sizing for print, embedding and the honest legal limits explained.
How to View and Remove Photo Metadata (EXIF and GPS) Before You Share
What EXIF hides inside a JPEG - GPS, date, camera, owner name - when it actually leaks, and how to read and strip it in your browser with no upload and no quality loss. iPhone and Android fixes included.
Binary, Hex, Decimal and Text: How to Convert Between Number Bases
A clear, worked guide to number bases - binary, hexadecimal, decimal and octal - how to convert between them, and how bytes map to readable text with ASCII and UTF-8.
Change Text Case and Reverse Words or Letters
A practical guide to case conversion - upper, lower, title, sentence, camel, snake, kebab - and reversing text by character or by word, with the programmer cases that slug and code work needs.
Upside-Down Text, Heart Symbols and Fake Text Explained
How upside-down writing really works (it is Unicode, not a font), where it breaks, plus heart and symbol collections and fake-text filler for mockups - all generated on your device.
Placeholder Content: Lorem Ipsum Text and Dummy Images
Why designers use Lorem Ipsum filler and placeholder images, how to generate the right amount for text and the right size for images, and when to replace them with real content.
How to Beautify, Format and Escape Code Right in Your Browser
Turn minified or messy CSS, JavaScript and XML back into readable indented code, and escape or unescape HTML entities safely, entirely in your browser.
How to Convert Documents to PDF and Keep the Layout
Turn Word and Excel files into print ready PDFs that look the same everywhere, rotate pages the right way, and know when PDF is the wrong choice.
Domain, IP and Browser Diagnostics: What Each Check Really Tells You
Check a domain age, resolve a hostname to its IP, see your own public IP and inspect your browser, plus what each result really means and where it misleads.
How to Compress a Video With Minimal Quality Loss (MP4, WebM and MOV)
A tested, browser-based method to shrink MP4, WebM and MOV files: the bitrate maths, the codec choice, and how far you can push quality before it looks bad. No upload, no watermark, runs on phone and desktop.
How to Compress an Image to 100 KB (or Any Exact Size) With Minimal Quality Loss
A tested method for hitting 100 KB, 50 KB, 20 KB or 500 KB exactly: dimension math, quality steps, and the formats that shrink best. Works on phone and desktop, no upload required.
Passport and Visa Photo Sizes by Country (US, UK, Schengen, India, Canada, Australia, China)
Exact photo sizes for US, UK, Schengen, India, Canada, Australia and China applications - millimetres, pixels, KB limits, background and head-height rules, plus how to prepare a compliant file.
How to Reduce PDF Size for Online Applications (2 MB, 5 MB, 100 KB and Other Limits)
Get scanned documents, CVs and certificates under any portal limit with real downsampling settings - plus why your PDF is huge, why merging adds pages, and how to keep text selectable.
JSON Formatter for API Debugging: Nine Common Errors and Their Fixes
Line and column errors explained: trailing commas, single quotes, unquoted keys, escaping, arrays versus objects, and the XML-to-JSON gotchas that break integrations. Paste and validate instantly.
How to Merge PDFs on a Phone for Free (Android and iPhone), No Upload
Scan pages, join them into one PDF and email it - all in the browser on your phone. Real page-count and size limits, the scan-then-merge workflow, and how to stay under a 2 MB portal cap without a desktop or an app.
QR Code Print Rules: Size, Error Correction and Contrast That Actually Scan
The numbers that decide whether a printed QR scans: module size, quiet zone, error-correction level (L/M/Q/H), matte vs gloss, print DPI and a real test routine. Generate a print-ready code free, in the browser.
Random Passwords vs Passphrases: Entropy Maths and Real Crack Times
How many bits a password really has, why length beats symbols, honest offline-crack-time maths, and where a password manager and 2FA matter. Generate a strong random password in your browser with nothing sent anywhere.
Word Count for Assignments: Limits, What Counts, and How to Trim Safely
Exactly what a word counter counts, whether the bibliography and headings are included, why 250 words is 250 words, and how to trim to the limit without breaking citations. Count free, in your browser, with no upload.
EMI vs Mortgage Loans: Tenure, Total Interest and the 28/36 Affordability Rule
The real EMI formula, why a longer tenure lowers the payment but raises total interest, the 28/36 affordability rule, part-payment and balance-transfer maths - all worked through. Calculate free, in your browser.
Base64 Data URIs for Images: the +33% Overhead and When Inlining Wins
Why base64 costs about 33% more bytes, how data URIs save or add requests, the HTTP/2 reality, cacheability trade-offs, and inline SVG vs bitmap. Encode and decode a data URI free, in your browser.
Metric and Imperial Conversions: the Factors, the Traps and the Rounding Rules
The exact factors for length, weight and temperature, the tonne vs ton vs metric-cwt trap, rounding rules for construction and cooking, and how to convert without introducing error. Convert free, in your browser.
Website Slow? Fixing LCP, Render-Blocking JS and Core Web Vitals
What LCP, INP and CLS actually measure, lab vs field data, the biggest real fixes - image sizing, render-blocking JS/CSS, caching - and how to check server latency. Be honest that a quick checker is not PageSpeed Insights.
How to Create and Submit an XML Sitemap (and What Actually Gets Pages Indexed)
A practical, honest walkthrough: build an XML sitemap, host it, reference it in robots.txt, and submit it in Google Search Console and Bing - plus why a sitemap is a hint, not a guarantee of indexing.
robots.txt Directives Explained: User-agent, Allow, Disallow, Crawl-delay and Sitemap
A clear, tested reference for every robots.txt line - how matching works, the $ and * rules, crawl-delay reality, and the mistakes that silently block the wrong things.
Meta Description Length: The Character Band and the Pixel Cut Behind the Snippet
There is no official character limit. Here is how Google actually truncates by pixel width, the ranges that usually survive on desktop and mobile, and how to write a description that gets shown instead of rewritten.
AI Crawlers, GPTBot and llms.txt: What They Mean for Your Site
Who the AI bots are (GPTBot, ClaudeBot, PerplexityBot, Google-Extended and more), how to allow or block each in robots.txt, and an honest take on what llms.txt does and does not do.
Domain Authority: What DA Actually Measures (and Why It Is Not a Google Score)
Domain Authority is a Moz prediction, not a Google metric. What DA and PA really mean, why they differ between tools, how to use them honestly, and what our checker does instead of printing a fake number.
How to Find Broken Links Before They Cost You Traffic and Trust
Why 404s and dead outbound links leak value, the HTTP codes behind them, a practical one-page check workflow, and how to fix each failure - using a browser-based link checker.
Google Index vs Crawl: Two Different Things Most People Conflate
Crawling, indexing and ranking are three separate stages. What crawled-but-not-indexed really means, which signals let a page be indexed, and how to verify status honestly in Search Console.
Keyword Density: Why There Is No "Safe" Percentage to Hit
What keyword density actually measures, why chasing a target percentage is a myth, when the number is a useful red flag, and how to use a density checker without stuffing.
UTM Parameters: A Clean Naming Convention and Reusable Template
What utm_source, medium, campaign, term and content actually capture, the rules for a consistent lowercase naming scheme, a copy-paste template, and the traps that wreck attribution.
HTTP Status Codes Every Site Owner Should Recognise
A plain-language map of 200, 301, 302, 404, 410, 403 and 5xx codes, what each does to your SEO, and how to read a URL's real status without guessing.
A GDPR-Ready Privacy Policy Checklist (and Why a Generator Is Only the Draft)
What a GDPR privacy policy must disclose, the many obligations that live outside the document, how CCPA differs, and how to use a policy generator without mistaking a draft for compliance.
Plagiarism vs Paraphrasing: An Honest Guide to Originality Checks
Why a browser plagiarism checker cannot compare your text to the internet, what matched-source detection actually needs, how to paraphrase legitimately, and how to use originality tools without fooling yourself.
Reading and Writing Regular Expressions Without Fear
A plain-language tour of regex syntax, the JavaScript flags (g, i, m, s, u), capture groups, the greedy-vs-lazy and engine gotchas, and how to test a pattern safely before you ship it.
CSV to JSON: How to Convert Cleanly (Delimiters, Headers and Quoting)
The traps that silently corrupt CSV data - quoted fields, embedded commas and newlines, header-vs-array shape, auto-typed numbers and BOM - and how to convert to JSON safely.
XML to JSON: What Gets Lost and How to Convert Faithfully
XML and JSON are not equivalent trees. How attributes, repeated elements, mixed content, CDATA and namespaces map across - and where silent data loss and array-vs-object ambiguity bite.
Minify, Compress or Cache? Three Speed Levers People Confuse as One
HTML minification shrinks bytes, compression shrinks transfer, and a CDN or cache cuts latency and rework. What each layer actually changes and the order to apply them.
Formatting SQL for Readable Code Review (Without Pretending It Validates It)
A SQL beautifier only reflows text - it cannot prove a query is correct. How to format for review, pick a house style, and combine it with real validation and EXPLAIN.
MD5 vs SHA-256 (and Why Neither Should Hash Your Passwords)
What cryptographic hashes are, why MD5 is broken and SHA-256 is not, why both are wrong for passwords, and why base64 is not hashing at all.
URL Encoding and Reserved Characters: What to Escape and When
Percent-encoding, the RFC 3986 reserved vs unreserved split, the difference between encoding one parameter value and a whole URL, and the double-encoding traps that break requests.
Favicon Sizes: The Complete, Honest List (and What Actually Matters)
A favicon is not one file. Which sizes serve which surfaces - tab, apple-touch, PWA 192/512, legacy ICO - what SVG can and cannot replace, and what a generator can really output.
Unix Time and the 2038 Problem: What a Timestamp Really Is
Epoch time is seconds since 1970 UTC ignoring leap seconds. Why 32-bit signed counters roll over in 2038, the seconds-versus-milliseconds bug, and always storing UTC.
UUID vs Auto-Increment IDs: Which Primary Key to Use
Random UUID v4 versus sequential integer IDs: index locality, key size, global uniqueness, enumeration risk, and the time-ordered middle ground (UUIDv7/Snowflake/ULID).
How to Upscale an Image Without Pixelation (Honest Limits)
What 2x/4x/8x interpolation really does, why enlarging cannot invent captured detail, smooth versus nearest-neighbour, and when upscaling helps versus when to leave the image alone.
WebP vs JPEG: When to Use Each (and When Neither)
WebP is 25-35% smaller and adds transparency and animation, but JPEG still wins on reach. When each fits, lossy versus lossless, and how compatibility and the quality slider change the choice.
PDF to Word: What 'Editable' Really Means (Digital vs Scanned)
Digital PDFs carry a real text layer and convert cleanly; scanned PDFs need OCR with imperfect results. What a converter can and cannot give you, and how to get a good edit.
How to Scan Documents to PDF on Your Phone (Free, Private)
Turn camera photos of pages into a proper PDF: shoot pages that scan well, drag to reorder, set page size, margins and quality, merge batches, and keep everything on-device.
BMI: What It Measures and Where It Is Wrong
BMI is weight over height squared - a cheap screening proxy, not body fat or a diagnosis. Where it misleads: athletes, children, the elderly, pregnancy, and different ethnicities.
How to Calculate Age for Documents (Exact Years, Months and Days)
Age 'as of' a reference date, completed years, leap-day (Feb 29) birthdays, and unambiguous date formats for admissions, exams, visas and benefits paperwork.
Counting Business Days: Weekdays, Deadlines and the Long-Weekend Trap
Working-day math for contracts and delivery SLAs: exclude weekends, remember holidays are not built in, and handle the inclusive-versus-exclusive start-date off-by-one errors.
What a Valid Invoice Needs (and What Depends on Your Country)
The elements almost every invoice carries versus the jurisdiction-specific extras - tax/GST/VAT number, tax breakdown, e-invoicing, sequential numbering. A template is not tax advice.
Text-to-Speech for Accessibility: What It Helps and Its Limits
Browser TTS speaks text with the voices already on the device. Who it helps (low vision, dyslexia, proofreading), where it falls short, and why it complements rather than replaces accessible design.
Downloading and Using YouTube Thumbnails: What's Fair
You can grab a video's preview image, but usage rights are separate from the download button. Ownership, fair use, embedding versus re-hosting, and the safe rules - plus how the downloader actually works.
How to Convert HEIC to JPG on Windows (Free, and Without Uploading Your Photos)
Open iPhone HEIC photos on a PC: use a browser HEIC converter that decodes locally, or install the HEVC/HEIF extensions. What HEIC is, why Windows struggles, and when to convert.
