<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: videocompress</title>
    <description>The latest articles on DEV Community by videocompress (@videocompress).</description>
    <link>https://dev.to/videocompress</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4121579%2F53243b52-1101-43e9-85d2-65f6320b2364.png</url>
      <title>DEV Community: videocompress</title>
      <link>https://dev.to/videocompress</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/videocompress"/>
    <language>en</language>
    <item>
      <title>Lighthouse Said My Hero Images Were Too Heavy. I Compressed the Phone JPGs in the Browser and Re-Measured</title>
      <dc:creator>videocompress</dc:creator>
      <pubDate>Sat, 24 Oct 2026 02:12:33 +0000</pubDate>
      <link>https://dev.to/videocompress/lighthouse-said-my-hero-images-were-too-heavy-i-compressed-the-phone-jpgs-in-the-browser-and-40lc</link>
      <guid>https://dev.to/videocompress/lighthouse-said-my-hero-images-were-too-heavy-i-compressed-the-phone-jpgs-in-the-browser-and-40lc</guid>
      <description>&lt;p&gt;Five real phone photos (35.0 MB) → 7.9 MB on &lt;a href="https://pixsip.com/compress-jpg" rel="noopener noreferrer"&gt;pixsip.com/compress-jpg&lt;/a&gt;. DevTools Network transfer size and load timing on a local test page, before and after. No upload, no target-KB slider.&lt;/p&gt;

&lt;p&gt;I build PixSip, so I'll say that up front. The numbers below are from a fresh headless run on the live page, not a marketing slide.&lt;/p&gt;

&lt;h2&gt;
  
  
  The inventory (Network → Img first)
&lt;/h2&gt;

&lt;p&gt;Skip the compressor for a minute. Open the page that feels slow, DevTools → &lt;strong&gt;Network&lt;/strong&gt;, filter &lt;strong&gt;Img&lt;/strong&gt;, disable cache, hard-reload.&lt;/p&gt;

&lt;p&gt;On a local test gallery that dropped five full-size phone JPGs into one hero strip, the panel looked like this:&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;File&lt;/th&gt;
&lt;th&gt;Camera&lt;/th&gt;
&lt;th&gt;Pixels&lt;/th&gt;
&lt;th&gt;Bytes&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;metro-invalidovna.jpg&lt;/td&gt;
&lt;td&gt;Pixel 8 Pro&lt;/td&gt;
&lt;td&gt;8160×6144&lt;/td&gt;
&lt;td&gt;8.6 MB&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;ayup-market.jpg&lt;/td&gt;
&lt;td&gt;Samsung SM-A336B&lt;/td&gt;
&lt;td&gt;4000×3000&lt;/td&gt;
&lt;td&gt;7.5 MB&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;sturgeons-mill.jpg&lt;/td&gt;
&lt;td&gt;iPhone 15 Pro Max&lt;/td&gt;
&lt;td&gt;4032×3024&lt;/td&gt;
&lt;td&gt;6.5 MB&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;mudbank-adur.jpg&lt;/td&gt;
&lt;td&gt;Pixel 8 Pro&lt;/td&gt;
&lt;td&gt;8160×6144&lt;/td&gt;
&lt;td&gt;6.9 MB&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;ad-column.jpg&lt;/td&gt;
&lt;td&gt;Pixel 4a&lt;/td&gt;
&lt;td&gt;4032×3024&lt;/td&gt;
&lt;td&gt;5.4 MB&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Total&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;35.0 MB&lt;/strong&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F8yiofz26ere57yqrw0f0.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F8yiofz26ere57yqrw0f0.png" alt="DevTools-style inventory of five heavy phone JPGs totaling 35 MB" width="800" height="281"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Lighthouse's "Improve image delivery" opportunity is pointing at the same files. You don't need every JPG on the site — only the ones that dominate transfer size. Compress those, leave the rest alone.&lt;/p&gt;

&lt;p&gt;Same five files on a local page, emulated ~10 Mbps, cache off:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F8ahqbw8to5dnt6fjzxmm.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F8ahqbw8to5dnt6fjzxmm.png" alt="Local test page before compression: 35.0 MB transfer, 28.1 s load" width="800" height="451"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Img requests: &lt;strong&gt;5&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;Transfer size: &lt;strong&gt;35.0 MB&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;Largest: &lt;strong&gt;8.6 MB&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;Load event: &lt;strong&gt;28.1 s&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That's the baseline. Everything after this is "make those five smaller without leaving the browser."&lt;/p&gt;

&lt;h2&gt;
  
  
  1. Open /compress-jpg and wait for the lock
&lt;/h2&gt;

&lt;p&gt;Go to &lt;a href="https://pixsip.com/compress-jpg" rel="noopener noreferrer"&gt;pixsip.com/compress-jpg&lt;/a&gt;. The drop zone starts disabled while the worker (MozJPEG wasm) loads — usually about a second. Wait until the small &lt;strong&gt;🔒&lt;/strong&gt; appears under "Drop images here" and the file input is enabled. Dropping too early hangs the job.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fj2fk6ewlxbhk9emuu2jg.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fj2fk6ewlxbhk9emuu2jg.png" alt="PixSip compress-jpg ready state with lock icon under the drop zone" width="800" height="500"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Free plan: up to &lt;strong&gt;20 images × 10 MB&lt;/strong&gt; each, up to 3 output formats at once. There is &lt;strong&gt;no target-KB setting and no quality slider&lt;/strong&gt; — MozJPEG runs at one calibrated quality. Don't expect "compress to exactly 200 KB."&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Drop the batch, read the results table
&lt;/h2&gt;

&lt;p&gt;I dropped the five originals as JPG → JPG. Worker ready in ~1.0 s; the batch finished in ~11 s. Nothing over a few KB left the machine (clarity.ms analytics pings only — no image upload).&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F5b0dvzbmbxpzzae5n90e.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F5b0dvzbmbxpzzae5n90e.png" alt="Results table: 5/5 done, Saved 27.1 MB total · 77% smaller" width="800" height="423"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;File&lt;/th&gt;
&lt;th&gt;Before&lt;/th&gt;
&lt;th&gt;After&lt;/th&gt;
&lt;th&gt;Δ&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;metro-invalidovna.jpg&lt;/td&gt;
&lt;td&gt;8.6 MB&lt;/td&gt;
&lt;td&gt;2.0 MB&lt;/td&gt;
&lt;td&gt;−76%&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;ayup-market.jpg&lt;/td&gt;
&lt;td&gt;7.5 MB&lt;/td&gt;
&lt;td&gt;963 KB&lt;/td&gt;
&lt;td&gt;−87%&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;sturgeons-mill.jpg&lt;/td&gt;
&lt;td&gt;6.5 MB&lt;/td&gt;
&lt;td&gt;1.7 MB&lt;/td&gt;
&lt;td&gt;−74%&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;mudbank-adur.jpg&lt;/td&gt;
&lt;td&gt;6.9 MB&lt;/td&gt;
&lt;td&gt;1.6 MB&lt;/td&gt;
&lt;td&gt;−76%&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;ad-column.jpg&lt;/td&gt;
&lt;td&gt;5.4 MB&lt;/td&gt;
&lt;td&gt;1.5 MB&lt;/td&gt;
&lt;td&gt;−71%&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Total&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;35.0 MB&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;7.9 MB&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;−77%&lt;/strong&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;Card text on the page: &lt;strong&gt;"Saved 27.1 MB total · 77% smaller."&lt;/strong&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  3. Verify pixels, EXIF, GPS
&lt;/h2&gt;

&lt;p&gt;Download the ZIP and check what actually changed. Dimensions must stay the same — PixSip does not resize. EXIF and GPS should be gone (four of the five originals carried GPS; none of the outputs do).&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F6d6yz8f6myixnyf235no.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F6d6yz8f6myixnyf235no.png" alt="Terminal-style check: dimensions unchanged, EXIF/GPS stripped, 35.0 → 7.9 MB" width="799" height="388"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Summary from the real ZIP:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Pixel sizes changed: &lt;strong&gt;0 of 5&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;GPS left: &lt;strong&gt;0 of 5&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;EXIF tags left: &lt;strong&gt;none&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That last point matters for WordPress: if you upload the phone original, WordPress keeps a publicly reachable copy of it (and often its GPS) even after it builds &lt;code&gt;-scaled&lt;/code&gt; thumbnails. Strip first, then upload.&lt;/p&gt;

&lt;h2&gt;
  
  
  4. Compare at 1:1, then your own 100% crop
&lt;/h2&gt;

&lt;p&gt;Hit &lt;strong&gt;Compare&lt;/strong&gt; on any row, then &lt;strong&gt;Zoom 1:1&lt;/strong&gt;. Drag the divider across fine detail — tiles, foliage, sign lettering — not a downscaled preview.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fi9icjzvqnfd3xlv0bro3.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fi9icjzvqnfd3xlv0bro3.png" alt="PixSip Compare view with Zoom 1:1 on the mill photo" width="799" height="562"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And a 100% crop from the real files (metro platform tiles + tactile paving), original on the left, PixSip on the right:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Faml2oq72sr1vnbwfnvw3.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Faml2oq72sr1vnbwfnvw3.png" alt="100% crop: metro tiles original 8.6 MB vs PixSip 2.0 MB" width="799" height="297"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;At this distance the difference is hard to spot. If a crop looks soft, that photo may need a lighter pass elsewhere — or simply a smaller display size in CSS, not a quality slider PixSip doesn't have.&lt;/p&gt;

&lt;h2&gt;
  
  
  5. Swap the files and re-weigh
&lt;/h2&gt;

&lt;p&gt;Replace the five &lt;code&gt;&amp;lt;img&amp;gt;&lt;/code&gt; sources with the compressed JPGs. Same local page, same emulated ~10 Mbps, cache still off:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fs0uuvbmzqi7wnrvg1ioz.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fs0uuvbmzqi7wnrvg1ioz.png" alt="Local test page after compression: 7.9 MB transfer, 6.4 s load" width="800" height="451"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Metric&lt;/th&gt;
&lt;th&gt;Before&lt;/th&gt;
&lt;th&gt;After&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Transfer size&lt;/td&gt;
&lt;td&gt;35.0 MB&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;7.9 MB&lt;/strong&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Largest image&lt;/td&gt;
&lt;td&gt;8.6 MB&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;2.0 MB&lt;/strong&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Load event (~10 Mbps)&lt;/td&gt;
&lt;td&gt;28.1 s&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;6.4 s&lt;/strong&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;That's the Lighthouse/Network loop closed: inventory → compress the offenders → re-measure. LCP on a real WordPress theme will still depend on font/CSS/JS, but the image bytes are no longer the obvious bottleneck.&lt;/p&gt;

