Don't Let the Editor Format Your Images

There are many aesthetic reasons to resize an image, but you may also want to resize your images to conserve bandwidth. Below are two options to resize images as well as some examples when it may come in handy.

Goals

📷 Learn how to use an outside website or app to resize an image
📇 Learn how to resize an image using inline coding
💡 Different scenarios where resizing is beneficial

Why You Should Care

The below is a photo I took on a run I had over the holidays. I love looking at the river flow off into the background. There is a major issue though. I can't look at the entire photo without changing the zoom on my screen. Also, the file size of the original image is 485KB. That isn't an insane amount of data to download, but why not save some bandwidth if possible?

---

Sure, I could use the below code and push it to the right to force the system to shrink the image for me.

<div class="pull-right">Image Path</div>


Result -------------------->

Three issues I have with this solution:

1️⃣ I don't have direct control of the sizing just by pushing it right or left

2️⃣ What if I don't want to wrap the text around the photo?

3️⃣ The file size is still 485KB

Outside Help

There are many websites and apps that offer the ability to resize an image. The one I use most often is Image Resizer. There is no particular reason I use this over the many other options available. It happens to be easy to use, it was one of the first options that came up in my search, and it is saved in my bookmarks. In four simple steps it resizes an image to your specifications.

Select Your Image	Change by Exact Dimensions or Percentage	Resize	Download Your Image

The bonus for this method is that the new image at 300x400 is only 30KB

Code It

There is nothing wrong with resizing the image with an outside app. However if you want the same image in multiple sizes, it is nice to not have to resize/download/upload another image. If you are like me, this means when you change your mind for the umptieth time about the exact width or height of a particular image, it can be changed in seconds not minutes. The added benefit is not adding undue storage demands on the Hive servers by uploading multiple sized copies of the same image. Using the below code, the same large photo from the top of the post can be resized without leaving the editor.

Add this bit of code before your image path...
https://images.hive.blog/IMAGE WIDTHxIMAGE HEIGHT/

Example:  

ORIGINAL IMAGE PATH = ![river.jpeg](https://files.peakd.com/file/peakd-hive/candnpg/242Nawszkc3JsgrqQ4RjfsKhDjeKaMsJKAH8jPEX8ZtBhou36t1uAmChNDX62fPHETe8F.jpeg)

RESIZED IMAGE PATH = ![river.jpeg](https://images.hive.blog/300x400/https://files.peakd.com/file/peakd-hive/candnpg/242Nawszkc3JsgrqQ4RjfsKhDjeKaMsJKAH8jPEX8ZtBhou36t1uAmChNDX62fPHETe8F.jpeg)

The original photo aspect ratio was 3:4 so I made the math easy and downsized it to 300x400. 

_{The "new" 300x400 Image - Only 30KB!}

Use Cases

Want more or less width/height when wrapping text around an image? I made this image 150 x 200 (half the size of the above) using code. This allows more width of the screen than the default pull-right image we saw in the "Why you should care" section. I can write a full paragraph fully inline with the image. No need to go through a full download/upload process. Additionally if you finish writing and decide you want a bit more or less space it is a simple matter of changing the dimensions in the code. No need to go offsite, resize and reset.

Make Tables Look Nice

Making tables with different sized images can be a nightmare.

Original Resized by the Editor	Looks Bad

---

Resize the larger image to be proportional to the smaller

Coded to 150 x 200	Looks Better

Wrap Up

There are endless use cases for resizing an image for your posts. Start taking control of the sizing by adding a small line of code.

https://images.hive.blog/IMAGE WIDTHxIMAGE HEIGHT/

Your posts will look cleaner and you will save yourself some time and frustration as you are creating your next post. Leave the guessing game with your images behind and spend your valuable time getting your awesome content out for the rest of us to consume.

Self Promotion Zone

Recent Posts:

It's Raining Pelacors: Presenting Giveaway #1 Winner - Announcing Giveaway #2

Further Into the Deep - My Plans to Build Up My Water Deck

My Day is Saved By Another generous Hiver

---

Credits:

Thumbnail created by me using Canva

Thanks for reading!