<?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: Muhaymin Bin Mehmood</title>
    <description>The latest articles on DEV Community by Muhaymin Bin Mehmood (@muhayminbinmehmood).</description>
    <link>https://dev.to/muhayminbinmehmood</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.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F862113%2F5a178d20-456e-4b81-84be-62a8f2a2f0d3.jpg</url>
      <title>DEV Community: Muhaymin Bin Mehmood</title>
      <link>https://dev.to/muhayminbinmehmood</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/muhayminbinmehmood"/>
    <language>en</language>
    <item>
      <title>BatchSet is Live on Product Hunt 🚀 — 30% Off for the DEV Community (Code: PRODUCTHUNT)</title>
      <dc:creator>Muhaymin Bin Mehmood</dc:creator>
      <pubDate>Mon, 08 Jun 2026 12:35:36 +0000</pubDate>
      <link>https://dev.to/muhayminbinmehmood/batchset-is-live-on-product-hunt-30-off-for-the-dev-community-code-producthunt-jia</link>
      <guid>https://dev.to/muhayminbinmehmood/batchset-is-live-on-product-hunt-30-off-for-the-dev-community-code-producthunt-jia</guid>
      <description>&lt;p&gt;Hey DEV! 👋 I'm &lt;strong&gt;Muhaymin&lt;/strong&gt;, a solo full-stack developer from Pakistan. After months of building, &lt;strong&gt;&lt;a href="https://batchset.com" rel="noopener noreferrer"&gt;BatchSet&lt;/a&gt;&lt;/strong&gt; is now live on Product Hunt — and I'm giving this community an exclusive 30% off (code at the bottom 👇).&lt;/p&gt;




&lt;h2&gt;
  
  
  😤 The Problem I Built It For
&lt;/h2&gt;

&lt;p&gt;Every "online image converter" I tried had the same flaws: a 10-file limit, a watermark, or it forced me to upload 500 product photos to some random server and wait.&lt;/p&gt;

&lt;p&gt;For Shopify and Daraz sellers managing big catalogs, that's a daily bottleneck.&lt;/p&gt;

&lt;p&gt;So I built BatchSet — &lt;strong&gt;basic conversion runs 100% in your browser&lt;/strong&gt;. No upload, no signup, no watermark. Your files never leave your device.&lt;/p&gt;




&lt;h2&gt;
  
  
  🛠️ What's Inside
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Free forever — no signup needed:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;🖼️ &lt;strong&gt;Bulk Image Converter&lt;/strong&gt; — WebP / JPG / PNG, hundreds of images at once, fully client-side&lt;/li&gt;
&lt;li&gt;📐 &lt;strong&gt;Social Media Resizer&lt;/strong&gt; — perfect dimensions for Instagram, Facebook, LinkedIn, TikTok, YouTube &amp;amp; more&lt;/li&gt;
&lt;li&gt;🔳 &lt;strong&gt;QR &amp;amp; Barcode Generator&lt;/strong&gt; — generate and download instantly&lt;/li&gt;
&lt;li&gt;📑 &lt;strong&gt;Excel / CSV Batch Mode&lt;/strong&gt; — paste product image URLs from a sheet, convert the whole catalog&lt;/li&gt;
&lt;li&gt;📄 &lt;strong&gt;PDF ↔ Image&lt;/strong&gt; — images to PDF and back&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Unlocked on Pro &amp;amp; Enterprise:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;HEIC &amp;amp; TIFF conversion&lt;/li&gt;
&lt;li&gt;Watermarking, metadata removal &amp;amp; target file size&lt;/li&gt;
&lt;li&gt;Dynamic QR codes + scan analytics&lt;/li&gt;
&lt;li&gt;Bulk HEIC + ZIP download&lt;/li&gt;
&lt;li&gt;Priority processing &amp;amp; file backup&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  💳 Plans
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Feature&lt;/th&gt;
&lt;th&gt;Free&lt;/th&gt;
&lt;th&gt;Pro&lt;/th&gt;
&lt;th&gt;Enterprise&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Basic convert (WebP/JPG/PNG)&lt;/td&gt;
&lt;td&gt;✅&lt;/td&gt;
&lt;td&gt;✅&lt;/td&gt;
&lt;td&gt;✅&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Monthly credits&lt;/td&gt;
&lt;td&gt;100&lt;/td&gt;
&lt;td&gt;5,000&lt;/td&gt;
&lt;td&gt;20,000&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Max file size&lt;/td&gt;
&lt;td&gt;25 MB&lt;/td&gt;
&lt;td&gt;100 MB&lt;/td&gt;
&lt;td&gt;500 MB&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Bulk + Excel/CSV&lt;/td&gt;
&lt;td&gt;✅&lt;/td&gt;
&lt;td&gt;✅&lt;/td&gt;
&lt;td&gt;✅&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Social resizer + QR/barcode + PDF&lt;/td&gt;
&lt;td&gt;✅&lt;/td&gt;
&lt;td&gt;✅&lt;/td&gt;
&lt;td&gt;✅&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;HEIC / TIFF conversion&lt;/td&gt;
&lt;td&gt;Credits&lt;/td&gt;
&lt;td&gt;✅&lt;/td&gt;
&lt;td&gt;✅&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Watermark + metadata removal + target size&lt;/td&gt;
&lt;td&gt;❌&lt;/td&gt;
&lt;td&gt;✅&lt;/td&gt;
&lt;td&gt;✅&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Dynamic QR + analytics&lt;/td&gt;
&lt;td&gt;❌&lt;/td&gt;
&lt;td&gt;✅&lt;/td&gt;
&lt;td&gt;✅&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Priority processing&lt;/td&gt;
&lt;td&gt;❌&lt;/td&gt;
&lt;td&gt;✅&lt;/td&gt;
&lt;td&gt;✅&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;File backup&lt;/td&gt;
&lt;td&gt;None&lt;/td&gt;
&lt;td&gt;15 days&lt;/td&gt;
&lt;td&gt;30 days&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Price&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;$0&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;$19.99/mo&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;$59.99/mo&lt;/strong&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;blockquote&gt;
&lt;p&gt;💡 Credits only apply to HEIC/TIFF and advanced features (1 credit/image). Basic conversion never uses credits. You can buy one-time &lt;strong&gt;credit packs on any plan — even Free — and they never expire.&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Yearly billing saves 17% (Pro $199.99/yr, Enterprise $599.99/yr).&lt;/p&gt;




&lt;h2&gt;
  
  
  🎉 30% Off — Exclusive Product Hunt Launch Offer
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;h3&gt;
  
  
  🏷️ Use code &lt;code&gt;PRODUCTHUNT&lt;/code&gt; at checkout
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;30% off Pro &amp;amp; Enterprise monthly plans:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Pro: &lt;del&gt;$19.99&lt;/del&gt; → &lt;strong&gt;$13.99/mo&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;Enterprise: &lt;del&gt;$59.99&lt;/del&gt; → &lt;strong&gt;$41.99/mo&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;⏳ Ends &lt;strong&gt;August 31, 2026&lt;/strong&gt; · No card needed to start on Free&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;👉 &lt;strong&gt;&lt;a href="https://batchset.com/pricing" rel="noopener noreferrer"&gt;Claim it at batchset.com/pricing&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;




&lt;p&gt;Built with Next.js 14, Supabase, AWS S3 and Paddle. If you run an online store or just hate uploading files to sketchy converters, give it a try — and drop honest feedback (even the harsh kind) in the comments. 🙏&lt;/p&gt;

