Searching for the “correct” way to ensure your images are the proper size on your Blogger website? Create a specific fixed image width in Blogger with some simple HTML coding. It will take only a few minutes, but it will change the look and feel of your entire website! After all, fantastic images (and awesome content) are what keep your readers engaged.

The following article may include affiliate links. Please read our full disclosure regarding our affiliate policy.

Why would you want to create a specific fixed image width in Blogger? The answer to this question lies in the template you are using, or even in the functionality of your website.

Here’s an example – Your template utilizes larger, more striking imagery with a fixed width for picture continuity. However, you place images like Pinterest “Pin It” Buttons on several pages of your site and obviously want these to appear smaller without having to recode your entire template. If this is you, you need this image width HTML code to add to your pictures.

Still not convinced? Here’s another example – You sell products on your website and frequently place “Buy it Now” or “Add to Cart” buttons on your website. The last thing you want are obnoxiously large buttons, but you do want consistency. Code your product buttons to the perfect size using some simple HTML.

How to Create Images with a Fixed Width in Blogger

Typical photo HTML (with a link) looks like this:

<a href=”http://4.bp.blogspot.com/-swnLsk2jUIc/U3pv8QPQilI/AAAAAAAAF3Q/Mi6rd9UWM4I/s1600/Sesame-Street-Inspired-Party-Ideas-Budget-First-Birthday-Boy-Creative-Matrimony.jpg” imageanchor=”1″ style=”margin-left: 1em; margin-right: 1em;”><img border=”0″ src=”http://4.bp.blogspot.com/-swnLsk2jUIc/U3pv8QPQilI/AAAAAAAAF3Q/Mi6rd9UWM4I/s1600/Sesame-Street-Inspired-Party-Ideas-Budget-First-Birthday-Boy-Creative-Matrimony.jpg” /></a></div>

Add this simple tag: <width=”pixelsize”> after the image anchor to ensure a fixed width for your photo. No need to worry about the height tag as the width will automatically size to the correct height.

<a href=”http://4.bp.blogspot.com/-swnLsk2jUIc/U3pv8QPQilI/AAAAAAAAF3Q/Mi6rd9UWM4I/s1600/Sesame-Street-Inspired-Party-Ideas-Budget-First-Birthday-Boy-Creative-Matrimony.jpg” imageanchor=”1″ style=”margin-left: 1em; margin-right: 1em;”><img border=”0″ src=”http://4.bp.blogspot.com/-swnLsk2jUIc/U3pv8QPQilI/AAAAAAAAF3Q/Mi6rd9UWM4I/s1600/Sesame-Street-Inspired-Party-Ideas-Budget-First-Birthday-Boy-Creative-Matrimony.jpg” width=”pixelsize” /></a></div>

Have questions? Don’t hesitate to comment below or send me an email.
Tiffany