The latest articles on DEV Community by Demi (@placeholder_ink). https://dev.to/placeholder_ink 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%2F1164911%2F32a04465-9764-4a93-82f9-e5070123bc36.jpg https://dev.to/placeholder_ink en Demi Tue, 19 Sep 2023 08:03:00 +0000 https://dev.to/placeholder_ink/placeholder-for-image-4bka https://dev.to/placeholder_ink/placeholder-for-image-4bka <p>Save time and effort with our convenient placeholder images. <a href="https://placeholder.ink">https://placeholder.ink</a></p> <h2> How it works? </h2> <p>It's easy! Just choose the size, color, and text you want, and you will get an image that meets your requirements!</p> <h2> Default image placeholder </h2> <p>The default setting only uses the image size. You'll receive an image with the dimensions you specified, the default gray background, and the specified image size:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>&lt;img src="https://jpg.placeholder.ink/600x250" alt="600x250"&gt; </code></pre> </div> <h2> Customize background color </h2> <p>You can customize the background color by specifying the color you need in HEX format, consisting of 6 digits:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>&lt;img src="https://jpg.placeholder.ink/600x250/cecece" alt="600x250/cecece"&gt; </code></pre> </div> <h2> Adding text to an image </h2> <p>You can also add text to the image. If you need to add more than one word, use a plus sign (+) instead of a space:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>&lt;img src="https://jpg.placeholder.ink/600x300/8ac9eb/placeholder+banner" alt="600x300/8ac9eb/placeholder banner"&gt; </code></pre> </div> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--3mmv8JYX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i9vk77i69xs1tn8d3lc2.jpg" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--3mmv8JYX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i9vk77i69xs1tn8d3lc2.jpg" alt="Image description" width="600" height="300"></a></p> design javascript html