</description>
      <category>showdev</category>
      <category>webdev</category>
      <category>ecommerce</category>
      <category>productivity</category>
    </item>
    <item>
      <title>A Practical Bulk Image Optimization Tool for Developers &amp; E-commerce Teams: My Take on BatchSet.com</title>
      <dc:creator>Muhaymin Bin Mehmood</dc:creator>
      <pubDate>Fri, 05 Jun 2026 12:02:27 +0000</pubDate>
      <link>https://dev.to/muhayminbinmehmood/a-practical-bulk-image-optimization-tool-for-developers-e-commerce-teams-my-take-on-batchsetcom-4bmn</link>
      <guid>https://dev.to/muhayminbinmehmood/a-practical-bulk-image-optimization-tool-for-developers-e-commerce-teams-my-take-on-batchsetcom-4bmn</guid>
      <description>&lt;p&gt;As web developers and technical founders, we all know the pain: product catalogs with hundreds (or thousands) of heavy JPGs and PNGs killing page speed, Core Web Vitals scores, and ultimately SEO and conversion rates. &lt;/p&gt;

&lt;p&gt;While tools like Squoosh, ImageOptim, or custom scripts work great for small jobs, they quickly become painful when you need to process large batches, handle Excel exports from Shopify/Daraz, or generate platform-specific sizes on the fly.&lt;/p&gt;

&lt;p&gt;I recently tried &lt;strong&gt;&lt;a href="https://batchset.com" rel="noopener noreferrer"&gt;BatchSet.com&lt;/a&gt;&lt;/strong&gt; and found it to be a refreshingly straightforward all-in-one solution for these exact problems.&lt;/p&gt;

&lt;h3&gt;
  
  
  What stands out technically:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Strong bulk WebP conversion&lt;/strong&gt; — It handles 500+ images smoothly with good compression (they claim 60-80% reduction). The browser-first processing is nice for privacy and speed on smaller batches.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Excel/URL batch mode&lt;/strong&gt; — Super useful for e-commerce. You can export your product images from Shopify, paste the URLs, and get optimized versions back — no manual downloading/uploading hell.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Social Media Resizer&lt;/strong&gt; with 28 presets — Saves a ton of time when creating assets for Instagram, LinkedIn, TikTok, etc.&lt;/li&gt;
&lt;li&gt;Bonus tools in the same dashboard: QR code generator (with analytics), URL shortener, barcode generator, and PDF ↔ Image conversion.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The interface is clean and purpose-built rather than overly design-heavy. The &lt;strong&gt;free tier&lt;/strong&gt; is actually usable (unlimited basic conversions without signup), which is rare these days. Pro plans unlock HEIC/TIFF support, larger file sizes, priority processing, and more credits.&lt;/p&gt;

&lt;h3&gt;
  
  
  Room for growth:
&lt;/h3&gt;

&lt;p&gt;Being a relatively new tool, it’s still maturing. Advanced automation (API access), more granular compression controls, and deeper integrations (e.g., direct Shopify app) would make it even stronger for developer workflows.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Overall verdict&lt;/strong&gt;: If you’re a solo developer, indie hacker, or part of an e-commerce team that regularly fights with image optimization, BatchSet is worth adding to your toolkit. It’s not trying to be everything (like a full asset CDN), but it solves the “bulk optimize and resize fast” problem very effectively.&lt;/p&gt;




&lt;p&gt;&lt;strong&gt;&lt;a href="https://batchset.com" rel="noopener noreferrer"&gt;Try BatchSet.com →&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>ecommerce</category>
      <category>productivity</category>
      <category>unsplash</category>
    </item>
    <item>
      <title>How I made bulk image conversion run 100% in the browser (no server, no upload)</title>
      <dc:creator>Muhaymin Bin Mehmood</dc:creator>
      <pubDate>Thu, 04 Jun 2026 07:51:57 +0000</pubDate>
      <link>https://dev.to/muhayminbinmehmood/how-i-made-bulk-image-conversion-run-100-in-the-browser-no-server-no-upload-aoi</link>
      <guid>https://dev.to/muhayminbinmehmood/how-i-made-bulk-image-conversion-run-100-in-the-browser-no-server-no-upload-aoi</guid>
      <description>&lt;p&gt;Most "image converter" sites upload your files to a server, convert them, and send them back. That means upload time, server cost, and a privacy question: where did my images go?&lt;/p&gt;

&lt;p&gt;While building &lt;a href="https://batchset.com" rel="noopener noreferrer"&gt;BatchSet&lt;/a&gt; (an image toolkit for e-commerce sellers), I wanted basic conversion — JPG/PNG → WebP — to be free and instant. The only way that math works at scale is to &lt;strong&gt;never touch a server&lt;/strong&gt;. Do it all in the browser.&lt;/p&gt;

&lt;p&gt;Here's how, and the gotcha that actually made it fast.&lt;/p&gt;

&lt;h2&gt;
  
  
  The naive version
&lt;/h2&gt;

&lt;p&gt;The modern browser already ships everything you need: &lt;code&gt;createImageBitmap&lt;/code&gt; + &lt;code&gt;OffscreenCanvas&lt;/code&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;convert&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;file&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;type&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;image/webp&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;quality&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mf"&gt;0.8&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;bitmap&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nf"&gt;createImageBitmap&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;file&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;canvas&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;OffscreenCanvas&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;bitmap&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;width&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;bitmap&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;height&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;ctx&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;canvas&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getContext&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;2d&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
  &lt;span class="nx"&gt;ctx&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;drawImage&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;bitmap&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;canvas&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;convertToBlob&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="nx"&gt;type&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;quality&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;That's a full JPG→WebP conversion, client-side, zero network. &lt;/p&gt;

&lt;h2&gt;
  
  
  The problem: 200 images freezes the tab
&lt;/h2&gt;

&lt;p&gt;E-commerce sellers don't convert one image — they convert their whole catalog. Run the loop above over 200 files and the main thread locks up. The UI freezes, the tab goes white, users bail.&lt;/p&gt;

&lt;p&gt;The fix: move the work &lt;strong&gt;off the main thread&lt;/strong&gt; with Web Workers — and run a &lt;em&gt;pool&lt;/em&gt; of them so you actually use every CPU core.&lt;/p&gt;

&lt;h2&gt;
  
  
  A tiny worker pool
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// worker.js&lt;/span&gt;
&lt;span class="nb"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;onmessage&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;async &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;id&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;file&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;type&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;quality&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;bitmap&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nf"&gt;createImageBitmap&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;file&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;canvas&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;OffscreenCanvas&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;bitmap&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;width&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;bitmap&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;height&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
  &lt;span class="nx"&gt;canvas&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getContext&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;2d&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;drawImage&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;bitmap&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;blob&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;canvas&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;convertToBlob&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="nx"&gt;type&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;quality&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt;
  &lt;span class="nb"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;postMessage&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="nx"&gt;id&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;blob&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// pool.js — spin up one worker per core, capped&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;SIZE&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;Math&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;min&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nb"&gt;navigator&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;hardwareConcurrency&lt;/span&gt; &lt;span class="o"&gt;||&lt;/span&gt; &lt;span class="mi"&gt;4&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;8&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;workers&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;Array&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="k"&gt;from&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;length&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;SIZE&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Worker&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;worker.js&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;runPool&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;files&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;opts&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Promise&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;resolve&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;out&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[]&lt;/span&gt;
    &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;next&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;done&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;

    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;feed&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;w&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;next&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;=&lt;/span&gt; &lt;span class="nx"&gt;files&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;return&lt;/span&gt;
      &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;id&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;next&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;
      &lt;span class="nx"&gt;w&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;onmessage&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nx"&gt;out&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;id&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;blob&lt;/span&gt;
        &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="nx"&gt;done&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="nx"&gt;files&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="nf"&gt;resolve&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;out&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
        &lt;span class="k"&gt;else&lt;/span&gt; &lt;span class="nf"&gt;feed&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;w&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// worker grabs the next job&lt;/span&gt;
      &lt;span class="p"&gt;}&lt;/span&gt;
      &lt;span class="nx"&gt;w&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;postMessage&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="nx"&gt;id&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;file&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;files&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;id&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt; &lt;span class="p"&gt;...&lt;/span&gt;&lt;span class="nx"&gt;opts&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;

    &lt;span class="nx"&gt;workers&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;forEach&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;feed&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
  &lt;span class="p"&gt;})&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now 200 images convert in parallel across all cores instead of choking one thread.&lt;/p&gt;

