Resize Pictures Without Losing Quality

Resize Pictures: How can we resize a image without losing quality for our client and for SEO

I’ll bet that some of you are resizing and optimizing pictures wrong, maybe SEO correct but wrong for client. We realize this when we had a photographer as a client.

Before we begin, because we’ll use their image in this tutorial, we like to thank the nice people at Pif Media and if you ever need a wedding photographer you can contact them with confidence (please do not consider this advertising because our contract with them ended before this post).

In this tutorial we’ll chose the best resizing programs. We will not cover alt tags, image description, etc. Our focus is on 2 things(1 indicated by pagespeed and the other common sense):
– Serving scaled images without resizing with CSS or html.
– Keeping the picture quality

We’ll learn how to correctly shrink a picture (without altering the composition – same principle can be applied to enlarge it as long as it’s not to enlarged..).

Resize Pictures Google Pagespeed Errors
Resize Pictures Pagespeed Errors: Showing real dimensions by shrinking the image

Resize Pictures: Original picture: quality,size and dimensions

Resize Pictures picture that needs to be shrank
Resize Pictures: Original Image dimensions 600×900

It’s size is 163,840 bytes (size on disk), dimensions are 600x900px.

Our goal is to resize it to 596x894px and to have a smaller size image with the same quality (because it’s a photographer’s website we cannot alter it in any way)

Resize Pictures with Adobe Photoshop

Simple procedure, from photoshop, image, image size we chose 594×894, as algorithm we used bicubic sharpner (best for reduction, bicubic automatic with same result).

– We saved the image(.jpg) with a quality of 100% (maximum)(we chose optimized because progresive is much biger in size). The result was 307,200 bytes well over original 163,840 bytes. Because we reduced the width and hight we expect the result to be smaller in size.

– We arrived at 84% quality (same algorithm), to have a size of 163,840 bytes equal to original pic. This is the result (To notice the difference plase click here and switch between tabs. )(if browser doesn’t open two tabs: Tab 1 and Tab 2)

Image Optimization, Resize in Adobe Photoshop, quality 84%
Resize in Adobe Photoshop, quality 84%, so we have the same size of original picture

-Same results with Perfect Resize(plugin for adobe photoshop)

Conclusion: Resulting image had brighter colours and cannot be used for this client. Other versions of photoshop with different settings can produce different results.

Resize Pictures with

As settings we used: best quality. Resulting file has 270,336 bytes at 596×894, bigger than original. This is it (For differences click here and alternate between tabs)(if browser doesn’t open two tabs: Tab 1 and Tab 2):

Resizing image with
Resizing image with at 596×894

Conclusion: Same problem. Colours are not the same, even at maximum picture quality. This doesn’t mean that this website’s services aren’t good. Simply we cannot use them in this case.

Resize Picture with the help of (free service)

At options we chose: 596×894, best jpg quality and at maximum file size 158kb. The result is OK, picture size is 151,552 bytes. This is the image(There aren’t any differences, you can test that here )(if browser doesn’t open two tabs: Tab 1 and Tab 2): resizing pictures
Resulting picture

Conclusion: The service is OK, you only need to be careful to specify the maximum file size. If you leave it blank the resulting pic(in our case) is larger than original. They have also an API.

Resize Pictures using (free)

We chose dimensions not percent, but unfortunately the resulting image is bigger than original. It has 180,224 bytes, but the quality remained ok(There aren’t any differences, you can test that by clicking here and switch between tabs)(if browser doesn’t open two tabs: Tab 1 and Tab 2).

Shrinking image with Simple Image Resizer
Shrinking image with Simple Image Resizer

Conclusion: Because the resulting image is bigger than original, we decided not to use it. This doesn’t mean that their service cannot be used, with proper optimizing result can be satisfying.

Resizing Images using (Free online service)

We chose more options specifying width and height, at quality we entered 97%(at 98% the resulting pic was bigger than original). We obtained a picture of 159,744 bytes(difference here, switch between tabs. )(if browser doesn’t open two tabs: Tab 1 and Tab 2): results shrinking picture results

Conclusion: Unfortunately the service modifies picture quality and in this case we cannot use it.

Resizing image with (free)

We uploaded picture and chose new size 596(width), rest are defaults(quality: 80 and sharpen: 40). Resulting image has 98,304 bytes(and quality remained the same. You can check that here(if browser doesn’t open two tabs: Tab 1 and Tab 2) )

Resize Pictures
Resized image with the help of

Conclusion: A very good result, we shrank picture with over 40% at the same quality. This one we can use, they also have an API but they lack batch resizing option.

Resize Pictures with the help of and (both free)

At Shrinkpictures we chose custom 894 and best quality, default to rest of settings. We ended up with a picture at 102,400 bytes. At pixizer we chose at advanced 596 keeping the aspect ratio and 100 quality. Resulting image has 286,720 bytes
First site results are available here(if browser doesn’t open two tabs: Tab 1 and Tab 2) and second here(if browser doesn’t open two tabs: Tab 1 and Tab 2)

Conclusion: Both sites are changing colour brightness at maximum quality. This doesn’t mean you cannot use their services for other pictures.

Resize pictures with Irfan View (Free offline program)

We chose Resize/Resample, 596×894, at filter we select Lanczos than ok. After that file, save as(quality 100) and we checked also “try to save with original JPG quality(estimation)”. Resulting picture has 155,648 bytes(Unfortunately same problem, picture quality isn’t the same. Check here(if browser doesn’t open two tabs: Tab 1 and Tab 2)

irfan view resize
Resizing pictures with irfan view

– Same results with RIOT(Radical Image Optimization Tool – plugin for irfan veiw).

Conclusion: Irfan View has many years of experience in picture handling and it’s a very good software. You can achieve much better results after changing other settings. For this tutorial we left default settings.

Resize pictures with GIMP (GNU Image Manipulation Program – free and offline)

Image,scale image,596×894 algorithm Lanczos 3, after that file, export as and at quality 93. We didn’t mess with advanced options. Resulting image is 155,648 bytes and quality is the same as original. ( you can check here.)(if browser doesn’t open two tabs: Tab 1 and Tab 2)

resize pictures with gimp
resulting resized picture

Conclusion: Gimp is a very good program that can be used offline and keeps image quality. Resulting image has less bytes than original

We tested some on-line services that we found as per this search, we aren’t affiliated with any of the tested services or programs. Just because we didn’t get the expected results doesn’t mean you won’t. As per our tests for image resizing, we can recommend you the following:
1. GIMP – Works offline

Problem gets more difficult when we have to resize multiple pictures(batch resizing). Our solution:

For those that don’t have time reading all, we made a videoclip:

You need to check out part 2 of this tutorial about how to optimize the resized pictures.

What do you use for resizing and how? Share with us in comments

Last modified: August 28, 2017