&lt;h2&gt;
  
  
  Short checklist
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;Network → Img (or Lighthouse → Improve image delivery) — list the heaviest JPGs only.&lt;/li&gt;
&lt;li&gt;Open &lt;a href="https://pixsip.com/compress-jpg" rel="noopener noreferrer"&gt;/compress-jpg&lt;/a&gt;, wait for the &lt;strong&gt;🔒&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;Drop the batch. Read the results table; download the ZIP.&lt;/li&gt;
&lt;li&gt;Confirm dimensions unchanged and EXIF/GPS gone before you upload to WordPress.&lt;/li&gt;
&lt;li&gt;Compare + Zoom 1:1 (and a 100% crop of your own) on at least one hero image.&lt;/li&gt;
&lt;li&gt;Swap files, re-weigh transfer size. Repeat for the next heavy set if needed.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Free plan caps at 20 × 10 MB; bigger batches are on &lt;a href="https://pixsip.com/pricing" rel="noopener noreferrer"&gt;pricing&lt;/a&gt;. For how MozJPEG lands vs other compressors, see the &lt;a href="https://pixsip.com/blog/pixsip-benchmark" rel="noopener noreferrer"&gt;PixSip benchmark&lt;/a&gt;. Nothing is uploaded — details in &lt;a href="https://pixsip.com/blog/privacy-by-default" rel="noopener noreferrer"&gt;privacy by default&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;If the heavy asset is a &lt;strong&gt;video&lt;/strong&gt; hero instead of a photo strip, I also build &lt;a href="https://vidsmaller.com/" rel="noopener noreferrer"&gt;vidsmaller.com&lt;/a&gt; for target-size cloud compression.&lt;/p&gt;

&lt;h2&gt;
  
  
  Photo credits (CC0)
&lt;/h2&gt;

&lt;p&gt;All five samples are CC0 on Wikimedia Commons:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;a href="https://commons.wikimedia.org/wiki/File:Invalidovna_Metro_Station.jpg" rel="noopener noreferrer"&gt;Invalidovna Metro Station&lt;/a&gt; — AVDLCZ, Pixel 8 Pro&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://commons.wikimedia.org/wiki/File:Ay-Up_Market,_Nottingham_-_29_March_2025.jpg" rel="noopener noreferrer"&gt;Ay-Up Market, Nottingham - 29 March 2025&lt;/a&gt; — Aethonatic, Samsung SM-A336B&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://commons.wikimedia.org/wiki/File:Sturgeon%27s_Mill_-_August_2025_-_Sarah_Stierch_31.jpg" rel="noopener noreferrer"&gt;Sturgeon's Mill - August 2025 - Sarah Stierch 31&lt;/a&gt; — Missvain, iPhone 15 Pro Max&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://commons.wikimedia.org/wiki/File:Mudbank_in_the_River_Adur_2026-05-05.jpg" rel="noopener noreferrer"&gt;Mudbank in the River Adur 2026-05-05&lt;/a&gt; — Andy Li, Pixel 8 Pro&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://commons.wikimedia.org/wiki/File:Advertising_column_with_torn_up_posters_2.jpg" rel="noopener noreferrer"&gt;Advertising column with torn up posters 2&lt;/a&gt; — Profpcde, Pixel 4a&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Related
&lt;/h2&gt;

&lt;p&gt;Related: &lt;a href="https://medium.com/@videocompress/your-wordpress-images-are-too-heavy-compress-the-jpgs-in-your-browser-before-you-upload-2da9127005a6" rel="noopener noreferrer"&gt;Medium — Your WordPress images are too heavy&lt;/a&gt; · &lt;a href="https://videocompress-guides.blogspot.com/2026/10/before-you-hit-upload-in-wordpress.html" rel="noopener noreferrer"&gt;Blogger — Before You Hit Upload in WordPress&lt;/a&gt; · &lt;a href="https://dev.to/videocompress/convert-images-to-webp-or-avif-for-faster-pages-and-check-which-one-is-actually-smaller-5aed"&gt;DEV.to — Convert images to WebP or AVIF&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>performance</category>
      <category>wordpress</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>Your .webm or .mov keeps getting rejected — convert it to a smaller MP4 in the browser</title>
      <dc:creator>videocompress</dc:creator>
      <pubDate>Wed, 14 Oct 2026 02:35:56 +0000</pubDate>
      <link>https://dev.to/videocompress/your-webm-or-mov-keeps-getting-rejected-convert-it-to-a-smaller-mp4-in-the-browser-3hn7</link>
      <guid>https://dev.to/videocompress/your-webm-or-mov-keeps-getting-rejected-convert-it-to-a-smaller-mp4-in-the-browser-3hn7</guid>
      <description>&lt;p&gt;A screen recording lands as &lt;code&gt;.webm&lt;/code&gt;. An iPhone clip lands as &lt;code&gt;.mov&lt;/code&gt;. Both play fine on &lt;em&gt;your&lt;/em&gt; machine — then Slack, an email form, a Windows laptop, or a CMS says the file type isn't supported, or the upload is simply too big.&lt;/p&gt;

&lt;p&gt;The fix that usually works is boring and universal: turn the file into an &lt;strong&gt;MP4 with H.264 video and AAC audio&lt;/strong&gt;, and shrink it while you're at it. That is what most uploaders and players actually expect.&lt;/p&gt;

&lt;p&gt;I ran two real clips through &lt;a href="https://videocompress.dev/" rel="noopener noreferrer"&gt;videocompress.dev&lt;/a&gt; in Chrome — nothing uploaded off the machine — and measured the downloads with &lt;code&gt;ffprobe&lt;/code&gt; afterwards.&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Source&lt;/th&gt;
&lt;th&gt;Container / codecs&lt;/th&gt;
&lt;th&gt;Size (tool)&lt;/th&gt;
&lt;th&gt;Target&lt;/th&gt;
&lt;th&gt;Output&lt;/th&gt;
&lt;th&gt;Reduction&lt;/th&gt;
&lt;th&gt;Encode time&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Tears of Steel clip → WebM&lt;/td&gt;
&lt;td&gt;WebM · VP8 + Vorbis · 1920×800 · 1:15&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;91.4 MB&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;15 MB&lt;/td&gt;
&lt;td&gt;
&lt;strong&gt;13.9 MB&lt;/strong&gt; MP4 H.264+AAC&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;85% smaller&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;~4 min 19 s&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Same clip → MOV&lt;/td&gt;
&lt;td&gt;MOV · H.264 + AAC · 1920×800 · 1:15&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;113.1 MB&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;20 MB&lt;/td&gt;
&lt;td&gt;
&lt;strong&gt;15.0 MB&lt;/strong&gt; MP4 H.264+AAC&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;87% smaller&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;~13 s&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;Both outputs stayed &lt;strong&gt;1920×800&lt;/strong&gt;. The footage is a 75-second cut of &lt;em&gt;Tears of Steel&lt;/em&gt; (Blender Foundation open movie), re-encoded with ffmpeg into a VP8/Vorbis &lt;code&gt;.webm&lt;/code&gt; and an iPhone-style H.264/AAC &lt;code&gt;.mov&lt;/code&gt; so the demo matches the formats people actually send around.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why .webm and .mov trip up uploads
&lt;/h2&gt;

&lt;p&gt;They fail for different reasons:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;WebM&lt;/strong&gt; (often VP8/VP9 + Opus/Vorbis) is great in Chrome and for browser screen recordings, but plenty of desktop apps, email gateways, and older players still want MP4.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;MOV&lt;/strong&gt; is Apple's QuickTime container. iPhones write H.264 or HEVC into it. Many Windows tools and web forms accept the &lt;em&gt;codecs&lt;/em&gt; but reject the &lt;code&gt;.mov&lt;/code&gt; extension — or they accept MOV but choke on the size.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If you only need a container swap and the video is already H.264+AAC, the dedicated &lt;a href="https://videocompress.dev/mov-to-mp4" rel="noopener noreferrer"&gt;MOV to MP4&lt;/a&gt; page can rewrap without re-encoding. When the file is also too large, or the codec isn't MP4-friendly (VP8/VP9 WebM, ProRes, PCM audio), you want the compressor on the homepage: it re-encodes to H.264+AAC and can aim at a megabyte budget. Background on that path: &lt;a href="https://videocompress.dev/video-compressor-no-upload" rel="noopener noreferrer"&gt;video compressor with no upload&lt;/a&gt; and &lt;a href="https://videocompress.dev/webcodecs-vs-ffmpeg-wasm" rel="noopener noreferrer"&gt;WebCodecs vs ffmpeg.wasm&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. Open the compressor and drop the file
&lt;/h2&gt;

&lt;p&gt;Go to &lt;a href="https://videocompress.dev/" rel="noopener noreferrer"&gt;videocompress.dev&lt;/a&gt;. The drop zone accepts &lt;strong&gt;MP4, MOV, WebM, MKV, AVI, WMV, FLV and more&lt;/strong&gt;. No account, no watermark.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Ffgvhflafy8qe0y1zy6rw.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Ffgvhflafy8qe0y1zy6rw.png" alt="Empty drop zone on videocompress.dev" width="799" height="562"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Drop the &lt;code&gt;.webm&lt;/code&gt; or &lt;code&gt;.mov&lt;/code&gt; (or click &lt;strong&gt;Choose file&lt;/strong&gt;). When it is ready you should see the filename, size, resolution, and duration, plus &lt;strong&gt;Quality&lt;/strong&gt; / &lt;strong&gt;Target size&lt;/strong&gt; controls and a &lt;strong&gt;Compress video&lt;/strong&gt; button. The file stays in the tab — the lock line under the controls is literal.&lt;/p&gt;