&lt;h2&gt;
  
  
  The gotcha that doubled my speed
&lt;/h2&gt;

&lt;p&gt;My first version re-rendered a React card for &lt;strong&gt;every&lt;/strong&gt; file on &lt;strong&gt;every&lt;/strong&gt; progress tick. With 200 files finishing nearly at once, that's thousands of renders — the conversion was fast but the UI made it &lt;em&gt;feel&lt;/em&gt; slow.&lt;/p&gt;

&lt;p&gt;Two fixes:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Batch state updates&lt;/strong&gt; — collect finished blobs and flush to state every ~150ms instead of per-file.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;React.memo&lt;/code&gt; the cards&lt;/strong&gt; so a finished file doesn't re-render the other 199.
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;FileCard&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;memo&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;FileCard&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="nx"&gt;file&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="c1"&gt;// ...&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;That alone took a 200-image batch from "janky" to "instant."&lt;/p&gt;

&lt;h2&gt;
  
  
  What you get
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;No upload&lt;/strong&gt; — files never leave the device (great for privacy + zero server cost).&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Parallel&lt;/strong&gt; — uses every core via the worker pool.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Free to run&lt;/strong&gt; — it's the user's CPU, not yours.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The catch: formats like HEIC/TIFF aren't natively decodable in-browser, so those still need a server (I route only those through one). But for the 90% case — JPG/PNG/WebP — the browser does it all.&lt;/p&gt;

&lt;p&gt;If you want to see it in action, the bulk converter on &lt;a href="https://batchset.com/tools/bulk-image-converter" rel="noopener noreferrer"&gt;BatchSet&lt;/a&gt; runs exactly this. Drop in a folder of product images and watch your cores light up.&lt;/p&gt;

&lt;p&gt;What's your take — are we underusing &lt;code&gt;OffscreenCanvas&lt;/code&gt; + Workers for this kind of work? 👇&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>performance</category>
      <category>react</category>
    </item>
    <item>
      <title>The All-in-One Image &amp; Marketing Toolkit for Online Sellers</title>
      <dc:creator>Muhaymin Bin Mehmood</dc:creator>
      <pubDate>Mon, 25 May 2026 10:38:02 +0000</pubDate>
      <link>https://dev.to/muhayminbinmehmood/the-all-in-one-image-marketing-toolkit-for-online-sellers-4o6i</link>
      <guid>https://dev.to/muhayminbinmehmood/the-all-in-one-image-marketing-toolkit-for-online-sellers-4o6i</guid>
      <description>&lt;div class="ltag__link--embedded"&gt;
  &lt;div class="crayons-story "&gt;
  &lt;a href="https://dev.to/muhayminbinmehmood/webp-in-2026-how-to-convert-your-entire-sites-images-for-60-80-smaller-file-sizes-iaa" class="crayons-story__hidden-navigation-link"&gt;WebP in 2026: How to Convert Your Entire Site's Images for 60–80% Smaller File Sizes&lt;/a&gt;


  &lt;div class="crayons-story__body crayons-story__body-full_post"&gt;
    &lt;div class="crayons-story__top"&gt;
      &lt;div class="crayons-story__meta"&gt;
        &lt;div class="crayons-story__author-pic"&gt;

          &lt;a href="/muhayminbinmehmood" class="crayons-avatar  crayons-avatar--l  "&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.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F862113%2F5a178d20-456e-4b81-84be-62a8f2a2f0d3.jpg" alt="muhayminbinmehmood profile" class="crayons-avatar__image"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;div&gt;
            &lt;a href="/muhayminbinmehmood" class="crayons-story__secondary fw-medium m:hidden"&gt;
              Muhaymin Bin Mehmood
            &lt;/a&gt;
            &lt;div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"&gt;
              
                Muhaymin Bin Mehmood
                
              
              &lt;div id="story-author-preview-content-3726296" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0"&gt;
                &lt;div class="gap-4 grid"&gt;
                  &lt;div class="-mt-4"&gt;
                    &lt;a href="/muhayminbinmehmood" class="flex"&gt;
                      &lt;span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"&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.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F862113%2F5a178d20-456e-4b81-84be-62a8f2a2f0d3.jpg" class="crayons-avatar__image" alt=""&gt;
                      &lt;/span&gt;
                      &lt;span class="crayons-link crayons-subtitle-2 mt-5"&gt;Muhaymin Bin Mehmood&lt;/span&gt;
                    &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="print-hidden"&gt;
                    
                      Follow
                    
                  &lt;/div&gt;
                  &lt;div class="author-preview-metadata-container"&gt;&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;

          &lt;/div&gt;
          &lt;a href="https://dev.to/muhayminbinmehmood/webp-in-2026-how-to-convert-your-entire-sites-images-for-60-80-smaller-file-sizes-iaa" class="crayons-story__tertiary fs-xs"&gt;&lt;time&gt;May 22&lt;/time&gt;&lt;span class="time-ago-indicator-initial-placeholder"&gt;&lt;/span&gt;&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;

    &lt;/div&gt;

    &lt;div class="crayons-story__indention"&gt;
      &lt;h2 class="crayons-story__title crayons-story__title-full_post"&gt;
        &lt;a href="https://dev.to/muhayminbinmehmood/webp-in-2026-how-to-convert-your-entire-sites-images-for-60-80-smaller-file-sizes-iaa" id="article-link-3726296"&gt;
          WebP in 2026: How to Convert Your Entire Site's Images for 60–80% Smaller File Sizes
        &lt;/a&gt;
      &lt;/h2&gt;
        &lt;div class="crayons-story__tags"&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/seo"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;seo&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/webdev"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;webdev&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/imageoptimization"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;imageoptimization&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/webperf"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;webperf&lt;/a&gt;
        &lt;/div&gt;
      &lt;div class="crayons-story__bottom"&gt;
        &lt;div class="crayons-story__details"&gt;
          &lt;a href="https://dev.to/muhayminbinmehmood/webp-in-2026-how-to-convert-your-entire-sites-images-for-60-80-smaller-file-sizes-iaa" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left"&gt;
            &lt;div class="multiple_reactions_aggregate"&gt;
              &lt;span class="multiple_reactions_icons_container"&gt;
                  &lt;span class="crayons_icon_container"&gt;
                    &lt;img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18"&gt;
                  &lt;/span&gt;
              &lt;/span&gt;
              &lt;span class="aggregate_reactions_counter"&gt;6&lt;span class="hidden s:inline"&gt;&amp;nbsp;reactions&lt;/span&gt;&lt;/span&gt;
            &lt;/div&gt;
          &lt;/a&gt;
            &lt;a href="https://dev.to/muhayminbinmehmood/webp-in-2026-how-to-convert-your-entire-sites-images-for-60-80-smaller-file-sizes-iaa#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center"&gt;
              

              1&lt;span class="hidden s:inline"&gt;&amp;nbsp;comment&lt;/span&gt;
            &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="crayons-story__save"&gt;
          &lt;small class="crayons-story__tertiary fs-xs mr-2"&gt;
            5 min read
          &lt;/small&gt;
            
              &lt;span class="bm-initial crayons-icon c-btn__icon"&gt;
                

              &lt;/span&gt;
              &lt;span class="bm-success crayons-icon c-btn__icon"&gt;
                

              &lt;/span&gt;
            
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;/div&gt;


