<?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: Trilok Singh</title>
    <description>The latest articles on DEV Community by Trilok Singh (@increasephotosize).</description>
    <link>https://dev.to/increasephotosize</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%2F4142190%2Ffcca2c40-5f29-4512-8ae5-151fc7118e7a.png</url>
      <title>DEV Community: Trilok Singh</title>
      <link>https://dev.to/increasephotosize</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/increasephotosize"/>
    <language>en</language>
    <item>
      <title>I built a tool that makes images bigger, not smaller – here's why</title>
      <dc:creator>Trilok Singh</dc:creator>
      <pubDate>Fri, 25 Sep 2026 03:56:46 +0000</pubDate>
      <link>https://dev.to/increasephotosize/i-built-a-tool-that-makes-images-bigger-not-smaller-heres-why-1g9g</link>
      <guid>https://dev.to/increasephotosize/i-built-a-tool-that-makes-images-bigger-not-smaller-heres-why-1g9g</guid>
      <description>&lt;p&gt;Almost every image tool on the internet does the same thing: make the file &lt;strong&gt;smaller&lt;/strong&gt;. Compress, optimize, shrink.&lt;/p&gt;

&lt;p&gt;But there's a very common problem that goes the other way.&lt;/p&gt;

&lt;h2&gt;
  
  
  The "file too small" problem
&lt;/h2&gt;

&lt;p&gt;In India, millions of people fill online forms every year – bank exams (SBI, IBPS), SSC, railway recruitment, college admissions. These forms usually ask for a photo and a signature with strict rules, something like:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Photo: 20 KB – 50 KB&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;People take a photo on their phone, crop it, and the file comes out at 12 KB. The form rejects it. The photo looks perfectly fine – it's just "too small".&lt;/p&gt;

&lt;p&gt;Most people then search for a way to &lt;em&gt;increase&lt;/em&gt; the size, and end up on tools built for compression. That's the gap I wanted to fill with &lt;strong&gt;IncreasePhotoSize&lt;/strong&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  "Size" means three different things
&lt;/h2&gt;

&lt;p&gt;This is where most of the confusion comes from, so the tool treats them separately:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;File size (KB/MB)&lt;/strong&gt; – how much storage the file takes. This is what most upload forms check.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Dimensions (pixels)&lt;/strong&gt; – width × height, e.g. 300 × 400.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Resolution (DPI)&lt;/strong&gt; – pixels per inch, which mostly matters for printing.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Changing one does not automatically change the others. A 72 DPI and a 300 DPI version of the same image can have identical pixels and look exactly the same on screen. Explaining this clearly turned out to be almost as important as the tool itself.&lt;/p&gt;

&lt;h2&gt;
  
  
  Doing it in the browser
&lt;/h2&gt;

&lt;p&gt;I wanted the tool to work without uploading photos anywhere. People are uploading ID photos and signatures – they shouldn't have to send those to a random server.&lt;/p&gt;

&lt;p&gt;The browser can do all of this with the Canvas API. A simplified version of the core idea looks like this:&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="c1"&gt;// Simplified example of the idea – not the full implementation&lt;/span&gt;
&lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;reencode&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="nx"&gt;width&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;quality&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;img&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="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;createElement&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;canvas&lt;/span&gt;&lt;span class="dl"&gt;"&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="nx"&gt;width&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;width&lt;/span&gt; &lt;span class="o"&gt;??&lt;/span&gt; &lt;span class="nx"&gt;img&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;canvas&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;height&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;height&lt;/span&gt; &lt;span class="o"&gt;??&lt;/span&gt; &lt;span class="nx"&gt;img&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;img&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="nx"&gt;canvas&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;canvas&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="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="nx"&gt;canvas&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;toBlob&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="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;image/jpeg&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="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;Higher JPEG quality means less compression, which means a bigger file with the same pixels. When the user needs a specific target like "at least 50 KB", the tool adjusts the settings and re-encodes until the output lands in range. If quality alone isn't enough, it can also increase the dimensions.&lt;/p&gt;

&lt;p&gt;DPI is handled separately, because it's stored as metadata in the file rather than in the pixels.&lt;/p&gt;

&lt;p&gt;Since everything runs client-side, there's no upload wait, no server cost, and nothing is stored.&lt;/p&gt;

&lt;h2&gt;
  
  
  Exam presets
&lt;/h2&gt;

&lt;p&gt;The next thing I noticed: people don't want to think about numbers. They just want "make it work for the SBI form". So the site also has pages with presets for specific exams, plus a small signature maker for people who don't have a scanned signature.&lt;/p&gt;

&lt;h2&gt;
  
  
  What I learned
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Reverse problems are underserved.&lt;/strong&gt; Search for "compress image" and you'll find hundreds of tools. Search for "increase image size in KB" and the results are thin.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Explaining the concept is part of the product.&lt;/strong&gt; Many users don't know KB and pixels are different things.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Local processing is a real feature&lt;/strong&gt;, not just a technical detail. People care when it's their ID photo.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Try it / feedback welcome
&lt;/h2&gt;

&lt;p&gt;It's free, needs no signup, and adds no watermark: &lt;a href="https://increasephotosize.com/" rel="noopener noreferrer"&gt;increasephotosize.com&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I'd love feedback on two things:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Is the difference between file size, dimensions and DPI clear on the page?&lt;/li&gt;
&lt;li&gt;What other presets (exams, visas, job portals) would be useful?&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;em&gt;I used AI assistance while building parts of this tool and drafting this post.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>showdev</category>
      <category>webdev</category>
      <category>javascript</category>
      <category>sideprojects</category>
    </item>
  </channel>
</rss>
