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: Original picture: quality,size and dimensions
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)
-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 imageoptimizer.net
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):
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 picresize.com (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):
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 simpleimageresizer.com (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).
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 resizemypicture.com (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):
Conclusion: Unfortunately the service modifies picture quality and in this case we cannot use it.
Resizing image with webresizer.com (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) )
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 shrinkpictures.com and pixizer.com (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)
– 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)
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:
First of all we choose to use GIMP because it can be used offline. You’ll need an add-on from here
If you are on windows, search the windows version. The ideea is simple you can copy dbp.exe in your gimp plugin directory. Ours is somewhere at ..gimp\lib\gimp\2.0\plug-ins, if you don’t know where it is you can find it in GIMP at Edit/Preferences/Folders/Plug-ins
After that you goto filters, batch process. From there you can add as many images as you like. You can check the box at resize tab and enter the wanted dimensions.
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