</description>
      <category>marketing</category>
      <category>performance</category>
      <category>tooling</category>
      <category>webdev</category>
    </item>
    <item>
      <title>WebP in 2026: How to Convert Your Entire Site's Images for 60–80% Smaller File Sizes</title>
      <dc:creator>Muhaymin Bin Mehmood</dc:creator>
      <pubDate>Fri, 22 May 2026 14:11:47 +0000</pubDate>
      <link>https://dev.to/muhayminbinmehmood/webp-in-2026-how-to-convert-your-entire-sites-images-for-60-80-smaller-file-sizes-iaa</link>
      <guid>https://dev.to/muhayminbinmehmood/webp-in-2026-how-to-convert-your-entire-sites-images-for-60-80-smaller-file-sizes-iaa</guid>
      <description>&lt;p&gt;If you manage a website with 100+ images — whether it's e-commerce, a blog, or a portfolio — you've probably noticed one thing: images are heavy. Really heavy.&lt;/p&gt;

&lt;p&gt;In 2026, Google's Core Web Vitals are non-negotiable ranking signals. And the #1 bottleneck? Image file size.&lt;/p&gt;

&lt;p&gt;I'm going to walk you through exactly how to convert your entire image library to WebP, measure the impact on your site speed, and understand why this single optimization can move your rankings.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Problem: Your Images Are Killing Your Site Speed
&lt;/h2&gt;

&lt;p&gt;Let me give you real numbers:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Before optimization:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;JPG product image: 2.4 MB&lt;/li&gt;
&lt;li&gt;PNG hero banner: 4.1 MB&lt;/li&gt;
&lt;li&gt;Thumbnail: 890 KB&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Total: 7.29 MB for just 3 images.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;On a typical e-commerce site with 500 product images, that's &lt;strong&gt;1.8 GB of image data&lt;/strong&gt; being served to every visitor.&lt;/p&gt;

&lt;p&gt;Now measure it in Core Web Vitals:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;LCP (Largest Contentful Paint):&lt;/strong&gt; 4.8 seconds (bad — should be &amp;lt;2.5s)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;CLS (Cumulative Layout Shift):&lt;/strong&gt; 0.24 (bad — should be &amp;lt;0.1)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Page weight:&lt;/strong&gt; 8.2 MB (slow for mobile)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Google sees this and ranks you lower. Simple as that.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Solution: WebP Format
&lt;/h2&gt;

&lt;p&gt;WebP is Google's next-generation image format. It's been around since 2010, but adoption has exploded in 2026 because browser support finally reached 99%+.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The magic number:&lt;/strong&gt; WebP delivers the same visual quality as JPG/PNG but at &lt;strong&gt;60–80% smaller file sizes.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;After converting to WebP:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;JPG (2.4 MB) → WebP (180 KB) &lt;strong&gt;−92.5%&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;PNG (4.1 MB) → WebP (310 KB) &lt;strong&gt;−92.7%&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;Thumbnail (890 KB) → WebP (67 KB) &lt;strong&gt;−92.5%&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Total: 7.29 MB → 557 KB&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Same images. Same visual quality. 13x smaller.&lt;/p&gt;

&lt;h2&gt;
  
  
  The SEO Impact
&lt;/h2&gt;

&lt;p&gt;When you reduce image file size, you directly improve Core Web Vitals:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;LCP drops from 4.8s to 1.9s&lt;/strong&gt; (now "Good" instead of "Poor")&lt;br&gt;
&lt;strong&gt;CLS improves to 0.05&lt;/strong&gt; (from 0.24 — massive improvement)&lt;br&gt;
&lt;strong&gt;Page weight: 8.2 MB → 1.4 MB&lt;/strong&gt; (83% reduction)&lt;/p&gt;

&lt;p&gt;Google's algorithm notices this. Sites with good Core Web Vitals get a ranking boost in search results. You're literally competing for the same keywords as sites still using JPG.&lt;/p&gt;
&lt;h2&gt;
  
  
  How to Convert Your Images: Step-by-Step
&lt;/h2&gt;
&lt;h3&gt;
  
  
  Option 1: Bulk Convert Offline (for developers)
&lt;/h3&gt;

&lt;p&gt;If you have hundreds of images and want to convert them all at once:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="c"&gt;# Install ImageMagick (macOS)&lt;/span&gt;
brew &lt;span class="nb"&gt;install &lt;/span&gt;imagemagick