&lt;p&gt;Here is the WebM after load — &lt;strong&gt;91.4 MB · 1920×800 · 1:15&lt;/strong&gt;:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fgjfhh4kefao9morfi1y3.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fgjfhh4kefao9morfi1y3.png" alt="WebM loaded in the local workspace" width="799" height="562"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And the MOV — &lt;strong&gt;113.1 MB · 1920×800 · 1:15&lt;/strong&gt;:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fat088khf1pvitu9s6mp4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fat088khf1pvitu9s6mp4.png" alt="MOV loaded in the local workspace" width="799" height="562"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Switch to Target size (skip the quality presets for a hard cap)
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Quality&lt;/strong&gt; mode (High / Balanced / Small file) is fine when you only care about “smaller.” When Slack, Discord, email, or a form has a hard megabyte limit, click &lt;strong&gt;Target size&lt;/strong&gt; instead and type the budget in MB.&lt;/p&gt;

&lt;p&gt;For the WebM I set &lt;strong&gt;15&lt;/strong&gt;. The estimate under the button read &lt;strong&gt;≈ 14.1 MB&lt;/strong&gt; before I pressed Compress:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F9h2tna44u0a8b6jpexw5.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F9h2tna44u0a8b6jpexw5.png" alt="WebM with Target size set to 15 MB" width="799" height="562"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;For the MOV I set &lt;strong&gt;20&lt;/strong&gt; (estimate &lt;strong&gt;≈ 18.8 MB&lt;/strong&gt;):&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fwqzypaxyveczyktfzr7l.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fwqzypaxyveczyktfzr7l.png" alt="MOV with Target size set to 20 MB" width="799" height="562"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Leave &lt;strong&gt;Advanced settings → Resolution&lt;/strong&gt; on &lt;strong&gt;Original&lt;/strong&gt; unless the encode is starving and you truly need more headroom — dropping resolution on a clip that already fits the target just throws pixels away. More on picking a number: &lt;a href="https://videocompress.dev/compress-video-to-target-size" rel="noopener noreferrer"&gt;compress video to a target size&lt;/a&gt;. Screen recordings with UI text are the hard case; see &lt;a href="https://videocompress.dev/compress-screen-recording" rel="noopener noreferrer"&gt;compress a screen recording&lt;/a&gt; if that is your source.&lt;/p&gt;

&lt;h2&gt;
  
  
  3. Compress the WebM → MP4
&lt;/h2&gt;

&lt;p&gt;Press &lt;strong&gt;Compress video&lt;/strong&gt;. Keep the tab in the foreground; browsers may pause the encode if you switch away.&lt;/p&gt;

&lt;p&gt;On this machine the VP8 WebM took about &lt;strong&gt;4 minutes 19 seconds&lt;/strong&gt;. The result card:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;91.4 MB → 13.9 MB · 85% smaller&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F8gd9lht4lp4htrdfk74k.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F8gd9lht4lp4htrdfk74k.png" alt="WebM compression finished — 13.9 MB MP4 ready" width="799" height="562"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;code&gt;ffprobe&lt;/code&gt; on the download:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Container: MP4
&lt;/li&gt;
&lt;li&gt;Video: &lt;strong&gt;H.264&lt;/strong&gt; 1920×800 ~1.4 Mbps
&lt;/li&gt;
&lt;li&gt;Audio: &lt;strong&gt;AAC&lt;/strong&gt; stereo 44.1 kHz
&lt;/li&gt;
&lt;li&gt;Duration: still ~75 s
&lt;/li&gt;
&lt;li&gt;Bytes: 14,552,715 (13.9 MB as the tool reports)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;So the awkward WebM is now a normal MP4 under a 15 MB cap.&lt;/p&gt;

&lt;h2&gt;
  
  
  4. Compress the MOV the same way
&lt;/h2&gt;

&lt;p&gt;Same page, &lt;strong&gt;Change video&lt;/strong&gt;, drop the &lt;code&gt;.mov&lt;/code&gt;, &lt;strong&gt;Target size → 20&lt;/strong&gt;, &lt;strong&gt;Compress video&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;This one finished in about &lt;strong&gt;13 seconds&lt;/strong&gt; (H.264 source + WebCodecs path is much faster than decoding VP8 in the tab):&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;113.1 MB → 15.0 MB · 87% smaller&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fkanvhnlm52asyezezbjx.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fkanvhnlm52asyezezbjx.png" alt="MOV compression finished — 15.0 MB MP4 ready" width="799" height="562"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;code&gt;ffprobe&lt;/code&gt; again: &lt;strong&gt;H.264 + AAC&lt;/strong&gt;, 1920×800, ~75 s, 15,713,740 bytes. Same codecs the tool always aims for — which is why &lt;a href="https://videocompress.dev/compress-mov" rel="noopener noreferrer"&gt;compress MOV files&lt;/a&gt; and a plain “make it MP4 and smaller” goal are the same button once you need a size cap.&lt;/p&gt;

&lt;h2&gt;
  
  
  5. Download and spot-check
&lt;/h2&gt;

&lt;p&gt;Click &lt;strong&gt;Download compressed video&lt;/strong&gt;. Quick checks before you re-upload anywhere:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Extension is &lt;code&gt;.mp4&lt;/code&gt;.
&lt;/li&gt;
&lt;li&gt;Size is under your destination limit (for Discord free uploads that means ≤ 20 MB; server boosts raise it — see &lt;a href="https://videocompress.dev/compress-mp4-for-discord" rel="noopener noreferrer"&gt;compress MP4 for Discord&lt;/a&gt;).
&lt;/li&gt;
&lt;li&gt;It plays on a second device or in a private window.
&lt;/li&gt;
&lt;li&gt;If it is still over the limit, lower the target a few MB and run again — or drop resolution one step in Advanced only if the picture is already soft.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Bitrate vs resolution tradeoffs are covered in the &lt;a href="https://videocompress.dev/video-compression-guide" rel="noopener noreferrer"&gt;video compression guide&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;If the file is so large the tab runs out of memory, use &lt;a href="https://vidsmaller.com/" rel="noopener noreferrer"&gt;vidsmaller.com&lt;/a&gt; (cloud exact-size compressor from the same maker) instead of forcing the browser job.&lt;/p&gt;

&lt;h2&gt;
  
  
  Checklist
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;[ ] Source is WebM, MOV, or another browser-decodable file
&lt;/li&gt;
&lt;li&gt;[ ] Opened &lt;a href="https://videocompress.dev/" rel="noopener noreferrer"&gt;videocompress.dev&lt;/a&gt; and saw the file listed locally
&lt;/li&gt;
&lt;li&gt;[ ] Chose &lt;strong&gt;Target size&lt;/strong&gt; with a real destination budget
&lt;/li&gt;
&lt;li&gt;[ ] Downloaded an MP4 that &lt;code&gt;ffprobe&lt;/code&gt; (or any media info tool) shows as H.264 + AAC
&lt;/li&gt;
&lt;li&gt;[ ] Confirmed the byte size against the place you are sending it
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Two formats in, one boring MP4 out — and in these runs, 85–87% smaller without the file ever leaving the browser.&lt;/p&gt;

&lt;p&gt;Related: &lt;a href="https://medium.com/@videocompress/discord-rejected-your-video-shrink-it-to-10mb-in-the-browser-f57904c4a3e9" rel="noopener noreferrer"&gt;Discord rejected your video? Shrink it under 20MB in the browser (Medium)&lt;/a&gt; · &lt;a href="https://medium.com/@videocompress/the-25mb-email-limit-is-smaller-than-it-looks-fitting-a-video-under-it-without-uploading-it-b301e2a0734d" rel="noopener noreferrer"&gt;The 25MB email limit is smaller than it looks (Medium)&lt;/a&gt; · &lt;a href="https://videocompress-guides.hashnode.dev/your-bug-repro-is-89-mb-and-github-takes-10-shrinking-screen-recordings-without-uploading-them" rel="noopener noreferrer"&gt;Your bug repro is 89 MB and GitHub takes 10 (Hashnode)&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>video</category>
      <category>tutorial</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Fit a tall photo into a WhatsApp or LinkedIn circle without losing your head</title>
      <dc:creator>videocompress</dc:creator>
      <pubDate>Thu, 08 Oct 2026 02:09:07 +0000</pubDate>
      <link>https://dev.to/videocompress/fit-a-tall-photo-into-a-whatsapp-or-linkedin-circle-without-losing-your-head-557h</link>
      <guid>https://dev.to/videocompress/fit-a-tall-photo-into-a-whatsapp-or-linkedin-circle-without-losing-your-head-557h</guid>
      <description>&lt;p&gt;Most good photos of a person are tall. Phones shoot 3:4, photographers like 2:3, and a half-body shot with crossed arms almost never comes out square. Then you set it as your WhatsApp DP or LinkedIn photo, and the app hands you a fixed circle to drag around. Either the top of your hair goes or your arms do.&lt;/p&gt;

&lt;p&gt;I wanted to see exactly what gets lost and whether padding the photo first is worth it, so I ran one real portrait through the whole thing and checked the result in a circle before uploading anywhere.&lt;/p&gt;

&lt;h2&gt;
  
  
  What the app actually does with your photo
&lt;/h2&gt;

&lt;p&gt;Profile pictures are stored as squares and displayed as circles. SquareImage's &lt;a href="https://squareimage.dev/full-dp/" rel="noopener noreferrer"&gt;Full DP Maker page&lt;/a&gt; lists the stored sizes it designs for: 640 × 640 on WhatsApp, 512 × 512 on Telegram, 320 × 320 on Instagram and Facebook. LinkedIn shows your photo as a circle as well. Whatever you send gets downscaled, so a 6,000-pixel upload buys you nothing except a slower upload.&lt;/p&gt;

&lt;p&gt;That gives you two separate losses:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;The square crop.&lt;/strong&gt; A 2:3 photo forced into 1:1 loses a third of its height. On my test photo (3760 × 5640) that's 1,880 pixels of hair, forehead or arms.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;The circle mask.&lt;/strong&gt; A circle inside a square covers π/4 of it, about 78.5%. The four corners are always gone, on every platform that shows round avatars.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;You can't avoid the second one, but you can avoid the first: make the photo square yourself, without cropping, and then keep the subject away from the corners.&lt;/p&gt;

&lt;h2&gt;
  
  
  Squaring the photo with the Full DP Maker
