How to Manipulate & Optimize Your Blog Images to Get the Best Trade-Off Between Image Size & Quality
When I first started blogging – managing images & figuring out what size & file format they should be in my blog posts was something I REALLY struggled with! So, in this post I summarize a lot of what I have learned about images over the years and how to best optimize them for a website or blog. I give guidelines for the best size, format & tools to use to create the most effective & size efficient images for a blog post.
The goal here is to strike best balance between image quality & size. (The Goldilocks solution…) People aren’t going to wait around forever for a blog post with super high quality images to load. Likewise, no one likes to look at images that are of such low quality – that they become an unpleasant distraction that accomplish nothing.
Factors that Determine the SIZE of Images & Photos on Your Blog or Website
What determines the size of your images and what variables can you change to make them smaller?
- Image dimensions or size (resizing), usually measured in pixels,
- File format (JPEG, PNG, BMP, etc),
- Number of colors (for PNG images), Color Depth
- Compression level, (Using Optimazilla – this is usually Quality – which ranges from 100 to 0)
- Dpi (Dots, per inch) a measure of resolution – usually associated with printed images,
- … How to get the best blog images… Blog image examples
What Types of Images (File Formats) Should I Be Using on My Blog or Website?
Use the following as a rule of thumb for the best file type for your blog or website images:
- PNG file format for screenshots & text based images.
- If readability is an issue – the PNG format is probably going to be the best solution and the right format for your images.
- JPG file format for photos of people/landscapes/items.
- If it is a photograph you are using – a JPG image is probably going to be the right file format for you blog image.
Overall Guidelines on Image Sizes & Tools to Use
- General Guideline: 850px in width for most images. This is a good baseline size that allows the image to look good on all platforms (phone, tablets, & desktops)
- 650px wide if image taller than it is wide.
- Featured images should be 1200px wide x 900 high.
- Microsoft Paint to crop & resize images. Free, preloaded on all Windows machines and super-easy to use!
- ShareX is a great FREE tool to markup images. Not as intuitive as Microsoft Paint – but more feature rich & powerful.
- Optimazilla is a FREE website that is great to compress your images. VERY easy to use! Reduce most JPG photos to 89% Quality. Reduce PNG screenshots to 64 or 32 colors.
- Remove.bg to remove the background of an image automatically. Free version only suitable for smaller images (non-HD). They charge to download HD quality images.
- Microsoft Whiteboard (Free) to overlay images on each other or make one side-by-side image or of two. I just screenshot/snip it from there.
Guidance for Best Image Size & Format
Take these as suggestions and starting points with regards to selecting SIZE and FILE FORMAT for specific types of images. Unique circumstance may require different settings and dimensions.
| Example | Image Format | Dimensions in Pixels |
| Kids’ Artwork | JPG | 650 pixels wide if Portrait 850 pixels wide if Landscape |
| Featured Image in WordPress | JPG | 1200 pixels wide x 900 or so pixels in height |
| Screen shot | PNG | 1200 pixels wide |
| Portrait | JPG | 850 pixels wide |
Best Free Tools for Editing Images
Looking to crop or resize you images? Here are the best FREE tools I have found to crop & resize images such as screenshots and photographs.
- Cropping & Resizing Images: Microsoft Paint. (Free) Free & should be installed on every Windows computer already. Super easy to use.
- Marking Up Images: ShareX. (Free). Good options – but not as intuitive to use as MS Paint.
- Gimp (Free & Open Source)
- LunaPic (Free – Online)
Best FREE Tools for Compressing Images
Are you happy with your image – but it’s size is too large to post on your niche website or blog? Here are the best FREE tools I have found to compress images – whether they are photographs or screenshots.
- Optimazilla: (Free – online) I LOVE this website and use it all the time. VERY easy and intuitive to use! This is my go-to solution for a quick and easy way to compress images – both PNG and JPG file formats.
Best Free Tools for Creating Images
If you are looking to create images for your post from the screen – here are the best FREE tools I have found to create screenshots.
- Screenshots: Microsoft Snipping Tool / Snip & Sketch (Free): One, or both of these should already be installed on your system if you are using a Microsoft Windows as your operating system. Hit your start button and search for either/both. They are very easy to use to obtain screen shots to use on your blog or website.
- Screenshots: ShareX (Free) This is a great tool, too, for creating screenshots. It’s just not as intuitive as the Microsoft Snipping Tool or Snip & Sketch. It is, however, more feature rich & powerful!
Best FREE Tools for Manipulating Images
Looking to combine 2 images together to make one, or add some text or freehand to an image – here is the best FREE solution I have found to do so.
- Microsoft WhiteBoard
Best FREE Tools for Marking Up Images
- ShareX: (Free) Great for putting arrows, ovals, circles and rectangles on your images to highlight areas & items. I usually use the color red for the markups I make – but you can use any other color that suits you!
- Microsoft Paint: (Free) You can use this for some simple markup – but it will probably be a little sloppier than if you use something like ShareX, since with Paint you must rely on free hand to highlight the areas you want to , or to make arrows.
Screenshot Comparison: Image Size, Format & Quality
I did an experiment and analysis with a screenshot image I snapped for one of our other websites to help me determine the best size & format for the image. My goal was to preserve as much image quality as practicable – yet keep the image size as small as possible.
I used the same exact image to create all 16 of these images. This was a screenshot image I wanted to use for a blog post on Hobby3DPrinting.com regarding hiring a 3D printing service to print a 3D model.
Below, is what I did to experiment with the quality versus size trade-off for my images. It resulted with a total of 16 images to compare.
- The original image was a PNG screen shot. The original size was 1865 x 961 pixels. This was my reference image for quality & size.
- I saved the image in 2 different file format – PNG & JPG.
- I uploaded it to Optimazilla for compression.
- I varied the # of colors for PNG images – from 256 – 32 colors.
- I varied the Quality setting on Optimazilla for the JPG images – from 100% to 67%.
- I reduced the size of the image to 1200 x 618 pixels.
- I saved it again as both file formats – PNG & JPG.
- I uploaded the images AGAIN to Optimazilla for compression.
- I varied the # of colors for PNG images AGAIN – from 256 – 32 colors.
- I varied the Quality setting on Optimazilla for the JPG images AGAIN – from 100% to 67%.
| Image | Pixels (WxH) | Colors | Quality | File Format | Compression | DPI | Size |
| Image #1 | 1865 x 961 | All | N/A | PNG | None | 268.7 KB | |
| Image #2 | 1865 x 961 | 256 | N/A | PNG | Yes | 97.1 KB | |
| Image #3 | 1865 x 961 | 64 | N/A | PNG | Yes | 78.7 KB | |
| Image #4 | 1865 x 961 | 32 | N/A | PNG | Yes | 76.3 KB | |
| Image #5 | 1200 x 618 | All | N/A | PNG | No | 249 KB | |
| Image #6 | 1200 x 618 | 256 | N/A | PNG | Yes | 73.9 KB | |
| Image #7 | 1200 x 618 | 64 | N/A | PNG | Yes | 58.1 KB | |
| Image #8 | 1200 x 618 | 32 | N/A | PNG | Yes | 49.7 KB | |
| Image #9 | 1865 x 961 | All | JPG | No | 319 KB | ||
| Image #10 | 1865 x 961 | ? | 100 | JPG | Yes | 260 KB | |
| Image #11 | 1865 x 961 | ? | 89 | JPG | Yes | 205 KB | |
| Image #12 | 1865 x 961 | ? | 67 | JPG | Yes | 105 KB | |
| Image #13 | 1200 x 618 | All | JPG | No | 169 KB | ||
| Image #14 | 1200 x 618 | ? | 100 | JPG | Yes | 143 KB | |
| Image #15 | 1200 x 618 | ? | 89 | JPG | Yes | 108 KB | |
| Image #16 | 1200 x 618 | ? | 67 | JPG | Yes | 57.4 KB |
Screenshot Images (Click + to E-X-P-A-N-D) ==>
Analysis & Side-by-Side Comparison of Screenshot Images
You might need to zoom in to appreciate some of the differences between these images.
Comparison #1: Largest Sized PNG (Image #1) to Smallest PNG (Image #8)
| Image #1 | Image #8 | |
| Pixels | 1865 x 961 | 1200 x 618 |
| # Colors | All | 32 |
| Quality | N/A | N/A |
| File Format | PNG | PNG |
| Compression | None | Yes |
| Size | 268.7 KB | 49.7 KB |
The quality of Image #8 is pretty good – especially considering the difference in file size. The size of the original image (Image #1) is 268.7 KB compared to the file size of Image #8, which was a mere 49.7 KB. That means that Image #8 is less than 1/5th the size of the original image – and still looks pretty good!
Both images #7 & #8 are good candidates for where to start when determining the best image size & settings for your blog post. If your images have fewer colors than my images I would lean towards Image #8.
In my case, I actually chose Image #7 – because some color was lost on the castable resin image (turned from green to blue) – and I would prefer not to lose any colors. The “cost” for doing so is another 8.4 KB (about a 17% increase from Image #8 size).
Comparison #2: Largest Sized PNG (Image #1) to My “Optimal” PNG Image (Image #7)
| Image #1 | Image #7 | |
| Pixels | 1865 x 961 | 1200 x 618 |
| # Colors | All | 64 |
| Quality | N/A | N/A |
| File Format | PNG | PNG |
| Compression | None | Yes |
| Size | 268.7 KB | 58.1 KB |
I feel that in this case – Image #7 is optimal – because no color is lost, the text is clean and the image size is almost 1/5th the size of the original.
Comparison of Image #7 (my “Optimal” Image) & Image #8 (Very Close Second Place)
Comparison of Image #7 (My “Optimal” Image) & Image #16 (PNG image & JPG images of the same size)
Conclusion – For Screenshot Example
For screenshots, the sweet spot appears to be with the PNG file format & 64 colors. Of course, it might be different for your specific situation – but this is a reasonable place to start. If your images have fewer colors – I would definitely lean towards using the smaller image (Image #8) using just 32 colors. If color accuracy is important and there are more colors – Image #7 (with 64 colors) and those settings would be the way to go.
PHOTOGRAPH Comparison: Image Size, Format & Quality
Here, I use a photograph I recently took @ Camelback’s indoor water park, Aquatopia, in the Poconos. I wanted to do a similar comparison to determine the best file format, size, etc. for the photographs (as opposed to screenshots) I was using on my blog & websites.
I took the original photograph with Canon EOS Mark II mirrorless camera (Affiliate link, I do like the camera a lot!). But the image size is ENORMOUS at 6,000 px by 4,000 px and 9,256 KB (or 9.256 MB). This is WAY bigger than anything I would ever even consider using on a website or blog post! So I tweaked the image before I even started my analysis and comparison study. Below is what I did, step-by-step:
- Original image was JPG that was 6,000 px wide by 4,000 px high. It was 9,256 KB (9.256 MB) and 72 dpi.
- I uploaded the image into Google Photos to lighten it and reduce the size. When I downloaded the brightened image it was the same dimensions (6,000 px by 4,000 px) and 3,245 KB (3.245 MB) in size. This was still too large of an image!
- I opened the photo in Microsoft Paint and resized it to the dimensions of 1,800 px by 1,200 px. It was still a JPG and was 72 dpi and now the file size was 895 KB (.895 MB). Since the photo was finally a size that I might actually use – I designated this as my baseline image (Image #1).
- I them uploaded the image to Optimazilla for compression. For JPG images & photographs the setting of 100 for quality is identical to the original image that was uploaded (not so for PNGs that uses a number of color setting instead of Quality setting). So I reduced the Quality setting to 89%. Image dimensions remained the same @ 1,800 px by 1,200 px, but the file size dropped to 487 KB. Still a JPG and @ 72 dpi. This became Image #2.
- I reloaded Image # 1 into Optimazilla and set the Quality setting to 67%. I downloaded the image. Dimensions 1,800 px by 1,200 px, JPG, 72 dpi and a file size of 242 KB. This is Image #3.
- I then opened my reference image (Image #1) in Microsoft Paint again and saved the image as a PNG rather than a JPG. When I saved it – its file size was a WHOPPING 4,062 KB (4.062 MB)! This became Image #4. It was the same dimensions (1,800 px by 1,200 px) and the color depth was 32 bit.
- I uploaded this Image #4 to Optimazilla and it reduced it to 256 colors. Upon download it was the same dimensions (1,800 px by 1,200 px) but now only 8 bit for the color depth. The file size was 1,082 KB (1.082 MB). Since this was not looking like a fruitful path – I designated this Image #4B.
- To be thorough, I reduced Image #4 further with Optimazilla – this time to 64 colors. Dimensions of the photo remained the same (1,800 px by 1,200 px) as did the color depth (8 bit), but the file size was reduced to 764 KB. This was designated as Image #4C. Again – not a very fruitful path – when the same photograph in JPG format was only 2/3rds the size and better quality.
- I then opened my reference image (Image #1) again in Microsoft Paint and saved it as (converted it to) a BMP file. Dimensions still 1,800 px by 1,200 px, color depth 24 bit, 72 dpi. File size 6,329 KB (6.329 MB)!. This is Image #5.
- I opened my reference image again (Image #1) and resized it in Microsoft Paint to 1,200 px by 800 px. I saved this as a JPG. 72 dpi and 24 bit color depth. The file size was 473 KB. This is Image #6.
- I then uploaded Image # 6 to Optimazilla and compressed it to 89% Quality. Still same dimensions (1,200 px by 800 px, 72 dpi, and 24 bit color depth. The file size was 252 KB. This is Image #7.
- Finally, I reloaded Image #6 to Optimazilla and compressed it to 67% Quality. Still same dimensions (1,200 px by 800 px, 72 dpi, and 24 bit color depth. The file size was 130 KB. This is Image #8.
| Image | Pixels (WxH) | Color Depth | Quality | File Format | Compression | DPI | Size |
| Image #1 | 1800 x 1200 | 24 Bit | 100 | JPG | No* | 72 | 895 KB |
| Image #2 | 1800 x 1200 | 24 Bit | 89 | JPG | Yes | 96 | 488 KB |
| Image #3 | 1800 x 1200 | 24 Bit | 67 | JPG | Yes | 96 | 242 KB |
| Image #4 | 1800 x 1200 | 32 Bit (All) | N/A | PNG | No | ? | 4,062 KB |
| Image #4B | 1800 x 1200 | 8 Bit (256) | N/A | PNG | Yes | ? | 1,082 KB |
| Image #4C | 1800 x 1200 | 8 Bit (64) | N/A | PNG | Yes | ? | 757 KB |
| Image #5 | 1800 x 1200 | 24 Bit | N/A | BMP | No | ? | 6,329 KB |
| Image #6 | 1200 x 800 | 24 Bit | 100 | JPG | No | 72 | 473 KB |
| Image #7 | 1200 x 800 | 24 Bit | 89 | JPG | Yes | 96 | 254 KB |
| Image #8 | 1200 x 800 | 24 Bit | 67 | JPG | Yes | 96 | 129 KB |
Photographs (Click on + to E-X-P-A-N-D) ==>
Comparison of Original Image (Image #1) & Image #8 (Smallest One)