&lt;span class="c"&gt;# Convert all JPGs in a directory to WebP&lt;/span&gt;
&lt;span class="k"&gt;for &lt;/span&gt;file &lt;span class="k"&gt;in&lt;/span&gt; &lt;span class="k"&gt;*&lt;/span&gt;.jpg&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="k"&gt;do
  &lt;/span&gt;convert &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="nv"&gt;$file&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt; &lt;span class="nt"&gt;-quality&lt;/span&gt; 80 &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="k"&gt;${&lt;/span&gt;&lt;span class="nv"&gt;file&lt;/span&gt;&lt;span class="p"&gt;%.jpg&lt;/span&gt;&lt;span class="k"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;.webp"&lt;/span&gt;
&lt;span class="k"&gt;done&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This takes seconds and reduces file size dramatically.&lt;/p&gt;

&lt;h3&gt;
  
  
  Option 2: Browser-Based Bulk Converter (Recommended for non-developers)
&lt;/h3&gt;

&lt;p&gt;If you're managing a spreadsheet of image URLs or need to batch-process files without technical setup, this is the fastest approach:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Go to &lt;a href="https://batchset.com" rel="noopener noreferrer"&gt;&lt;strong&gt;BatchSet&lt;/strong&gt;&lt;/a&gt; (an all-in-one image toolkit)&lt;/li&gt;
&lt;li&gt;Paste 100+ image URLs into the bulk converter (or upload files directly)&lt;/li&gt;
&lt;li&gt;Select WebP as output format&lt;/li&gt;
&lt;li&gt;Download all converted files as a ZIP&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;This is the approach most e-commerce managers and marketing teams use because there's zero technical friction. You can convert a 500-image product catalog in under 5 minutes.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Why BatchSet works well for this:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Bulk convert up to 1,000 images at once&lt;/li&gt;
&lt;li&gt;No credit card required (free tier: 30 credits/month)&lt;/li&gt;
&lt;li&gt;Works directly with image URLs from spreadsheets (paste URLs, get WebP files back)&lt;/li&gt;
&lt;li&gt;Resize images to exact dimensions at the same time (helpful for Shopify, WooCommerce, etc.)&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Option 3: WordPress Plugin (if you use WP)
&lt;/h3&gt;

&lt;p&gt;If you're using WordPress, install a plugin like TinyPNG, Imagify, or ShortPixel → Settings → enable WebP conversion → Auto-convert on upload&lt;/p&gt;

&lt;p&gt;From that point forward, every new image automatically converts to WebP. Or if you prefer a no-code approach, use &lt;a href="https://batchset.com" rel="noopener noreferrer"&gt;&lt;strong&gt;BatchSet&lt;/strong&gt;&lt;/a&gt; to bulk convert your existing image library, then use a WordPress plugin for new uploads going forward.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Real-World Test: Shopify Store
&lt;/h2&gt;

&lt;p&gt;Let me show you what this looks like on an actual e-commerce store:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Store:&lt;/strong&gt; 500 product images, average 2.2 MB each (JPG)&lt;br&gt;
&lt;strong&gt;Before:&lt;/strong&gt; Total image weight = 1.1 GB&lt;br&gt;
&lt;strong&gt;After WebP:&lt;/strong&gt; Total image weight = 110 MB&lt;br&gt;
&lt;strong&gt;Page speed:&lt;/strong&gt; 3.2s → 0.8s load time&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Result:&lt;/strong&gt; Google Search Console reported +47% traffic increase within 60 days. Same content, same keywords, same backlinks. Only change: image optimization.&lt;/p&gt;

&lt;p&gt;If you're running a Shopify or Daraz store, this is the single highest-ROI optimization you can do. Use &lt;a href="https://batchset.com/for/ecommerce" rel="noopener noreferrer"&gt;&lt;strong&gt;BatchSet&lt;/strong&gt;&lt;/a&gt; to bulk convert your product catalog and resize for the exact platform dimensions in one go — it saves hours of manual work.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why This Matters in 2026
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Mobile-first indexing is mandatory&lt;/strong&gt; — Google crawls the mobile version first. Large images destroy mobile performance.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;AI search rewards fast sites&lt;/strong&gt; — ChatGPT, Perplexity, and other LLM-based search systems prioritize fast, responsive pages in their recommendations.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Conversion rate improves&lt;/strong&gt; — Every 1-second delay in page load = 7% conversion drop (ecommerce benchmark). WebP conversion literally increases your sales.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Backlink equity matters less without speed&lt;/strong&gt; — Even if you have DA 80 backlinks, a slow site won't rank. Speed and relevance are prerequisites.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Gotchas &amp;amp; Things to Know
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Browser support:&lt;/strong&gt; WebP now works on 99.5% of browsers. But if you need to support ancient IE11, keep JPG as fallback.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Quality settings:&lt;/strong&gt; WebP quality 75–80 looks identical to JPG quality 90. Don't overthink it.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Animated images:&lt;/strong&gt; WebP supports animation better than GIF and is much smaller. If you use animated product shots, WebP is a huge win.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Conversion cost:&lt;/strong&gt; Unless you're using a premium service, bulk WebP conversion is free or under $20/month.&lt;/p&gt;

&lt;h2&gt;
  
  
  Next Steps
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Audit your current images:&lt;/strong&gt; Right-click → inspect → check file sizes&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Set a target:&lt;/strong&gt; Aim to reduce total image weight by 70%&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Batch convert:&lt;/strong&gt; Use a tool (browser-based, command line, or WordPress plugin)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Monitor impact:&lt;/strong&gt; Check Core Web Vitals in Google Search Console after 2–4 weeks&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Track rankings:&lt;/strong&gt; Your keywords should climb as page speed improves&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;If you have 100+ images to convert, &lt;a href="https://batchset.com" rel="noopener noreferrer"&gt;&lt;strong&gt;try BatchSet free&lt;/strong&gt;&lt;/a&gt; — 30 credits/month means you can convert your entire product catalog without paying anything.&lt;/p&gt;

&lt;h2&gt;
  
  
  Final Word
&lt;/h2&gt;

&lt;p&gt;Image optimization is unsexy. It's not a viral marketing hack or a growth hack. But it's one of the few things you can do today that will directly improve your Google rankings and your conversion rates tomorrow.&lt;/p&gt;

&lt;p&gt;If you're managing an e-commerce site, a marketing blog, or any content-heavy website, WebP conversion is not optional in 2026. It's table stakes.&lt;/p&gt;

&lt;p&gt;The sooner you convert, the sooner Google starts ranking you higher.&lt;/p&gt;




&lt;h2&gt;
  
  
  Questions &amp;amp; Feedback
&lt;/h2&gt;

&lt;p&gt;Drop them in the comments below. I'm tracking WebP adoption trends and would love to hear about your conversion experience.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;What's your biggest bottleneck with image optimization?&lt;/li&gt;
&lt;li&gt;Are you converting to WebP already?&lt;/li&gt;
&lt;li&gt;What tool are you using (or would like to try)?&lt;/li&gt;
&lt;/ul&gt;




&lt;p&gt;&lt;strong&gt;Tags:&lt;/strong&gt; #seo #webperformance #webdev #imageoptimization #shopify #ecommerce #corewebvitals&lt;/p&gt;

</description>
      <category>seo</category>
      <category>webdev</category>
      <category>imageoptimization</category>
      <category>webperf</category>
    </item>
    <item>
      <title>Introducing BatchSet: An all-in-one image and marketing toolkit</title>
      <dc:creator>Muhaymin Bin Mehmood</dc:creator>
      <pubDate>Wed, 20 May 2026 11:06:36 +0000</pubDate>
      <link>https://dev.to/muhayminbinmehmood/introducing-batchset-an-all-in-one-image-and-marketing-toolkit-37do</link>
      <guid>https://dev.to/muhayminbinmehmood/introducing-batchset-an-all-in-one-image-and-marketing-toolkit-37do</guid>
      <description>&lt;h2&gt;
  
  
  Why BatchSet?
&lt;/h2&gt;

&lt;p&gt;Modern teams shouldn’t need five different subscriptions just to manage images, links, and marketing assets. We built &lt;strong&gt;BatchSet&lt;/strong&gt; to bring these workflows into a single, fast cloud-processing dashboard.&lt;/p&gt;

&lt;h2&gt;
  
  
  Core Features
&lt;/h2&gt;

&lt;h3&gt;
  
  
  🟦 Image &amp;amp; PDF Processing
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;  &lt;strong&gt;Bulk Converter:&lt;/strong&gt; Process 100+ files (JPG, PNG, WebP, AVIF, PDF) at once.&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;Excel Batch:&lt;/strong&gt; Convert images directly from spreadsheet URLs.&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;Social Resizer:&lt;/strong&gt; 28 preset sizes for all major platforms.&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;PDF ↔ Image:&lt;/strong&gt; High-quality conversion in both directions.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  🟦 Marketing &amp;amp; Tracking Tools
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;  &lt;strong&gt;QR Code Generator:&lt;/strong&gt; Create static and dynamic codes with built-in analytics.&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;URL Shortener:&lt;/strong&gt; Includes click tracking for your campaigns.&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;Barcode Generator:&lt;/strong&gt; Supports QR, EAN, UPC, Code128, and more.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Who is it for?
&lt;/h2&gt;

&lt;p&gt;BatchSet is optimized for:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;E-commerce:&lt;/strong&gt; Managing product catalogs and Shopify assets.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;SEO &amp;amp; Marketing:&lt;/strong&gt; Bulk image optimization and link tracking.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Agencies:&lt;/strong&gt; Speeding up social media content delivery.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://batchset.com" class="crayons-btn crayons-btn--primary" rel="noopener noreferrer"&gt;Try BatchSet for Free&lt;/a&gt;
&lt;/p&gt;

</description>
      <category>showdev</category>
      <category>productivity</category>
      <category>ecommerce</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Built BatchSet solo — a unified toolkit for image processing, QR, URLs &amp; bulk workflows to replace 6+ scattered tools.</title>
      <dc:creator>Muhaymin Bin Mehmood</dc:creator>
      <pubDate>Tue, 19 May 2026 16:40:23 +0000</pubDate>
      <link>https://dev.to/muhayminbinmehmood/built-batchset-solo-a-unified-toolkit-for-image-processing-qr-urls-bulk-workflows-to-replace-59em</link>
      <guid>https://dev.to/muhayminbinmehmood/built-batchset-solo-a-unified-toolkit-for-image-processing-qr-urls-bulk-workflows-to-replace-59em</guid>
      <description>&lt;div class="ltag__link--embedded"&gt;
  &lt;div class="crayons-story "&gt;
  &lt;a href="https://dev.to/muhayminbinmehmood/i-built-an-all-in-one-image-marketing-toolkit-as-a-solo-developer-8g3" class="crayons-story__hidden-navigation-link"&gt;I Built an All-in-One Image &amp;amp; Marketing Toolkit as a Solo Developer 🚀&lt;/a&gt;


  &lt;div class="crayons-story__body crayons-story__body-full_post"&gt;
    &lt;div class="crayons-story__top"&gt;
      &lt;div class="crayons-story__meta"&gt;
        &lt;div class="crayons-story__author-pic"&gt;

          &lt;a href="/muhayminbinmehmood" class="crayons-avatar  crayons-avatar--l  "&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.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F862113%2F5a178d20-456e-4b81-84be-62a8f2a2f0d3.jpg" alt="muhayminbinmehmood profile" class="crayons-avatar__image" width="640" height="640"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;div&gt;
            &lt;a href="/muhayminbinmehmood" class="crayons-story__secondary fw-medium m:hidden"&gt;
              Muhaymin Bin Mehmood
            &lt;/a&gt;
            &lt;div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"&gt;
              
                Muhaymin Bin Mehmood
                
              
              &lt;div id="story-author-preview-content-3702043" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0"&gt;
                &lt;div class="gap-4 grid"&gt;
                  &lt;div class="-mt-4"&gt;
                    &lt;a href="/muhayminbinmehmood" class="flex"&gt;
                      &lt;span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"&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.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F862113%2F5a178d20-456e-4b81-84be-62a8f2a2f0d3.jpg" class="crayons-avatar__image" alt="" width="640" height="640"&gt;
                      &lt;/span&gt;
                      &lt;span class="crayons-link crayons-subtitle-2 mt-5"&gt;Muhaymin Bin Mehmood&lt;/span&gt;
                    &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="print-hidden"&gt;
                    
                      Follow
                    
                  &lt;/div&gt;
                  &lt;div class="author-preview-metadata-container"&gt;&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;

          &lt;/div&gt;
          &lt;a href="https://dev.to/muhayminbinmehmood/i-built-an-all-in-one-image-marketing-toolkit-as-a-solo-developer-8g3" class="crayons-story__tertiary fs-xs"&gt;&lt;time&gt;May 19&lt;/time&gt;&lt;span class="time-ago-indicator-initial-placeholder"&gt;&lt;/span&gt;&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;

    &lt;/div&gt;

    &lt;div class="crayons-story__indention"&gt;
      &lt;h2 class="crayons-story__title crayons-story__title-full_post"&gt;
        &lt;a href="https://dev.to/muhayminbinmehmood/i-built-an-all-in-one-image-marketing-toolkit-as-a-solo-developer-8g3" id="article-link-3702043"&gt;
          I Built an All-in-One Image &amp;amp; Marketing Toolkit as a Solo Developer 🚀
        &lt;/a&gt;
      &lt;/h2&gt;
        &lt;div class="crayons-story__tags"&gt;
            &lt;a class="crayons-tag crayons-tag--filled  " href="/t/showdev"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;showdev&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/saas"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;saas&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/nextjs"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;nextjs&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/productivity"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;productivity&lt;/a&gt;
        &lt;/div&gt;
      &lt;div class="crayons-story__bottom"&gt;
        &lt;div class="crayons-story__details"&gt;
          &lt;a href="https://dev.to/muhayminbinmehmood/i-built-an-all-in-one-image-marketing-toolkit-as-a-solo-developer-8g3" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left"&gt;
            &lt;div class="multiple_reactions_aggregate"&gt;
              &lt;span class="multiple_reactions_icons_container"&gt;
                  &lt;span class="crayons_icon_container"&gt;
                    &lt;img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="24" height="24"&gt;
                  &lt;/span&gt;
              &lt;/span&gt;
              &lt;span class="aggregate_reactions_counter"&gt;2&lt;span class="hidden s:inline"&gt;&amp;nbsp;reactions&lt;/span&gt;&lt;/span&gt;
            &lt;/div&gt;
          &lt;/a&gt;
            &lt;a href="https://dev.to/muhayminbinmehmood/i-built-an-all-in-one-image-marketing-toolkit-as-a-solo-developer-8g3#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center"&gt;
              

              &lt;span class="hidden s:inline"&gt;Add&amp;nbsp;Comment&lt;/span&gt;
            &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="crayons-story__save"&gt;
          &lt;small class="crayons-story__tertiary fs-xs mr-2"&gt;
            2 min read
          &lt;/small&gt;
            
              &lt;span class="bm-initial"&gt;
                

              &lt;/span&gt;
              &lt;span class="bm-success"&gt;
                

              &lt;/span&gt;
            
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;/div&gt;


</description>
      <category>productivity</category>
      <category>showdev</category>
      <category>sideprojects</category>
      <category>tooling</category>
    </item>
    <item>
      <title>I Built an All-in-One Image &amp; Marketing Toolkit as a Solo Developer 🚀</title>
      <dc:creator>Muhaymin Bin Mehmood</dc:creator>
      <pubDate>Tue, 19 May 2026 15:28:25 +0000</pubDate>
      <link>https://dev.to/muhayminbinmehmood/i-built-an-all-in-one-image-marketing-toolkit-as-a-solo-developer-8g3</link>
      <guid>https://dev.to/muhayminbinmehmood/i-built-an-all-in-one-image-marketing-toolkit-as-a-solo-developer-8g3</guid>
      <description>&lt;p&gt;Over the last few months, I’ve been building &lt;strong&gt;BatchSet&lt;/strong&gt; — an all-in-one toolkit for image processing, QR generation, URL shortening, social resizing, and bulk workflows.&lt;/p&gt;

&lt;p&gt;The idea came from noticing how fragmented simple workflows have become. For a single e-commerce workflow, people often use:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;  One tool for image conversion&lt;/li&gt;
&lt;li&gt;  Another for compression&lt;/li&gt;
&lt;li&gt;  Another for QR codes&lt;/li&gt;
&lt;li&gt;  Another for URL shortening&lt;/li&gt;
&lt;li&gt;  Another for social media resizing&lt;/li&gt;
&lt;li&gt;  Another for batch-processing spreadsheets&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Too many subscriptions. Too many dashboards. So I decided to build one platform that handles all of it.&lt;/p&gt;

&lt;h2&gt;
  
  
  What BatchSet Includes
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;  &lt;strong&gt;Image Conversion:&lt;/strong&gt; JPG, PNG, WebP, AVIF, PDF (including bulk processing)&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;Data Workflows:&lt;/strong&gt; Excel Batch Processing&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;Marketing Tools:&lt;/strong&gt; QR Code &amp;amp; Barcode Generator, URL Shortener&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;Social:&lt;/strong&gt; Social Media Resizer&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;PDF Tools:&lt;/strong&gt; PDF ↔ Image Conversion&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Some Interesting Challenges
&lt;/h2&gt;

&lt;p&gt;Ironically, coding the platform was easier than launching it. Here are the hurdles that took way more time than expected:&lt;/p&gt;

&lt;p&gt;&lt;/p&gt;
  1. Payment Processor Approval
  &lt;br&gt;
Getting approved with Paddle for a new domain took longer than expected. They are thorough with site requirements (Terms of Service, Privacy Policy, and clear pricing) before they'll let you take a single cent.&lt;br&gt;


&lt;p&gt;&lt;/p&gt;

&lt;p&gt;&lt;/p&gt;
  2. Email Deliverability
  &lt;br&gt;
SPF, DKIM, DMARC, DNS propagation... making sure signup emails don’t land in spam is a project on its own. If you're building a SaaS, don't leave your transactional email setup for the last minute.&lt;br&gt;


&lt;p&gt;&lt;/p&gt;

&lt;p&gt;&lt;/p&gt;
  3. SEO Indexing
  &lt;br&gt;
Launching a new domain in 2024/2025 feels brutal. Google indexed only a small portion of the site initially, despite proper sitemaps and metadata. I'm still iterating on the content strategy to improve this.&lt;br&gt;


&lt;p&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Tool UX
&lt;/h3&gt;

&lt;p&gt;Simple tools are deceptively hard to design well. The challenge wasn’t just conversion speed—it was making workflows feel frictionless. How do you handle 50+ images being dropped into a browser at once without the UI freezing?&lt;/p&gt;

&lt;h2&gt;
  
  
  Biggest Lesson
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Shipping matters more than perfection.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;There were dozens of things I wanted to improve before launch:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Better animations&lt;/li&gt;
&lt;li&gt;More integrations&lt;/li&gt;
&lt;li&gt;More analytics&lt;/li&gt;
&lt;li&gt;Additional formats&lt;/li&gt;
&lt;li&gt;Team features&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;But eventually you have to launch, gather feedback, and iterate publicly.&lt;/p&gt;

&lt;p&gt;So that’s what I’m doing.&lt;/p&gt;

&lt;h2&gt;
  
  
  I’d Love Your Feedback
&lt;/h2&gt;

&lt;p&gt;If you work in e-commerce, SEO, marketing, or web development, I’d genuinely love your thoughts on the workflow design. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://batchset.com" class="crayons-btn crayons-btn--primary" rel="noopener noreferrer"&gt;Check out BatchSet&lt;/a&gt;
&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What's the one small "utility" tool you find yourself using every day that you wish was part of a larger suite?&lt;/strong&gt; Let me know in the comments!&lt;/p&gt;

</description>
      <category>showdev</category>
      <category>saas</category>
      <category>nextjs</category>
      <category>productivity</category>
    </item>
    <item>
      <title>10 JavaScript One-Liners That Will Make You Look Like a Pro in 2026 🚀</title>
      <dc:creator>Muhaymin Bin Mehmood</dc:creator>
      <pubDate>Wed, 04 Feb 2026 13:50:22 +0000</pubDate>
      <link>https://dev.to/muhayminbinmehmood/10-javascript-one-liners-that-will-make-you-look-like-a-pro-in-2026-4bjg</link>
      <guid>https://dev.to/muhayminbinmehmood/10-javascript-one-liners-that-will-make-you-look-like-a-pro-in-2026-4bjg</guid>
      <description>&lt;p&gt;JavaScript continues to evolve, and mastering concise, powerful code patterns can significantly boost your productivity. Here are 10 one-liners that every developer should know in 2024.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. Shuffle an Array
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const shuffle = arr =&amp;gt; arr.sort(() =&amp;gt; Math.random() - 0.5);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Perfect for randomizing quiz questions or playlist orders!&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Remove Duplicates from Array
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const unique = arr =&amp;gt; [...new Set(arr)];
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The Set object stores unique values, making deduplication effortless.&lt;/p&gt;

&lt;h2&gt;
  
  
  3. Check if Array is Empty
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const isEmpty = arr =&amp;gt; Array.isArray(arr) &amp;amp;&amp;amp; arr.length === 0;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Type-safe check that handles edge cases gracefully.&lt;/p&gt;

&lt;h2&gt;
  
  
  4. Get Random Element from Array
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const randomItem = arr =&amp;gt; arr[Math.floor(Math.random() * arr.length)];
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Great for random quotes, tips, or selecting winners!&lt;/p&gt;

&lt;h2&gt;
  
  
  5. Capitalize First Letter
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const capitalize = str =&amp;gt; str.charAt(0).toUpperCase() + str.slice(1);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Essential for formatting user names and titles.&lt;/p&gt;

&lt;h2&gt;
  
  
  6. Check if Object is Empty
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const isEmptyObj = obj =&amp;gt; Object.keys(obj).length === 0;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Useful for form validation and API response handling.&lt;/p&gt;

&lt;h2&gt;
  
  
  7. Deep Clone an Object
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const deepClone = obj =&amp;gt; JSON.parse(JSON.stringify(obj));
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Quick way to create independent copies (note: doesn't handle functions).&lt;/p&gt;

&lt;h2&gt;
  
  
  8. Generate Random Hex Color
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const randomColor = () =&amp;gt; `#${Math.floor(Math.random()*16777215).toString(16).padStart(6, '0')}`;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Perfect for dynamic theming and data visualization!&lt;/p&gt;

&lt;h2&gt;
  
  
  9. Get Current Timestamp
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const timestamp = () =&amp;gt; Math.floor(Date.now() / 1000);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Unix timestamp in seconds - ideal for APIs and logging.&lt;/p&gt;

&lt;h2&gt;
  
  
  10. Flatten Nested Array
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const flatten = arr =&amp;gt; arr.flat(Infinity);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Handles any depth of nesting automatically.&lt;/p&gt;




&lt;h2&gt;
  
  
  Want More?
&lt;/h2&gt;

&lt;p&gt;If you found these helpful, I've compiled 50+ more JavaScript tips, complete tutorials, and in-depth guides on my blog:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.mbloging.com/category/javascript" rel="noopener noreferrer"&gt;MBloging - JavaScript Tutorials&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I cover everything from:&lt;/p&gt;

&lt;p&gt;🔥 React.js &amp;amp; Next.js deep dives&lt;br&gt;
🎨 CSS tricks and modern layouts&lt;br&gt;
🛠️ TypeScript best practices&lt;br&gt;
📱 Responsive web development&lt;br&gt;
💡 Algorithm challenges explained&lt;/p&gt;




&lt;p&gt;&lt;strong&gt;Let's Connect!&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Which one-liner was your favorite? Do you have any JavaScript shortcuts you'd like to share?&lt;/p&gt;

&lt;p&gt;Drop a comment below!&lt;/p&gt;

&lt;p&gt;Follow me for more web development content, and check out &lt;a href="https://www.mbloging.com/" rel="noopener noreferrer"&gt;MBloging&lt;/a&gt; for comprehensive tutorials and courses!&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>programming</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Which Part of V8 Makes JavaScript Fastest?</title>
      <dc:creator>Muhaymin Bin Mehmood</dc:creator>
      <pubDate>Fri, 15 Aug 2025 13:31:05 +0000</pubDate>
      <link>https://dev.to/muhayminbinmehmood/which-part-of-v8-makes-javascript-fastest-19gc</link>
      <guid>https://dev.to/muhayminbinmehmood/which-part-of-v8-makes-javascript-fastest-19gc</guid>
      <description>&lt;div class="ltag__link--embedded"&gt;
  &lt;div class="crayons-story "&gt;
  &lt;a href="https://dev.to/muhayminbinmehmood/from-bytecode-to-machine-code-the-magic-behind-v8-performance-1pe2" class="crayons-story__hidden-navigation-link"&gt;🚀 From Bytecode to Machine Code: The Magic Behind V8 Performance&lt;/a&gt;


  &lt;div class="crayons-story__body crayons-story__body-full_post"&gt;
    &lt;div class="crayons-story__top"&gt;
      &lt;div class="crayons-story__meta"&gt;
        &lt;div class="crayons-story__author-pic"&gt;

          &lt;a href="/muhayminbinmehmood" class="crayons-avatar  crayons-avatar--l  "&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.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F862113%2F5a178d20-456e-4b81-84be-62a8f2a2f0d3.jpg" alt="muhayminbinmehmood profile" class="crayons-avatar__image" width="640" height="640"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;div&gt;
            &lt;a href="/muhayminbinmehmood" class="crayons-story__secondary fw-medium m:hidden"&gt;
              Muhaymin Bin Mehmood
            &lt;/a&gt;
            &lt;div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"&gt;
              
                Muhaymin Bin Mehmood
                
              
              &lt;div id="story-author-preview-content-2775736" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0"&gt;
                &lt;div class="gap-4 grid"&gt;
                  &lt;div class="-mt-4"&gt;
                    &lt;a href="/muhayminbinmehmood" class="flex"&gt;
                      &lt;span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"&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.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F862113%2F5a178d20-456e-4b81-84be-62a8f2a2f0d3.jpg" class="crayons-avatar__image" alt="" width="640" height="640"&gt;
                      &lt;/span&gt;
                      &lt;span class="crayons-link crayons-subtitle-2 mt-5"&gt;Muhaymin Bin Mehmood&lt;/span&gt;
                    &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="print-hidden"&gt;
                    
                      Follow
                    
                  &lt;/div&gt;
                  &lt;div class="author-preview-metadata-container"&gt;&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;

          &lt;/div&gt;
          &lt;a href="https://dev.to/muhayminbinmehmood/from-bytecode-to-machine-code-the-magic-behind-v8-performance-1pe2" class="crayons-story__tertiary fs-xs"&gt;&lt;time&gt;Aug 15 '25&lt;/time&gt;&lt;span class="time-ago-indicator-initial-placeholder"&gt;&lt;/span&gt;&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;

    &lt;/div&gt;

    &lt;div class="crayons-story__indention"&gt;
      &lt;h2 class="crayons-story__title crayons-story__title-full_post"&gt;
        &lt;a href="https://dev.to/muhayminbinmehmood/from-bytecode-to-machine-code-the-magic-behind-v8-performance-1pe2" id="article-link-2775736"&gt;
          🚀 From Bytecode to Machine Code: The Magic Behind V8 Performance
        &lt;/a&gt;
      &lt;/h2&gt;
        &lt;div class="crayons-story__tags"&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/javascript"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;javascript&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/performance"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;performance&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/programming"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;programming&lt;/a&gt;
        &lt;/div&gt;
      &lt;div class="crayons-story__bottom"&gt;
        &lt;div class="crayons-story__details"&gt;
          &lt;a href="https://dev.to/muhayminbinmehmood/from-bytecode-to-machine-code-the-magic-behind-v8-performance-1pe2" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left"&gt;
            &lt;div class="multiple_reactions_aggregate"&gt;
              &lt;span class="multiple_reactions_icons_container"&gt;
                  &lt;span class="crayons_icon_container"&gt;
                    &lt;img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="24" height="24"&gt;
                  &lt;/span&gt;
              &lt;/span&gt;
              &lt;span class="aggregate_reactions_counter"&gt;2&lt;span class="hidden s:inline"&gt;&amp;nbsp;reactions&lt;/span&gt;&lt;/span&gt;
            &lt;/div&gt;
          &lt;/a&gt;
            &lt;a href="https://dev.to/muhayminbinmehmood/from-bytecode-to-machine-code-the-magic-behind-v8-performance-1pe2#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center"&gt;
              

              2&lt;span class="hidden s:inline"&gt;&amp;nbsp;comments&lt;/span&gt;
            &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="crayons-story__save"&gt;
          &lt;small class="crayons-story__tertiary fs-xs mr-2"&gt;
            1 min read
          &lt;/small&gt;
            
              &lt;span class="bm-initial"&gt;
                

              &lt;/span&gt;
              &lt;span class="bm-success"&gt;
                

              &lt;/span&gt;
            
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;/div&gt;


</description>
      <category>javascript</category>
      <category>performance</category>
      <category>programming</category>
    </item>
    <item>
      <title>🚀 From Bytecode to Machine Code: The Magic Behind V8 Performance</title>
      <dc:creator>Muhaymin Bin Mehmood</dc:creator>
      <pubDate>Fri, 15 Aug 2025 12:34:42 +0000</pubDate>
      <link>https://dev.to/muhayminbinmehmood/from-bytecode-to-machine-code-the-magic-behind-v8-performance-1pe2</link>
      <guid>https://dev.to/muhayminbinmehmood/from-bytecode-to-machine-code-the-magic-behind-v8-performance-1pe2</guid>
      <description>&lt;h2&gt;
  
  
  🚀 Which part of V8’s process do you think has the biggest impact on performance?
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;Ignition Interpreter&lt;/li&gt;
&lt;li&gt;TurboFan Optimizing Compiler&lt;/li&gt;
&lt;li&gt;Garbage &amp;amp; Memory&lt;/li&gt;
&lt;li&gt;Object Shapes &amp;amp; Hidden Classes&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Ever wondered what really happens when your JavaScript runs in Chrome or Node.js?&lt;/p&gt;

&lt;p&gt;V8 doesn’t just interpret your code — it compiles, optimizes, and turbocharges it for near-native speed.&lt;/p&gt;

&lt;p&gt;In my latest article, I break down how V8 works step-by-step — from bytecode execution to machine code optimization.&lt;/p&gt;

&lt;p&gt;Read the full breakdown here: &lt;a href="https://www.mbloging.com/post/v8-engine-javascript-optimization" rel="noopener noreferrer"&gt;https://www.mbloging.com/post/v8-engine-javascript-optimization&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;👇 Drop your guess in the comments! Even if you’re not 100% sure&lt;/strong&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>performance</category>
      <category>programming</category>
    </item>
    <item>
      <title>🚀 JavaScript Challenge — What Happens Here?</title>
      <dc:creator>Muhaymin Bin Mehmood</dc:creator>
      <pubDate>Tue, 12 Aug 2025 09:04:00 +0000</pubDate>
      <link>https://dev.to/muhayminbinmehmood/javascript-challenge-what-happens-here-1kbm</link>
      <guid>https://dev.to/muhayminbinmehmood/javascript-challenge-what-happens-here-1kbm</guid>
      <description>&lt;p&gt;Here’s a small snippet for you:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;let user = {
    first name: "John",
    age = 30
};

console.log(user);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;What will happen when you run this code?&lt;/p&gt;

&lt;h2&gt;
  
  
  Possible outcomes:
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;&lt;code&gt;{ first name: "John", age: 30 }&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;SyntaxError&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;undefined&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;null&lt;/code&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;💬 Your turn: Drop your answer in the comments and explain your reasoning.&lt;/p&gt;

&lt;p&gt;I break down this and other tricky "Unexpected Token" cases in detail in my latest guide:&lt;br&gt;
👉 &lt;a href="https://www.mbloging.com/post/solving-unexpected-token-errors-javascript" rel="noopener noreferrer"&gt;Read the full article here&lt;/a&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>programming</category>
    </item>
  </channel>
</rss>