&lt;/h2&gt;

&lt;p&gt;The test file was a CC0 headshot from Wikimedia Commons: 3760 × 5640, 11.6 MB, a man in a blue shirt with crossed arms against a dark backdrop. That's a typical "photographer sent me the full-res file" situation.&lt;/p&gt;

&lt;h3&gt;
  
  
  1. Add the photo
&lt;/h3&gt;

&lt;p&gt;Open the &lt;a href="https://squareimage.dev/full-dp/" rel="noopener noreferrer"&gt;Full DP Maker&lt;/a&gt; and drop the photo in, pick it with the button, or paste it from the clipboard. The square is drawn on a canvas in your browser, so the 11.6 MB original never leaves your machine.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F0yiiuw0vgpueqlknri1y.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F0yiiuw0vgpueqlknri1y.png" alt="Full DP Maker drop zone on squareimage.dev, before adding a photo" width="800" height="212"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  2. Choose what fills the empty sides
&lt;/h3&gt;

&lt;p&gt;You get three options: &lt;strong&gt;Blur&lt;/strong&gt; fills the sides with a blurred copy of the same photo, &lt;strong&gt;Color&lt;/strong&gt; fills them with one flat color, and &lt;strong&gt;Crop&lt;/strong&gt; is there if you decide you want to fill the frame after all.&lt;/p&gt;

&lt;p&gt;For a person against a busy or textured background, Blur usually looks most natural because the colors already match. If the backdrop is plain, or the photo is a logo, Color looks cleaner. Here's the photo with Blur at the default photo size of 100%:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fbwvduuhelswzzwfm7ox5.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fbwvduuhelswzzwfm7ox5.png" alt="Portrait squared with the Blur fill at 100% photo size, showing 3760 × 5640 px source" width="800" height="485"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;At 100% the photo touches the top and bottom of the square. That's fine for a square post, but for a circle the head is right where the mask starts curving in.&lt;/p&gt;

&lt;h3&gt;
  
  
  3. Pull the subject in with Photo size
&lt;/h3&gt;

&lt;p&gt;This is the setting that makes the difference for avatars. I moved &lt;strong&gt;Photo size&lt;/strong&gt; from 100% down to 80%. The whole photo shrinks toward the center and the blurred fill grows around it, so the head and elbows sit inside the circle instead of in the corners.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F3abl7nux6jqtrfmpvt89.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F3abl7nux6jqtrfmpvt89.png" alt="Photo size slider set to 80%, subject pulled away from the edges with a blurred surround" width="799" height="449"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Go lower if the photo has important stuff near its edges. The tool's own advice is to keep text in the middle 70% of the square.&lt;/p&gt;

&lt;h3&gt;
  
  
  4. Download, then check it in a circle before uploading
&lt;/h3&gt;

&lt;p&gt;Leave the download size at 1024 × 1024 and the format at JPEG, and click &lt;strong&gt;Download DP&lt;/strong&gt;. My 11.6 MB original came out as a 1024 × 1024 JPEG of about 133 KB, which any app will accept without complaining.&lt;/p&gt;

