ToolBrainy

Category: Images

  • How to Compress Images for Web (Without Them Looking Awful)

    How to Compress Images for Web (Without Them Looking Awful)

    You publish a page, open it on your phone away from wifi, and watch the pictures crawl in one band at a time. Almost always the cause is the same: the images went up exactly as they came off a camera or a designer’s export. A single untouched photo can weigh more than every other part of the page combined, and it’s usually the easiest thing on the whole site to fix.

    A 6 MB photograph, 4000 pixels wide, sitting in a column roughly 700 pixels across. That exact mismatch turns up in more of the uploads we see than any other single problem. Nothing is wrong with the picture itself — it is simply around thirty times larger than the page has any use for, and every visitor pays for the difference.

    Why your images are heavier than they need to be

    • They’re far bigger than the space they sit in. Browsers scale a 4000-pixel image down to fit a 700-pixel column, but the visitor still downloads all 4000 pixels first.
    • The format doesn’t match the content. A photograph saved as PNG can easily be five times the size of the same photo as JPG, with no visible gain.
    • Exports keep quality at maximum by default. Most design tools save at 100% quality, well past the point where anyone can see a difference.
    • Hidden data rides along. Camera metadata, colour profiles and thumbnails add weight that no visitor will ever see.

    The fastest fix: compress in your browser

    If you want the file smaller right now, use a browser-based tool. Our free image compressor re-encodes your image at a sensible quality level and strips the data the web doesn’t need, typically cutting 60–80% off the file with nothing you can spot at normal viewing size.

    It runs entirely on your own device, so nothing is uploaded to a server. That matters if you’re working with client photos, product shots that haven’t launched yet, or anything else you’d rather not hand to a third party.

    Compressing properly: a practical checklist

    1. Resize before you compress. This is the step that does the heavy lifting, and most people skip it. Bring the image down to the largest width it will ever actually be shown at using our image resizer — usually 1600–2000 px for a full-width banner, and far less for anything in a column.
    2. Crop away what you don’t need. Empty sky and background are still pixels you’re paying to send. A tighter crop often improves the picture as well as the file size.
    3. Choose the right format. Photos want JPG or WebP; logos, icons and screenshots want PNG or WebP. Our image converter handles the switch, and there’s more detail in our guide to JPG vs PNG vs WebP.
    4. Then compress. Around 75–85% quality is the sweet spot for photographs. Below roughly 60% you start to see it.
    5. Keep the original. Compression is one-way. Store one clean master copy so you can start again if you ever need a bigger version.
    6. Check it at full size on a real screen. Zoom to 100% and look at faces, fine text and any flat areas of sky or wall — that’s where problems show first.

    What to actually aim for

    Useful targets rather than rules, for typical website images:

    • Full-width hero image: 1600–2000 px wide, under 200 KB.
    • In-article or blog image: 1000–1200 px wide, under 100 KB.
    • Product thumbnail or card: 400–600 px wide, under 40 KB.
    • Logo or icon: exact display size, under 20 KB.
    • Whole page: try to keep every image on it adding up to under 1 MB.

    If a single image on your site is over 500 KB, it’s almost certainly resizeable rather than un-compressible.

    When compression genuinely shows

    Some images resist compression, and it’s worth knowing which so you don’t blame the tool. Screenshots containing small text go mushy quickly, because the sharp edges are exactly what lossy compression discards first. Large flat gradients — a clear sky, a plain studio backdrop — can develop visible banding. Illustrations with hard lines suffer in the same way photographs don’t.

    The pattern we run into most is people compressing an already-compressed file. Each pass discards a little more, and after three or four rounds a photo looks visibly rough for no extra saving. If an image already looks slightly soft before you start, go back to the original rather than squeezing it again. For anything with text or sharp edges, switch it to PNG or WebP instead of pushing the JPG quality lower.

    Questions people ask about compressing images

    How much can I compress an image before it looks bad?

    For photographs, 75–85% quality is invisible to almost everyone. The visible threshold usually sits somewhere around 60%, and lower for images containing text.

    Should I resize or compress?

    Both, in that order. Resizing removes pixels you never needed; compressing makes the remaining pixels cheaper to store. Resizing saves far more.

    Does compressing images actually help SEO?

    Indirectly, yes. Page speed is a ranking signal and image weight is usually the largest single factor in it. The bigger effect is on visitors, who leave slow pages.

    Is WebP worth switching to?

    For the web, generally yes — typically 25–35% smaller than JPG at matching quality, with support in every current browser. Keep a JPG if the file also has to open in older desktop software.

    Will compressing remove my image’s metadata?

    Usually, and that’s normally a good thing for the web. If you need to keep copyright or camera data, check the tool’s behaviour and keep an untouched original either way.

    Before you upload

    Resize first, pick a format that suits the content, compress once, and keep the master copy. Those four habits will take most sites from sluggish to quick without changing a single line of code. When your images are ready, run them through our image compressor and check the saving before you upload.

  • How to Convert JPG to PDF (and Keep It Looking Right)

    How to Convert JPG to PDF (and Keep It Looking Right)

    You have eight photos of a signed form, or a pile of receipts your accountant wants, and the instruction is always the same: send it as one PDF. Attaching eight separate JPGs looks careless, and whoever receives them has to open each one in turn. The conversion itself takes about thirty seconds — it’s the order, the orientation and the file size that quietly cause all the trouble.

    The pattern we run into most often is not really a conversion problem at all. Someone converts their images one at a time, ends up with eight separate PDFs, then goes hunting for a merge tool to undo the mess. What they wanted from the start was simply “all of these in one file, in this order, the right way up.” Get that sequence right and the rest takes care of itself.

    Why you keep getting asked for a PDF

    Images are fine for looking at. PDFs are what organisations ask for, and usually for good reasons:

    • One file, one fixed order. Pages stay in sequence. Nobody has to work out whether IMG_4471 comes before or after IMG_4468.
    • It prints predictably. A PDF carries a page size, so it comes out of the printer the way you intended rather than filling a sheet at random.
    • Upload forms often accept nothing else. Job applications, visa portals, insurance claims and university submissions frequently reject image files outright.
    • It opens anywhere. Phone, laptop, an ancient office PC — a PDF looks identical on all of them.

    The fastest fix: convert in your browser

    If you just need the file now, use a browser-based converter. Our free JPG to PDF converter lets you select several images at once, arrange them into the order you want, and export the lot as a single PDF. There’s no signup and no watermark.

    The part that matters most for documents: it runs entirely in your browser, so your files are never uploaded to a server. If you’re converting an ID card, a bank statement or a signed contract, that difference is worth caring about.

    Converting cleanly: a practical checklist

    1. Sort your files before you start. Most converters add images in the order you select them. Renaming to 01, 02, 03 takes a moment and saves you re-ordering pages later.
    2. Rotate first, not after. Sideways pages are the single most common complaint, and they’re far easier to fix in the image than in the finished PDF.
    3. Crop out the desk. Photos of documents almost always include the table edge, a shadow or your thumb. A quick pass with our crop tool makes the result look scanned rather than snapped.
    4. Shrink oversized photos. A modern phone photo is far more detail than any A4 page needs. Running them through our image compressor first keeps the PDF small without any visible difference.
    5. Convert odd formats up front. If your files are HEIC, WebP or PNG, put them through our image converter first so everything behaves consistently.
    6. Open the finished PDF before you send it. Check every page is present, upright, and readable at 100% zoom. Ten seconds here prevents a resubmission.

    Page size and resolution: what to actually pick

    Two settings decide how your PDF looks. Neither needs much thought once you know the rule:

    • A4 (210 × 297 mm) — the default nearly everywhere outside North America. Use it for anything official.
    • Letter (8.5 × 11 in) — use this if the document is going to the US or Canada.
    • Fit to image — the page takes the shape of your photo. Good for artwork and screenshots, wrong for anything that will be printed.
    • 150 DPI is plenty for reading on screen and emailing. 300 DPI is only worth it for professional printing.

    As a rough guide, a 12-megapixel phone photo (about 4000 × 3000 pixels) already exceeds 300 DPI on an A4 page. You are almost never short of resolution — you’re far more likely to have too much of it.

    When it genuinely goes wrong

    Three problems account for most bad conversions. Pages come out rotated, because phones store orientation as hidden metadata that some tools ignore. The file lands at 30–40 MB, because ten untouched phone photos were dropped straight in. Or the text is legible on screen but mushy when printed, because the original photo was taken at an angle in poor light.

    The pattern we see most often is the last one: the conversion is blamed when the photograph was the real problem. No converter can add detail that the camera didn’t capture. Retaking the photo flat, in daylight, with the document filling the frame will beat any setting you can change afterwards. If the file is simply too big, convert first and then run the result through our PDF compressor — that’s usually enough to clear a 10 MB upload limit.

    Questions people ask about converting JPG to PDF

    Can I put several JPGs into one PDF?

    Yes. Select all the images together, arrange them into the order you want, and export once. You’ll get a single multi-page PDF rather than one file per image.

    Does converting to PDF reduce image quality?

    Not by itself. A straight conversion embeds your image as it is. Quality only drops if you deliberately apply compression, or if you resize the image down beforehand.

    Why is my PDF so much bigger than the photos?

    It usually isn’t — it’s the sum of them, plus a little overhead. Ten 4 MB photos make a roughly 40 MB PDF. Compress the images first, or the PDF afterwards.

    Does it work with PNG, WebP or iPhone HEIC files?

    PNG and WebP generally convert without trouble. HEIC is less widely supported, so convert those to JPG first and the rest of the process is identical.

    Is it safe to convert ID documents or bank statements?

    With a browser-based tool that processes files on your own device, nothing is uploaded anywhere, which makes it far safer than a service that sends your document to a server. Always check how a tool handles files before trusting it with anything sensitive.

    Before you send it

    Get the order right, rotate and crop before converting, and pick A4 unless you’re sending to North America. Those three habits cover almost every problem people run into. When your images are ready, drop them into our JPG to PDF converter and you’ll have one tidy document in a few seconds.

  • How to Crop an Image Without Losing Quality

    How to Crop an Image Without Losing Quality

    You find the perfect photo, but there’s a stray elbow in the corner, or the subject is floating somewhere off to the left. You crop it, save it, and suddenly the whole thing looks a little soft — slightly blurry edges, text that isn’t quite as crisp as it was. The frustrating part is that cropping itself is not what damaged your image. Something else did, and once you know what, it’s easy to avoid.

    We built ToolBrainy’s cropper after seeing this same complaint arrive in the same shape over and over: someone crops a photo, looks at the result, and concludes the tool degraded it. Almost every time, the crop was innocent. The damage happened either before the image reached the editor or after it left. Here is what is actually going on.

    Cropping does not reduce quality — three other things do

    Cropping simply discards the pixels outside your selection. The pixels that remain are completely untouched. What actually costs you quality is what happens around the crop:

    • Re-encoding a JPEG. Every time you save a JPEG, it is compressed again, and each pass throws away a little more detail. Crop the same photo five times and you’ll see it.
    • Upscaling after the crop. A tight crop leaves you with fewer pixels. If you then stretch that smaller image back to the original display size, the software is inventing detail that was never there.
    • Cropping from an already-compressed copy. Starting from a WhatsApp download or a screenshot of a screenshot means the damage was done long before you opened the editor.

    Fix those three, and a crop costs you nothing at all.

    The fastest way: crop it in your browser

    If you just need a clean crop right now, a browser-based editor is the quickest route. Our free image cropper lets you drag a selection, lock a preset aspect ratio, and download the result in a couple of clicks. It runs entirely on your device, so your photo is never uploaded to anyone’s server — which matters for ID documents, screenshots of private messages, or anything else you’d rather not hand over.

    For most images a single crop is all you need, and because you’re starting from your original file, there’s no stacked compression to worry about.

    Crop without losing quality: a practical checklist

    1. Always start from the original file. Not the version someone sent you on WhatsApp, not a screenshot. Keep one untouched master copy and crop from that every time.
    2. Decide the aspect ratio before you drag. Cropping freehand and then forcing it into a 1:1 square later means cropping twice. Lock the ratio first and you crop once.
    3. Never crop tighter than your final display size. If your image needs to appear 1200 px wide, don’t crop down to 600 px and scale it back up. Check the pixel dimensions of your selection as you go.
    4. Save as PNG or WebP when the image has text. Screenshots, diagrams, and anything with fine lettering hold up far better in a lossless format. Our image converter handles the switch.
    5. Crop first, compress last. Do all your cropping, then run one compression pass at the end with an image compressor. Compressing between every edit is what stacks up the damage.

    Aspect ratios worth memorising

    Most cropping headaches come from guessing the ratio and discovering later that the platform has cut your subject’s head off. A few worth knowing:

    • 1:1 — Instagram posts, profile pictures, product thumbnails.
    • 4:5 — Instagram portrait, the ratio that takes up the most feed space on a phone.
    • 16:9 — YouTube thumbnails, presentation slides, website hero images.
    • 9:16 — Stories, Reels, TikTok, and anything else vertical.
    • 3:2 — Standard photo prints, and what most cameras shoot natively.

    If you need a specific pixel size rather than a ratio, crop for composition first and then set exact dimensions with an image resizer.

    When a crop genuinely goes wrong

    There are a few situations where quality loss is real and no amount of care will hide it. Cropping deep into a low-resolution image is the main one — if the original is only 800 px wide, a 50% crop leaves you 400 px, and nothing can put that detail back. Heavily compressed JPEGs are another: crop into an image that already has visible blocky artefacts and you simply magnify them.

    By far the most common version we come across is the messaging-app round trip. A photo gets sent through a chat app, which compresses it on the way to save bandwidth; the recipient saves that compressed copy and crops it. The crop then gets blamed for softness that was baked in during the transfer. If you can still get the file off the original camera roll, or ask for it as a document attachment rather than a photo, you skip that entire problem.

    Questions people ask about cropping images

    Does cropping an image reduce its quality?

    No. Cropping only removes pixels from the edges; the remaining pixels are unchanged. Any softness you notice comes from re-saving a JPEG, or from enlarging the cropped result afterwards.

    Does cropping reduce the file size?

    Usually yes, because there are fewer pixels to store. A tight crop can cut the file size substantially without any compression at all.

    What is the best format to save a cropped image in?

    PNG or WebP if the image contains text, screenshots, or sharp graphics. JPEG is fine for photographs, as long as you’re not saving repeatedly.

    Can I undo a crop after saving?

    Not from the saved file — those pixels are gone for good. This is why keeping one untouched original matters more than any other tip here.

    How do I crop to an exact pixel size?

    Crop for composition first, then set the precise dimensions separately. Trying to do both at once usually means cropping twice and compressing twice.

    The short version

    Keep one clean original, decide your aspect ratio before you start dragging, never crop below the size you actually need, and compress once at the very end. Do that and your crops will look exactly as sharp as the day the photo was taken. When you’re ready, open our image cropper and it’s a ten-second job.

  • JPG vs PNG vs WebP: Which Image Format Should You Use?

    JPG vs PNG vs WebP: Which Image Format Should You Use?

    JPG, PNG, WebP: you’ve typed those extensions a hundred times without thinking about them. Pick the wrong one, though, and your image ends up blurry, three times bigger than it needs to be, or missing the transparent background you were counting on. Here’s how to tell them apart and choose the right one in a couple of seconds.

    JPG (JPEG): best for photographs

    JPG uses “lossy” compression, which cleverly throws away detail your eye is unlikely to notice. That makes it excellent for photos and any image with smooth gradients and lots of colours: sunsets, portraits, product shots. File sizes stay small, which keeps pages fast.

    Use JPG when: the image is a photograph and doesn’t need transparency.

    Avoid JPG when: the image has sharp edges, text, or flat areas of colour (like logos or screenshots); JPG creates blurry “artifacts” around those edges. It also can’t store a transparent background.

    PNG: best for graphics, logos, and transparency

    PNG uses “lossless” compression, so nothing is thrown away; every pixel is preserved exactly. That makes text crisp and edges clean, which is ideal for logos, icons, screenshots, and diagrams. PNG also supports transparency, so you can place a logo on any background.

    Use PNG when: you need transparency, or the image has sharp text and hard edges.

    Avoid PNG when: the image is a full-colour photograph; PNG files of photos are often several times larger than the equivalent JPG for no visible benefit.

    WebP: the modern all-rounder

    WebP is Google’s newer format that supports both lossy and lossless compression and transparency, essentially the strengths of JPG and PNG in one. For the same visual quality, WebP files are typically 25–35% smaller than JPG and much smaller than PNG. Every modern browser now supports it, which is why it’s become the default recommendation for the web.

    Use WebP when: you’re publishing images on a website and want the fastest possible load times.

    Be careful when: a file needs to open in older desktop software or be handed to someone who expects a “standard” photo; a JPG is still the safest universal choice.

    Quick decision guide

    • Photograph for the web? → WebP (or JPG as a safe fallback)
    • Logo or icon with transparency? → PNG (or WebP)
    • Screenshot with text? → PNG
    • Emailing a photo to someone? → JPG
    • Print or archiving the original? → keep the highest-quality source (often PNG or the camera’s original)

    Converting between formats

    Picked the wrong format, or received a huge PNG that should’ve been a JPG? You can switch formats in seconds with our free image converter, which handles JPG, PNG and WebP directly in your browser. If a photo is simply too large, run it through the image compressor first to cut the file size before you publish or send it.

    Sometimes the answer isn’t another image format at all. If you’re sending scans or photos of paperwork to someone, a document is the better container — our guide to converting JPG to PDF covers getting the page order, orientation and file size right.

    A note on file size and page speed

    Image weight is one of the biggest factors in how fast a web page loads, and page speed affects both user experience and search rankings. As a rule of thumb: choose WebP, resize the image to the largest size it will actually be displayed at, and compress it. Uploading a 4000-pixel-wide photo to show in a 600-pixel box wastes bandwidth on every visit.

    Common format questions

    Is WebP always better than JPG?

    For the web, usually yes: smaller files at the same quality. The main exception is compatibility with older, non-browser software, where JPG remains the universal standard.

    Does converting PNG to JPG lose quality?

    Slightly, because JPG is lossy, and you’ll lose any transparency. For photos the difference is negligible; for logos and text, keep the PNG.

    Which format is best for transparency?

    PNG and WebP both support transparent backgrounds. JPG does not.

    So which one should you pick?

    It really is that short: JPG for photos, PNG for graphics and transparency, WebP when you want the best of both on the web. Keep those three pairings in your head and you’ll rarely get it wrong. And when you do need to switch a file over, our image converter turns it into a one-click job.