&lt;p&gt;Before uploading, I masked both versions with a circle to see roughly what the app will show. On the left is the original with its center square taken (what you get if you just accept the app's crop), and on the right is the Full DP export:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Ffgy5op1jritkyd3avpxw.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Ffgy5op1jritkyd3avpxw.png" alt="Circle mask comparison: original 2:3 photo cropped to its center square versus the Full DP export at 80% photo size" width="799" height="444"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The cropped version cuts into the hair and loses most of the arms. The padded version keeps the whole person. The trade-off is that he's smaller in the circle, which matters at 40 pixels in a chat list.&lt;/p&gt;

&lt;h2&gt;
  
  
  When padding is the wrong call
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Tight headshots.&lt;/strong&gt; If the face already fills most of the frame, padding just makes it smaller. Choose the crop yourself with &lt;a href="https://squareimage.dev/squarecrop/" rel="noopener noreferrer"&gt;Square Crop&lt;/a&gt; and move the box so the face sits in the middle.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Very wide photos.&lt;/strong&gt; A 16:9 landscape padded to a square leaves big bands above and below, and the person turns into a speck. Crop it.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Busy backgrounds.&lt;/strong&gt; A blurred copy of a cluttered background looks muddy. Switch to Color, or tune the blur strength in the &lt;a href="https://squareimage.dev/blurredframe/" rel="noopener noreferrer"&gt;Blurred Frame editor&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Low-resolution originals.&lt;/strong&gt; Fitting a 300-pixel photo into a 1024 square doesn't add detail.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If you need a square for a post rather than an avatar, the &lt;a href="https://squareimage.dev/" rel="noopener noreferrer"&gt;main square converter on squareimage.dev&lt;/a&gt; does the same blur, color, resize and crop modes and defaults to 1200 px.&lt;/p&gt;

&lt;p&gt;Related on Medium: &lt;a href="https://medium.com/@videocompress/linkedin-and-whatsapp-avatars-that-keep-the-whole-face-0f674ae10cd9" rel="noopener noreferrer"&gt;an earlier take on LinkedIn and WhatsApp avatars that pads with blur first&lt;/a&gt; and &lt;a href="https://medium.com/@videocompress/instagram-1-1-image-without-cutting-off-the-subject-f3d060eec2a9" rel="noopener noreferrer"&gt;the Instagram 1:1 version of the same padding idea&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Sample photo: "Rob Headshot HQ", Wikimedia Commons, CC0.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>tutorial</category>
      <category>productivity</category>
      <category>design</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Convert images to WebP or AVIF for faster pages (and check which one is actually smaller)</title>
      <dc:creator>videocompress</dc:creator>
      <pubDate>Tue, 06 Oct 2026 11:57:17 +0000</pubDate>
      <link>https://dev.to/videocompress/convert-images-to-webp-or-avif-for-faster-pages-and-check-which-one-is-actually-smaller-5aed</link>
      <guid>https://dev.to/videocompress/convert-images-to-webp-or-avif-for-faster-pages-and-check-which-one-is-actually-smaller-5aed</guid>
      <description>&lt;p&gt;PageSpeed Insights flags your images ("Improve image delivery" now, "Serve images in next-gen formats" in older reports), and the standard advice is to convert everything to WebP, or to AVIF if you want the smallest files. I wanted to see whether that holds up, so I converted one batch to WebP, AVIF and JPG at the same time and compared the sizes.&lt;/p&gt;

&lt;p&gt;AVIF won once out of four. For three big camera photos, the plain JPG beat both newer formats. So this post is less "use format X" and more "measure your own images before you touch your markup", which takes about a minute with the right tool.&lt;/p&gt;

&lt;h2&gt;
  
  
  The scoreboard
&lt;/h2&gt;

&lt;p&gt;The batch was four files, picked to look like what a typical site serves: three 4032×3024 phone photos (a pond, a land-art park, a railroad park; lots of grass and leaves, 6.5–6.7 MB each) and one 2880×1628 PNG screenshot of a browser window (1.9 MB). All four are CC0 from Wikimedia Commons. Here's what came out:&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;File&lt;/th&gt;
&lt;th&gt;Original&lt;/th&gt;
&lt;th&gt;WebP&lt;/th&gt;
&lt;th&gt;AVIF&lt;/th&gt;
&lt;th&gt;JPG&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;lake-pond.jpg&lt;/td&gt;
&lt;td&gt;6.7 MB&lt;/td&gt;
&lt;td&gt;2.5 MB (−62%)&lt;/td&gt;
&lt;td&gt;3.5 MB (−48%)&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;2.1 MB (−69%)&lt;/strong&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;earthworks.jpg&lt;/td&gt;
&lt;td&gt;6.5 MB&lt;/td&gt;
&lt;td&gt;2.9 MB (−55%)&lt;/td&gt;
&lt;td&gt;3.8 MB (−41%)&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;2.2 MB (−66%)&lt;/strong&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;rail-park.jpg&lt;/td&gt;
&lt;td&gt;6.5 MB&lt;/td&gt;
&lt;td&gt;2.6 MB (−61%)&lt;/td&gt;
&lt;td&gt;3.5 MB (−47%)&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;2.1 MB (−68%)&lt;/strong&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;browser-screenshot.png&lt;/td&gt;
&lt;td&gt;1.9 MB&lt;/td&gt;
&lt;td&gt;219.2 KB (−88%)&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;170.0 KB (−91%)&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;253.8 KB (−86%)&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;Taking the smallest version of each file, the batch went from 21.6 MB to about 6.6 MB ("Saved 15.0 MB total · 70% smaller"). Every output kept its original dimensions.&lt;/p&gt;

&lt;p&gt;I wondered whether the photo result was a quirk of full camera resolution, so I resized the three photos to 1600×1200 with a script and ran them again. The order didn't change: JPG 381–446 KB, WebP 538–597 KB, AVIF 672–749 KB.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why "just use AVIF" didn't hold here
&lt;/h2&gt;

&lt;p&gt;PixSip's &lt;a href="https://pixsip.com/blog/image-format-guide" rel="noopener noreferrer"&gt;image format guide&lt;/a&gt; gives the usual rules of thumb: JPG or WebP for photos, PNG for screenshots and UI, WebP or AVIF when you want the smallest website images. All current major browsers decode both WebP and AVIF, so browser support isn't really the obstacle anymore. Whether the file is actually smaller is.&lt;/p&gt;

&lt;p&gt;That depends on the encoder settings as much as on the format. PixSip has no quality slider. Each format gets one fixed quality picked by its developers, so this table isn't a lab comparison at matched quality. It shows what you'd actually get from the tool. With those settings, MozJPEG was the most aggressive on detailed outdoor photos, while the screenshot's flat colors and sharp text played to AVIF's and WebP's strengths.&lt;/p&gt;

&lt;h2&gt;
  
  
  Run the same test on your own images
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Pick the formats before you drop anything
&lt;/h3&gt;

&lt;p&gt;Open &lt;a href="https://pixsip.com/webp-converter" rel="noopener noreferrer"&gt;PixSip's WebP converter&lt;/a&gt;. It takes JPG, PNG, HEIC, WebP and AVIF, up to 20 files per batch and 10 MB per file on the free plan. Nothing gets uploaded: libwebp, libavif and MozJPEG run as WebAssembly inside the tab.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F1oz4bgai6nywrafj6si6.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F1oz4bgai6nywrafj6si6.png" alt="PixSip WebP converter page with the drop area" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Before dropping files, look under the drop area. "Convert my images automatically" is already on, with WEBP selected. Click &lt;strong&gt;AVIF&lt;/strong&gt; and &lt;strong&gt;JPG&lt;/strong&gt; too. The free plan writes up to three formats per image, which is exactly the comparison you need: two next-gen candidates plus a JPG that doubles as the fallback. The same switch sits on the &lt;a href="https://pixsip.com/" rel="noopener noreferrer"&gt;PixSip homepage&lt;/a&gt;, where JPEG XL is also an option (all five formats at once needs the Ultra plan).&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F52l13kwoqyyjysp70dg7.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F52l13kwoqyyjysp70dg7.png" alt="Convert switch on with AVIF, WEBP and JPG selected" width="798" height="136"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Drop the batch and let the check marks pick
&lt;/h3&gt;

&lt;p&gt;Now drop the files. My four took about 30 seconds; AVIF is the slow one. Each file gets one box per format with its size and saving, and a check mark lands on the smallest. You don't have to do any arithmetic.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fl0apt3fghcaw4d42jsas.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fl0apt3fghcaw4d42jsas.png" alt="Results: JPG smallest for the three photos, AVIF smallest for the PNG screenshot" width="799" height="345"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Zoom in on the winner
&lt;/h3&gt;

&lt;p&gt;Click &lt;strong&gt;Compare&lt;/strong&gt; on a row to see the original next to the smallest output (here the 1.9 MB PNG against the 170 KB AVIF), with a drag divider and a &lt;strong&gt;Zoom 1:1&lt;/strong&gt; button. Small text in screenshots is the first thing to go soft, so check it at 1:1 before you commit.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F2we92hoxvfsjtqbt0sew.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F2we92hoxvfsjtqbt0sew.png" alt="Compare view: 1.9 MB PNG original against the 170.0 KB AVIF" width="800" height="575"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Download 4 as ZIP&lt;/strong&gt; gives you every format of every file, named like &lt;code&gt;browser-screenshot-compressed.avif&lt;/code&gt;, so you can keep the winners and the fallbacks.&lt;/p&gt;

&lt;h2&gt;
  
  
  Ship only the winners
&lt;/h2&gt;

&lt;p&gt;Use &lt;code&gt;&amp;lt;picture&amp;gt;&lt;/code&gt; only where a next-gen format actually won. For the screenshot, that's AVIF first, WebP second, and the JPG as the fallback every browser can show:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;picture&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;source&lt;/span&gt; &lt;span class="na"&gt;srcset=&lt;/span&gt;&lt;span class="s"&gt;"/img/browser-screenshot.avif"&lt;/span&gt; &lt;span class="na"&gt;type=&lt;/span&gt;&lt;span class="s"&gt;"image/avif"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;source&lt;/span&gt; &lt;span class="na"&gt;srcset=&lt;/span&gt;&lt;span class="s"&gt;"/img/browser-screenshot.webp"&lt;/span&gt; &lt;span class="na"&gt;type=&lt;/span&gt;&lt;span class="s"&gt;"image/webp"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;img&lt;/span&gt; &lt;span class="na"&gt;src=&lt;/span&gt;&lt;span class="s"&gt;"/img/browser-screenshot.jpg"&lt;/span&gt; &lt;span class="na"&gt;alt=&lt;/span&gt;&lt;span class="s"&gt;"Arc browser showing a Wikipedia article"&lt;/span&gt;
       &lt;span class="na"&gt;width=&lt;/span&gt;&lt;span class="s"&gt;"2880"&lt;/span&gt; &lt;span class="na"&gt;height=&lt;/span&gt;&lt;span class="s"&gt;"1628"&lt;/span&gt; &lt;span class="na"&gt;loading=&lt;/span&gt;&lt;span class="s"&gt;"lazy"&lt;/span&gt; &lt;span class="na"&gt;decoding=&lt;/span&gt;&lt;span class="s"&gt;"async"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/picture&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The browser uses the first &lt;code&gt;&amp;lt;source&amp;gt;&lt;/code&gt; whose &lt;code&gt;type&lt;/code&gt; it supports and skips the rest, so put the smallest one first. Keep &lt;code&gt;width&lt;/code&gt; and &lt;code&gt;height&lt;/code&gt; on the &lt;code&gt;&amp;lt;img&amp;gt;&lt;/code&gt; so the layout doesn't jump while the image loads.&lt;/p&gt;

&lt;p&gt;For the three photos, I'd skip &lt;code&gt;&amp;lt;picture&amp;gt;&lt;/code&gt; and serve the compressed JPG. It was the smallest file, and it's one less format to keep in sync. Resizing before you compress matters more anyway, because a 4032 px photo in a 1200 px column is the bigger waste.&lt;/p&gt;

&lt;p&gt;If JPG keeps winning for your photos too, PixSip's &lt;a href="https://pixsip.com/compress-jpg" rel="noopener noreferrer"&gt;JPG compressor&lt;/a&gt; gets you there with one less click.&lt;/p&gt;

&lt;p&gt;Related: &lt;a href="https://medium.com/@videocompress/your-wordpress-images-are-too-heavy-compress-the-jpgs-in-your-browser-before-you-upload-2da9127005a6" rel="noopener noreferrer"&gt;the WordPress JPG compression walkthrough on Medium&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>performance</category>
      <category>images</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>How to convert iPhone HEIC photos to JPG without uploading them</title>
      <dc:creator>videocompress</dc:creator>
      <pubDate>Thu, 01 Oct 2026 13:01:49 +0000</pubDate>
      <link>https://dev.to/videocompress/how-to-convert-iphone-heic-photos-to-jpg-without-uploading-them-af</link>
      <guid>https://dev.to/videocompress/how-to-convert-iphone-heic-photos-to-jpg-without-uploading-them-af</guid>
      <description>&lt;p&gt;You AirDrop or email a few iPhone photos to a Windows laptop, and the files end in &lt;code&gt;.heic&lt;/code&gt;. Photos won't open them, the upload form on some website rejects them, and the colleague you forwarded them to asks what format that is.&lt;/p&gt;

&lt;p&gt;HEIC is Apple's default camera format. It's efficient, but outside Apple's own apps support is patchy. The usual fix is an "online HEIC converter," which means sending your personal photos to someone's server. You don't need to. Here's how to do it in the browser with the files staying on your machine, and how to come out with much smaller files while you're at it.&lt;/p&gt;

&lt;p&gt;For this walkthrough I used three full-resolution iPhone photos (shot on an iPhone X, 12 Pro Max and 13 Pro, CC0 on Wikimedia Commons), saved as HEIC: 4032×3024 pixels, 3.1 MB, 4.1 MB and 4.7 MB.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. Open the converter and drop in your HEIC files
&lt;/h2&gt;

&lt;p&gt;Go to the &lt;a href="https://pixsip.com/heic-to-jpg" rel="noopener noreferrer"&gt;HEIC to JPG converter on PixSip&lt;/a&gt;. No account needed. Drag your &lt;code&gt;.heic&lt;/code&gt; files onto the drop area, or click it to pick them. The free plan takes up to 20 files at a time, each up to 10 MB, so full-size iPhone photos fit.&lt;/p&gt;

&lt;p&gt;The decoding happens in the tab (WebAssembly), so nothing gets uploaded. If you want to check that yourself, load the page, switch off Wi-Fi, and then drop the files. It still works.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F4ta8lfg707hlrjnhbjt9.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F4ta8lfg707hlrjnhbjt9.png" alt="PixSip HEIC to JPG page with the drop area" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Pick your output formats: JPG, plus WebP and AVIF if you can use them
&lt;/h2&gt;

&lt;p&gt;Below the drop area there's a "Convert my images automatically" switch with a row of formats. On this page JPG is already selected. There's no quality slider: PixSip encodes at one quality setting that it tuned against TinyPNG, and that setting is what does the shrinking.&lt;/p&gt;

&lt;p&gt;I also ticked &lt;strong&gt;WebP&lt;/strong&gt; and &lt;strong&gt;AVIF&lt;/strong&gt;. The free plan writes up to three formats side by side, so you get all three versions of each photo from one drop and can keep whichever is smallest. Use JPG if the file is going somewhere picky (an old upload form, a printer, an email to someone on an old PC). WebP is fine for most websites and chat apps.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fn6pp06arka0aluay7uyz.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fn6pp06arka0aluay7uyz.png" alt="Convert switch on, with JPG, WebP and AVIF selected" width="798" height="136"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  3. Check the results
&lt;/h2&gt;

&lt;p&gt;Each photo gets a row with one box per format: the new size, the percentage saved, and a download button. A check mark sits on the smallest version of each photo. My three photos came out like this:&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Photo&lt;/th&gt;
&lt;th&gt;HEIC&lt;/th&gt;
&lt;th&gt;JPG&lt;/th&gt;
&lt;th&gt;WebP&lt;/th&gt;
&lt;th&gt;AVIF&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;IMG_7364 (4032×3024)&lt;/td&gt;
&lt;td&gt;3.1 MB&lt;/td&gt;
&lt;td&gt;806.5 KB (−74%)&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;684.2 KB (−78%)&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;896.5 KB (−71%)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;IMG_8097 (3024×4032)&lt;/td&gt;
&lt;td&gt;4.1 MB&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;786.6 KB (−81%)&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;879.5 KB (−79%)&lt;/td&gt;
&lt;td&gt;1.4 MB (−66%)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;IMG_MILAN (3024×4032)&lt;/td&gt;
&lt;td&gt;4.7 MB&lt;/td&gt;
&lt;td&gt;645.5 KB (−86%)&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;548.7 KB (−88%)&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;728.6 KB (−85%)&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;Taking the smallest file for each photo, the batch went from 11.9 MB to about 2 MB (PixSip's summary: "Saved 9.9 MB total · 83% smaller"). I didn't resize anything, and PixSip doesn't have a resize option. The outputs are still 4032×3024. All of the saving comes from re-encoding at that calibrated quality.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F0ln4bnz09jw7vgty3xro.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F0ln4bnz09jw7vgty3xro.png" alt="Three HEIC photos converted to JPG, WebP and AVIF, each 66–88% smaller" width="799" height="286"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;A caveat so you know what to expect: how much you save depends on how heavily the HEIC was compressed to begin with. In an earlier run with small (1440×960) HEIC samples that were already tightly compressed, the JPGs came out only 1–42% smaller. A full-size iPhone HEIC can also come out &lt;em&gt;bigger&lt;/em&gt; as a JPG, because HEIC is the more efficient format. If that happens, try the WebP version.&lt;/p&gt;

&lt;h2&gt;
  
  
  4. Compare before you download (optional)
&lt;/h2&gt;

&lt;p&gt;Click &lt;strong&gt;Compare&lt;/strong&gt; on any row to get a slider view: the decoded original on one side, the smallest output on the other (here the 684 KB WebP against the 3.1 MB original). Drag the divider, or use &lt;strong&gt;Zoom 1:1&lt;/strong&gt;, to check fine detail like text, skies and skin tones before you send the file to anyone.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F5k19t6vljonyzeovwukv.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F5k19t6vljonyzeovwukv.png" alt="Before/after slider: 3.1 MB original vs 684.2 KB WebP" width="800" height="509"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  5. Download one file or the whole batch
&lt;/h2&gt;

&lt;p&gt;Click the button in any format box to save just that file, or &lt;strong&gt;Download 3 as ZIP&lt;/strong&gt; (the number matches your batch) to grab everything. The ZIP is put together in the browser too, with every format you picked, named like &lt;code&gt;IMG_7364-compressed.jpg&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Metadata such as GPS location is stripped automatically. That's usually what you want before posting a photo publicly, but keep the original HEIC if you need the date and location later.&lt;/p&gt;

&lt;h2&gt;
  
  
  If you only need to &lt;em&gt;view&lt;/em&gt; HEIC on Windows
&lt;/h2&gt;

&lt;p&gt;Converting isn't always the answer. If you just want to open the photos on your own PC, Microsoft's HEIF/HEVC extensions or an iPhone camera setting might suit you better. This &lt;a href="https://pixsip.com/blog/how-to-open-heic-on-windows" rel="noopener noreferrer"&gt;walkthrough of the three ways to open HEIC files on Windows&lt;/a&gt; compares them. And if you're curious why the tool runs locally instead of on a server, the team explains it in &lt;a href="https://pixsip.com/blog/privacy-by-default" rel="noopener noreferrer"&gt;why PixSip doesn't upload your photos&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Related: &lt;a href="https://medium.com/@videocompress/your-wordpress-images-are-too-heavy-compress-the-jpgs-in-your-browser-before-you-upload-2da9127005a6" rel="noopener noreferrer"&gt;compressing JPGs for a WordPress site before you upload them&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>iphone</category>
      <category>tutorial</category>
      <category>images</category>
      <category>privacy</category>
    </item>
    <item>
      <title>H.264 vs H.265: which codec when the size target still fails</title>
      <dc:creator>videocompress</dc:creator>
      <pubDate>Mon, 21 Sep 2026 02:23:31 +0000</pubDate>
      <link>https://dev.to/videocompress/h264-vs-h265-which-codec-when-the-size-target-still-fails-4l1l</link>
      <guid>https://dev.to/videocompress/h264-vs-h265-which-codec-when-the-size-target-still-fails-4l1l</guid>
      <description>

&lt;p&gt;You already set a megabyte cap and the clip is still too big—or too slow to finish in a browser tab. That is when codec choice matters. Use H.264 when recipients must play it everywhere; switch to H.265 only when both ends support it and you need another size cut.&lt;/p&gt;

&lt;p&gt;This walkthrough uses &lt;a href="https://vidsmaller.com" rel="noopener noreferrer"&gt;VidSmaller&lt;/a&gt;, a cloud compressor that hits an exact output size (Advanced mode unlocks H.265 on paid plans).&lt;/p&gt;

&lt;h2&gt;
  
  
  1. Upload once, keep the laptop cool
&lt;/h2&gt;

&lt;p&gt;Open &lt;a href="https://vidsmaller.com" rel="noopener noreferrer"&gt;vidsmaller.com&lt;/a&gt;. Drop MP4, MOV, MKV, WebM, or another supported format. Guest accounts have per-file limits and limited &lt;a href="https://vidsmaller.com/pricing" rel="noopener noreferrer"&gt;credits&lt;/a&gt;. There is no watermark; uploads are deleted after processing.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F7eqwoy1vu665aa3i11my.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F7eqwoy1vu665aa3i11my.png" alt="VidSmaller cloud upload drop zone" width="800" height="410"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Long 4K timelines belong here—not in a browser tab that can OOM mid-encode.&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Hit the size first, then choose the codec
&lt;/h2&gt;

&lt;p&gt;In &lt;strong&gt;Basic&lt;/strong&gt;, set &lt;strong&gt;Output file size&lt;/strong&gt; or tap Email / WhatsApp / Discord / Reddit so the two-pass job aims at a real number.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fv598irgha6bh9xq2h1yo.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fv598irgha6bh9xq2h1yo.png" alt="Size presets and Advanced codec options" width="800" height="410"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Then open &lt;strong&gt;Advanced&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;H.264 + MP4&lt;/strong&gt; — default. Widest phone, chat app, and browser playback.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;H.265&lt;/strong&gt; — smaller file at the same quality, slower encode, and older devices may refuse it.&lt;/li&gt;
&lt;li&gt;Drop resolution (4K → 1080p or 720p) &lt;strong&gt;before&lt;/strong&gt; you flip codecs if the source is huge.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;For hard caps (forms, WhatsApp comfort), target about 1MB under the published limit so overhead does not push you over.&lt;/p&gt;

&lt;h2&gt;
  
  
  3. Download and verify playback
&lt;/h2&gt;

&lt;p&gt;Start compression, wait for the cloud job, download. You can close the tab; the result link stays until it expires.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fdzhu4p3adg6v861hzusw.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fdzhu4p3adg6v861hzusw.png" alt="Compressed result ready to download" width="800" height="410"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Spot-check on the device that will receive the file. If H.265 fails to play, re-run the same size target with H.264 (or one resolution step lower).&lt;/p&gt;

&lt;p&gt;Related: &lt;a href="https://medium.com/@videocompress/when-the-browser-runs-out-of-memory-cloud-compress-instead-ae5220f4d777" rel="noopener noreferrer"&gt;why long 4K encodes belong in the cloud, not in a browser tab&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Sensitive short clips that fit in device memory can stay local: &lt;a href="https://videocompress.dev" rel="noopener noreferrer"&gt;videocompress.dev&lt;/a&gt;.
&lt;/h2&gt;

</description>
      <category>video</category>
      <category>compression</category>
      <category>tutorial</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Shrink a 4K phone video for WhatsApp or email</title>
      <dc:creator>videocompress</dc:creator>
      <pubDate>Sun, 20 Sep 2026 10:42:36 +0000</pubDate>
      <link>https://dev.to/videocompress/shrink-a-4k-phone-video-for-whatsapp-or-email-4ig3</link>
      <guid>https://dev.to/videocompress/shrink-a-4k-phone-video-for-whatsapp-or-email-4ig3</guid>
      <description>&lt;p&gt;4K clips blow past WhatsApp and mailbox limits fast. Knock resolution down first, then set an exact megabyte target in the cloud so a long encode does not kill the browser tab.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. Upload the 4K source
&lt;/h2&gt;

&lt;p&gt;Open &lt;a href="https://vidsmaller.com" rel="noopener noreferrer"&gt;vidsmaller.com&lt;/a&gt;. Drop MP4, MOV, or another supported file. Guests get large per-file limits and limited &lt;a href="https://vidsmaller.com/pricing" rel="noopener noreferrer"&gt;credits&lt;/a&gt;. No watermark; uploads are removed after the job.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fy45gpwrr4qtq9sor35tn.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fy45gpwrr4qtq9sor35tn.png" alt="VidSmaller upload drop zone" width="800" height="410"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Cap the size, then fix resolution
&lt;/h2&gt;

&lt;p&gt;In &lt;strong&gt;Basic&lt;/strong&gt;, tap WhatsApp or Email, or drag &lt;strong&gt;Output file size&lt;/strong&gt; (often ~16MB for WhatsApp comfort, ~18–20MB toward a 25MB mailbox).&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fk8e9pc7gdikm19zzuxkf.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fk8e9pc7gdikm19zzuxkf.png" alt="Size presets and slider" width="800" height="410"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In &lt;strong&gt;Advanced&lt;/strong&gt;, set 1080p (or 720p) before chasing codecs. Prefer H.264 + MP4 for playback. H.265 can go smaller but older phones may fail.&lt;/p&gt;

&lt;h2&gt;
  
  
  3. Download and send
&lt;/h2&gt;

&lt;p&gt;Start the job, wait, download. You can leave the page; the result link stays until it expires.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fny5m5ct4ny6q5axe3z5k.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fny5m5ct4ny6q5axe3z5k.png" alt="Compressed result ready" width="800" height="410"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Still too big? Drop one more resolution step and re-run before switching codecs.&lt;/p&gt;

&lt;p&gt;Short private clips that fit in memory can stay local: &lt;a href="https://videocompress.dev" rel="noopener noreferrer"&gt;videocompress.dev&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Related: &lt;a href="https://medium.com/@videocompress/when-the-browser-runs-out-of-memory-cloud-compress-instead-ae5220f4d777" rel="noopener noreferrer"&gt;moving a long encode to the cloud when the tab crashes&lt;/a&gt; and &lt;a href="https://medium.com/@videocompress/h-264-or-h-265-when-the-file-still-will-not-fit-daf82b2e093e" rel="noopener noreferrer"&gt;a quick H.264 vs H.265 decision guide&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>video</category>
      <category>webdev</category>
      <category>productivity</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>Make an Instagram-ready square without cropping faces</title>
      <dc:creator>videocompress</dc:creator>
      <pubDate>Sun, 20 Sep 2026 08:42:17 +0000</pubDate>
      <link>https://dev.to/videocompress/make-an-instagram-ready-square-without-cropping-faces-1b1l</link>
      <guid>https://dev.to/videocompress/make-an-instagram-ready-square-without-cropping-faces-1b1l</guid>
      <description>&lt;p&gt;Feed posts want 1:1. A hard crop on a wide shot often clips a shoulder or forehead. Pad instead: keep the whole photo centered and fill the empty bands.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. Drop the photo in the browser
&lt;/h2&gt;

&lt;p&gt;Open &lt;a href="https://squareimage.dev" rel="noopener noreferrer"&gt;squareimage.dev&lt;/a&gt;. Add JPEG, PNG, WebP, GIF, or BMP. Encoding stays in the tab — no account, no upload.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fwg6yltiwt1k5qici1lf1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fwg6yltiwt1k5qici1lf1.png" alt="SquareImage drop zone" width="799" height="295"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Pad first, crop only if you mean it
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Blur background&lt;/strong&gt; — subject stays intact; empty sides are a blurred copy. Adjust scale/blur in the &lt;a href="https://squareimage.dev/blurredframe/" rel="noopener noreferrer"&gt;blurred frame editor&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Solid color&lt;/strong&gt; — same padding with a flat fill; good for products and logos.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Resize&lt;/strong&gt; — stretches to square; use only when distortion is fine.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Crop 1:1&lt;/strong&gt; — when you &lt;em&gt;want&lt;/em&gt; to cut edges. Also at &lt;a href="https://squareimage.dev/squarecrop/" rel="noopener noreferrer"&gt;square crop&lt;/a&gt;.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;People and landscapes: start with blur. Clean studio backgrounds: solid color usually looks cleaner.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fp6pyo8aife74m0y356gn.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fp6pyo8aife74m0y356gn.png" alt="Blur padding to 1:1" width="800" height="312"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  3. Export at Instagram’s square size
&lt;/h2&gt;

&lt;p&gt;Default is 1200×1200. For the feed, &lt;a href="https://squareimage.dev/instagram-square-guide.html" rel="noopener noreferrer"&gt;1080×1080 is the usual Instagram square&lt;/a&gt;. JPEG for photos, PNG if you need transparency, WebP for a smaller file.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F0tqbcvjhrmv0ig8mwdbq.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F0tqbcvjhrmv0ig8mwdbq.png" alt="Export controls" width="800" height="372"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Close the tab and the file is gone from the session. More on sizes: &lt;a href="https://squareimage.dev/square-image-guide-en.html" rel="noopener noreferrer"&gt;1:1 size guide&lt;/a&gt;. Profile-style full frames: &lt;a href="https://squareimage.dev/full-dp/" rel="noopener noreferrer"&gt;full DP&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Related: &lt;a href="https://medium.com/@videocompress/keep-the-whole-subject-when-you-force-a-photo-to-square-75d5ad1f72db" rel="noopener noreferrer"&gt;padding any photo to a square instead of cropping it&lt;/a&gt; and &lt;a href="https://medium.com/@videocompress/linkedin-and-whatsapp-avatars-that-keep-the-whole-face-0f674ae10cd9" rel="noopener noreferrer"&gt;profile pictures for LinkedIn and WhatsApp&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>productivity</category>
      <category>tutorial</category>
      <category>unsplash</category>
    </item>
    <item>
      <title>Email says the video is too large — shrink it to ~25MB in the browser</title>
      <dc:creator>videocompress</dc:creator>
      <pubDate>Sat, 19 Sep 2026 01:40:17 +0000</pubDate>
      <link>https://dev.to/videocompress/email-says-the-video-is-too-large-shrink-it-to-25mb-in-the-browser-17cm</link>
      <guid>https://dev.to/videocompress/email-says-the-video-is-too-large-shrink-it-to-25mb-in-the-browser-17cm</guid>
      <description>&lt;p&gt;Gmail, Outlook, and a lot of corporate mail reject video attachments once the message crosses their size line. The number people quote is usually &lt;strong&gt;25MB&lt;/strong&gt;, but Base64 wrapping eats headroom, so a file that shows 24.8MB on disk can still bounce.&lt;/p&gt;

&lt;p&gt;If you do not want that clip on a random “online compressor” server, re-encode it in the tab instead.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. Drop the file into a local compressor
&lt;/h2&gt;

&lt;p&gt;Open &lt;a href="https://videocompress.dev" rel="noopener noreferrer"&gt;videocompress.dev&lt;/a&gt;. Drag in MP4, MOV, WebM, or MKV. Decoding and encoding stay in the browser — no signup, no upload, no watermark.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F0mxf17w6i79uv18ve8sz.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F0mxf17w6i79uv18ve8sz.png" alt="In-browser drop zone on videocompress.dev" width="800" height="410"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Aim under the mailbox cap, not at it
&lt;/h2&gt;

&lt;p&gt;Pick &lt;strong&gt;Target size&lt;/strong&gt;. For email, type &lt;code&gt;25&lt;/code&gt;, or use &lt;a href="https://videocompress.dev/compress-video-to-target-size" rel="noopener noreferrer"&gt;compress video to a target size&lt;/a&gt; and set 25 there.&lt;/p&gt;

&lt;p&gt;If past sends failed at “almost 25,” try &lt;strong&gt;18–20MB&lt;/strong&gt; so headers and encoding still fit. Discord-style paths such as &lt;a href="https://videocompress.dev/compress-mp4-for-discord" rel="noopener noreferrer"&gt;compress MP4 for Discord&lt;/a&gt; target a lower ceiling; email can keep more bits.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fqjdhsm46zjob67a1ezkk.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fqjdhsm46zjob67a1ezkk.png" alt="Target size control for an email-sized MP4" width="800" height="410"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Keep resolution on a &lt;a href="https://videocompress.dev/compress-screen-recording" rel="noopener noreferrer"&gt;screen recording&lt;/a&gt; with readable text unless the preview looks blocky — then drop one step (1080 → 720) and run again.&lt;/p&gt;

&lt;h2&gt;
  
  
  3. Download H.264 MP4 and attach
&lt;/h2&gt;

&lt;p&gt;When the job finishes, download the MP4 (H.264 + AAC) and attach it to the draft.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fi8022exda47jzxmzyyoy.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fi8022exda47jzxmzyyoy.png" alt="Compressed MP4 ready to download" width="800" height="410"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Still rejected? Lower resolution once more, or read the &lt;a href="https://videocompress.dev/video-compression-guide" rel="noopener noreferrer"&gt;video compression guide&lt;/a&gt; for bitrate tradeoffs. Tighter caps: &lt;a href="https://videocompress.dev/compress-video-to-10mb" rel="noopener noreferrer"&gt;compress video to 10MB&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Long 4K that kills the tab? Move that job to the &lt;a href="https://vidsmaller.com" rel="noopener noreferrer"&gt;exact-size cloud compressor&lt;/a&gt; instead.&lt;/p&gt;

&lt;p&gt;Related: &lt;a href="https://dev.to/videocompress/how-to-compress-a-video-to-10mb-for-discord-in-the-browser-284g"&gt;the Discord (20MB) version of this walkthrough&lt;/a&gt;, and on Medium, &lt;a href="https://medium.com/@videocompress/compress-a-video-in-the-browser-without-uploading-aa86a9338117" rel="noopener noreferrer"&gt;why in-tab compression keeps the file on your device&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>video</category>
      <category>webdev</category>
      <category>productivity</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>How to compress a video to an exact file size (email, WhatsApp, Discord)</title>
      <dc:creator>videocompress</dc:creator>
      <pubDate>Sat, 12 Sep 2026 09:42:56 +0000</pubDate>
      <link>https://dev.to/videocompress/how-to-compress-a-video-to-an-exact-file-size-email-whatsapp-discord-953</link>
      <guid>https://dev.to/videocompress/how-to-compress-a-video-to-an-exact-file-size-email-whatsapp-discord-953</guid>
      <description>&lt;p&gt;A lot of “25MB email limits” actually bounce around 18–20MB once the message wrapper is counted. WhatsApp is often happier near 15–16MB. Discord’s free tier is now 20MB, the same neighborhood.&lt;/p&gt;

&lt;p&gt;If the clip is short and you care about privacy, compress it in the browser. If it is long, 4K, or your laptop fans are already loud, &lt;a href="https://vidsmaller.com" rel="noopener noreferrer"&gt;compress the video to an exact size&lt;/a&gt; in the cloud — type the number, wait for the job.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. Upload the file
&lt;/h2&gt;

&lt;p&gt;Go to &lt;a href="https://vidsmaller.com" rel="noopener noreferrer"&gt;vidsmaller.com&lt;/a&gt;. Drag in MP4, MOV, MKV, WebM, or any of the other 33 formats. Signed-out you get 500MB per file and a handful of &lt;a href="https://vidsmaller.com/pricing" rel="noopener noreferrer"&gt;free credits&lt;/a&gt;. Nothing is watermarked. Uploads are deleted after the job.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fldmluw591l1lv796dfh7.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fldmluw591l1lv796dfh7.png" alt="VidSmaller upload box" width="800" height="410"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Type the size, or tap a preset
&lt;/h2&gt;

&lt;p&gt;Use &lt;strong&gt;Basic&lt;/strong&gt;. Drag &lt;strong&gt;Output file size&lt;/strong&gt;, or tap Email / WhatsApp / Discord / Reddit. Those presets are the usual ceilings so you do not do the arithmetic.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fdhfcywl68k4mrhjdrhy3.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fdhfcywl68k4mrhjdrhy3.png" alt="Output file size slider and Email / WhatsApp / Discord presets" width="800" height="410"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The &lt;a href="https://vidsmaller.com" rel="noopener noreferrer"&gt;cloud video compressor&lt;/a&gt; is two-pass: it aims at the number you asked for, not “about 3× over.” It is still an encode, not a guarantee to the last kilobyte — if a form is strict, aim a megabyte under the published cap (18MB for a 25MB mailbox is the usual move).&lt;/p&gt;

&lt;p&gt;Need more control? &lt;strong&gt;Advanced&lt;/strong&gt; has H.264 vs H.265, CRF, and resolution. H.264 + MP4 is what you want if someone else has to play the file. H.265 is smaller and slower, and older phones may refuse it.&lt;/p&gt;

&lt;h2&gt;
  
  
  3. Download and send
&lt;/h2&gt;

&lt;p&gt;Start compression, wait for the cloud job, download. You can close the tab; the result stays on the link until it expires.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fg845ti2fj03huri7lcvh.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fg845ti2fj03huri7lcvh.png" alt="Compressed file ready to download" width="800" height="410"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If the output is still too big, drop resolution one step (4K → 1080p is usually the largest win) and run it again. Do not jump to H.265 first unless both ends can play it.&lt;/p&gt;

&lt;p&gt;Short clip, and you do not want an upload at all? &lt;a href="https://dev.to/videocompress/how-to-compress-a-video-to-10mb-for-discord-in-the-browser-284g"&gt;Compress a video for Discord's 20MB limit in the browser&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Related on Medium: &lt;a href="https://medium.com/@videocompress/when-the-browser-runs-out-of-memory-cloud-compress-instead-ae5220f4d777" rel="noopener noreferrer"&gt;what to do when the browser runs out of memory&lt;/a&gt; and &lt;a href="https://medium.com/@videocompress/h-264-or-h-265-when-the-file-still-will-not-fit-daf82b2e093e" rel="noopener noreferrer"&gt;choosing between H.264 and H.265 when the file still won't fit&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>tutorial</category>
      <category>ffmpeg</category>
      <category>showdev</category>
    </item>
    <item>
      <title>How to make a photo square without cropping the subject</title>
      <dc:creator>videocompress</dc:creator>
      <pubDate>Sat, 12 Sep 2026 09:40:44 +0000</pubDate>
      <link>https://dev.to/videocompress/how-to-make-a-photo-square-without-cropping-the-subject-3jm6</link>
      <guid>https://dev.to/videocompress/how-to-make-a-photo-square-without-cropping-the-subject-3jm6</guid>
      <description>&lt;p&gt;Instagram, profile photos, and a lot of marketplaces expect a 1:1 image. A wide landscape or a tall portrait gets the sides or the head cut off if you just hit crop.&lt;/p&gt;

&lt;p&gt;You do not have to lose those pixels. &lt;a href="https://squareimage.dev" rel="noopener noreferrer"&gt;Make the image square&lt;/a&gt; by padding it: keep the whole photo in the center, and fill the empty bands with a blur or a solid color.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. Open the tool
&lt;/h2&gt;

&lt;p&gt;Go to &lt;a href="https://squareimage.dev" rel="noopener noreferrer"&gt;squareimage.dev&lt;/a&gt;. No account, no watermark. Drop in a JPEG, PNG, WebP, GIF, or BMP. The file is processed in the browser and is not uploaded.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Ff9zzi2vagyx4w4t4weye.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Ff9zzi2vagyx4w4t4weye.png" alt="Drop a photo into SquareImage" width="799" height="295"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Pick blur or a solid color — not crop
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Blur background&lt;/strong&gt; — best for portraits and landscapes. The full photo stays visible; the empty sides are a blurred copy of the same image. Need more control over scale and blur strength? Use the &lt;a href="https://squareimage.dev/blurredframe/" rel="noopener noreferrer"&gt;blurred frame editor&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Solid color&lt;/strong&gt; — best for products and logos. Same idea, with a flat color instead of a blur.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Resize&lt;/strong&gt; — stretches the picture to 1:1. Only use this when distortion is acceptable (patterns, some graphics).&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Crop 1:1&lt;/strong&gt; — use this last, when the subject already fills the frame and you &lt;em&gt;want&lt;/em&gt; to throw away the edges. That path also lives as a dedicated &lt;a href="https://squareimage.dev/squarecrop/" rel="noopener noreferrer"&gt;square crop&lt;/a&gt;.
Default download is 1200×1200. &lt;a href="https://squareimage.dev/instagram-square-guide.html" rel="noopener noreferrer"&gt;1080×1080 is the usual Instagram square&lt;/a&gt;. JPEG for photos, PNG if you need a lossless file or transparency, WebP if you want a smaller web file.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fssahnj363bvyv9rvkxgs.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fssahnj363bvyv9rvkxgs.png" alt="Export size and download" width="800" height="372"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Download it to your device. Closing the tab clears the session.&lt;/p&gt;

&lt;p&gt;If you later need a tight close-up, run crop on a copy — do not start there on a wide photo you wanted to keep whole. For which pixel size to pick, see the &lt;a href="https://squareimage.dev/square-image-guide-en.html" rel="noopener noreferrer"&gt;1:1 size guide&lt;/a&gt;.&lt;br&gt;
Start with blur. If the subject is a product on a clean background, switch to a matching solid color.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fr66b7rphltygzyrrgs73.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fr66b7rphltygzyrrgs73.png" alt="Wide photo padded to a square with a blur background" width="800" height="312"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Related on Medium: &lt;a href="https://medium.com/@videocompress/linkedin-and-whatsapp-avatars-that-keep-the-whole-face-0f674ae10cd9" rel="noopener noreferrer"&gt;square LinkedIn and WhatsApp avatars that keep the whole face&lt;/a&gt; and &lt;a href="https://medium.com/@videocompress/instagram-1-1-image-without-cutting-off-the-subject-f3d060eec2a9" rel="noopener noreferrer"&gt;an Instagram 1:1 take on the same padding trick&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  3. Export at 1080 or 1200
&lt;/h2&gt;

</description>
      <category>webdev</category>
      <category>tutorial</category>
      <category>design</category>
      <category>showdev</category>
    </item>
    <item>
      <title>How to compress a video for Discord's 20MB limit (in the browser)</title>
      <dc:creator>videocompress</dc:creator>
      <pubDate>Sat, 12 Sep 2026 03:31:30 +0000</pubDate>
      <link>https://dev.to/videocompress/how-to-compress-a-video-to-10mb-for-discord-in-the-browser-284g</link>
      <guid>https://dev.to/videocompress/how-to-compress-a-video-to-10mb-for-discord-in-the-browser-284g</guid>
      <description>&lt;p&gt;Discord's free upload limit is 20MB (it was 10MB until August 2026). A two-minute screen recording or a phone clip is often bigger than that, so the upload fails and you start hunting for an "online compressor."&lt;/p&gt;

&lt;p&gt;Most of those sites upload the file to a server. If the clip is a client call, a game session, or anything you do not want sitting on someone else's disk, that is the wrong tool.&lt;/p&gt;

&lt;p&gt;You can &lt;a href="https://videocompress.dev/compress-mp4-for-discord" rel="noopener noreferrer"&gt;compress a video for Discord&lt;/a&gt; in the browser instead. The file never leaves the tab.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. Open the compressor
&lt;/h2&gt;

&lt;p&gt;Go to &lt;a href="https://videocompress.dev" rel="noopener noreferrer"&gt;videocompress.dev&lt;/a&gt;. There is no account and no watermark. Pick the video (MP4, MOV, WebM, MKV, and other formats your browser can decode). It stays on your machine.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fus1pl7ov4s50ccqbyzty.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fus1pl7ov4s50ccqbyzty.png" alt="The in-browser compressor drop zone on videocompress.dev" width="800" height="410"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Set the target to 20MB
&lt;/h2&gt;

&lt;p&gt;Choose &lt;strong&gt;Target size&lt;/strong&gt; and enter &lt;code&gt;20&lt;/code&gt;. That is the Discord free-tier cap (up from 10MB in August 2026). The &lt;a href="https://videocompress.dev/compress-mp4-for-discord" rel="noopener noreferrer"&gt;Discord MP4 compressor&lt;/a&gt; does the same job with the target already set near 19MB so you slip under the cap. If the clip is a &lt;a href="https://videocompress.dev/compress-screen-recording" rel="noopener noreferrer"&gt;screen recording&lt;/a&gt; with a lot of text, keep the original resolution first. Dropping to 720p only helps when the encode is starving for bits. On a test screen recording I ran back when the cap was 10MB (10.70MB → target 10MB) the output was 5.61MB at the same 1280×720, and the on-page text stayed readable. With 20MB you get twice the budget, so it only gets easier.&lt;/p&gt;

&lt;h2&gt;
  
  
  3. Download the MP4 and send it
&lt;/h2&gt;

&lt;p&gt;Output is MP4 (H.264 + AAC), which Discord plays without a fight. Upload that file in the channel.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fb16wz0z2zi7km6on2t99.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fb16wz0z2zi7km6on2t99.png" alt="Compressed file ready to download" width="800" height="410"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If it is still too big: set resolution to 720p and run it again. If your phone runs out of memory on a long 4K clip, use a desktop — there is no server quota, but there is a device-memory quota.&lt;/p&gt;

&lt;p&gt;For why a target works (and when it goes soft), see the &lt;a href="https://videocompress.dev/video-compression-guide" rel="noopener noreferrer"&gt;video compression guide&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  What this does not do
&lt;/h2&gt;

&lt;p&gt;It does not upload the video. It does not promise a specific look at 20MB on every source. A 45-second noisy 1080p clip will look softer than a talking-head clip of the same size. Judge the preview before you send.&lt;/p&gt;

&lt;p&gt;Need a hard cap on a file that is too large for the browser tab? &lt;a href="https://dev.to/videocompress/how-to-compress-a-video-to-an-exact-file-size-email-whatsapp-discord-953"&gt;Compress the video to an exact file size&lt;/a&gt; in the cloud instead.&lt;/p&gt;

&lt;p&gt;The tool picks a bitrate from the duration and leaves a safety margin, so the download usually lands &lt;em&gt;under&lt;/em&gt; your target rather than slightly over.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F1sa6n2p3w8tblq0njs0m.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F1sa6n2p3w8tblq0njs0m.png" alt="Target size set to 10MB (from the original run, now type 20 for Discord)" width="800" height="410"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Related on Medium: &lt;a href="https://medium.com/@videocompress/the-25mb-email-limit-is-smaller-than-it-looks-fitting-a-video-under-it-without-uploading-it-b301e2a0734d" rel="noopener noreferrer"&gt;getting a clip under the 25MB email limit&lt;/a&gt; and &lt;a href="https://medium.com/@videocompress/compress-a-video-in-the-browser-without-uploading-aa86a9338117" rel="noopener noreferrer"&gt;compressing a video without uploading it&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>tutorial</category>
      <category>ffmpeg</category>
      <category>showdev</category>
    </item>
  </channel>
</rss>
