Re-sizing images

[Rhys1234567890]

What platform do you use and why? I just ran a Google 'Test my site' report and it says I need to re-size images and it's sent me a link to image magic, but I can't understand what it's on about! Any suggestions for the best way to do this? Pretty much all the images are currently in JPEG format.

[ergophobe]

I use Photoshop for manually optimizing whenever possible - algorithmic methods are still relatively dumb.

Other than that, I've used ImageMagick and GD, but there has to be more sophisticated options out there now.

[topr8]

i use photoshop for resizing images too, i have some images that i fine tune individually, othertimes i batch process folders of images ... in this case i check the sizes and redo individual pictures if they do not end up within the size range i was expecting with the batch process.

the reason i use photoshop is that i've learnt how to use it for optimising images ... like with any software, experience and practice produces better results.
additionally it generally produces great results with batch processing ... i would say that nearly all images i work with are photos or artwork that is photographic in style (eg. not big blocks of solid colour) and are suited to the jpeg format.

i probably go further than most webmasters, as i generally produce 4 versions of each image ... in different sizes, which i serve to different devices and/or to different viewport sizes ... partly i do this server side (deciding which image to serve based on knowledge or assumptions made about the device used to request the page) and partly client side by using <picture>

personally i don't bother too much with what google or any other website says about my site speed and optimisation .... i've been focusing on serving pages as fast as possible as my main priority since 1999.

[lucy24]

Rhys, are you asking about utilities that dynamically resize images so each visitor gets a size optimized for their device--or about creating your own fixed-size image files in the first place?

I don't think a lot of people buy photoshop purely for resizing. Either you already own it, or you don't. On the Mac I use GraphicConverter, which started out as what the name says--a utility that converts any graphic format into any other graphic format--and has grown into a sort of low-budget Photoshop, adequate for my purposes.

If everything is going to be in the same format, JPG is probably your best bet, so stick with it. For line drawings (I'm thinking mainly of ebooks here) I save as 16-color PNG, which leads to a much smaller filesize and allows transparency that even elderly MSIE browsers can handle. Never, ever use PNG for full-color images, except in the rare case where you absolutely have to have an alpha channel; they're simply enormous. (Personally I almost always cheat by making JPGs with background set to the same explicit color as the current page.)

I once snooped into a website whose images took implausibly long to load up, and found they were using multi-megabyte BMPs (I am not making this up) which, to make matters worse, weren't even the size specified in the HTML, but vastly larger, as if the site designer didn't know how to resize images at all.

[tangor]

Determine the size (physical) you will need for the customer/visitor. That becomes your average "max" size. 32bit jpg i s rarely needed for web use, thus 16bit, 8bit options are better for size (physical, not the pixelsxpixels!). If a black and white image will do the job use that instead, and in that case look to gif as an alternative.

There are a number of free programs which can do this for Win, Mac, or Linux ... shop around in that regard.

I do photoshop for image creation/manipulation, but use a commercial (though there is a free to try version as well) called ThumbsUp which has great tools for creating web based imaging, resizing, color depth and will do it in batch mode (and create gallery thumbnails and gallery pages if desired). There are other products which do the same, some free, some free to try, some shareware, some commercial.

But if g sent you a message and a suggestion, take it to heart. They do not often do this.... though in this case they want the smallest image (computer bytes, not color bits).

You can manage the color depth, dpi, all kinds of things that provide the best image v filesize with these graphic programs. The bandwidth YOU save is a definite plus.

Example, I offer "full color" (web safe 236 color) images that measure 26 x 42 INCHES (not pixels ... dpi 96) and the filesize is between 500k to 1.2mb. REALLY HUGE.Unoptimized filesizes between 12mb and 35mb. Conversely, what I use on web pages might be "large" at 1920x1080pixels and the file size is as small as 32k, averaging about 100k. Unoptimized, the images range from 5mb to 12mb and that's a lot of bandwidth!

[ergophobe]

>>But if g sent you a message and a suggestion, take it to heart.

I believe this was just a Pagespeed recommendation he's talking about. They are often ridiculous as you know (like they often flag Google products if you use Google Analytics or what have you). They're image recs can make sense, but half time time they're asking you to shave 32 bytes off an icon. Just foolishness in many cases.

[piatkow]

I use Irfanview for basic resizing, cropping and (for print) occasionally converting to greyscale.

It is a common beginners error to upload photos exactly as produced by the camera which will usually be defaulting to something well over a megabyte each. Conversely, as editor of a print magazine, I also get sent graphics resized for the web which people then expect to have reproduced as a high quality half or full page image.

[robzilla]

Photoshop for manual image processing, combined with a compression tool like PNGGauntlet. For automated processing, I use ImageMagick for editing (like resizing and cropping) and a number of other CLI tools for compression and optimization, such as pngout and cwebp. Similar tools are available for the most common image types.

If you're heavy on JPEGs, this may be interesting:
Announcing Guetzli: A New Open Source JPEG Encoder [research.googleblog.com]

...we’re excited to announce Guetzli, a new open source algorithm that creates high quality JPEG images with file sizes 35% smaller than currently available methods, enabling webmasters to create webpages that can load faster and use even less data.

[ergophobe]

I also get sent graphics resized for the web which people then expect to have reproduced as a high quality half or full page image.

"I have a big monitor and it looks fine at 6x9 on my monitor. Why are you being so difficult about just printing it at that size. This isn't complicated. Inches are inches." ;-)

Actually, the one that I get a lot is:

Them: "I need a high-resolution image for a web page. Please make sure to save it at 300DPI."

Me: "Uh, what size do you need?"

Them: "I just told you. 300DPI."

Me: [en.wikipedia.org...]

[Rhys1234567890]

Hey all, thanks for the responses. *Lucy, I'm just talking about re-sizing the one image for all devices*

The bulk of our images are 300x200 or 600x400, so I just want to reduce the file size without losing quality. To be honest, I'm just looking for small gains here in terms of page speed and thus, SEO.

At the moment, I've been using PicMonkey to reduce file size and actually found it rather good. May try photoshop based on people's feedback, but I'm reluctant to lose image quality or reduce the actual size of the image, just want to reduce the file size.

[keyplyr]

I have been using GMP [gimp.org] for years. Free, open-source image software. Photo Shop without the bloat (or the hefty price.) I love it.

[surya_kumar]

There are so many tools preferably Photoshop, pixlr and smallseoimage resizer. these works good.

[Rhys1234567890]

Sorry, just so I'm clear, are people reducing the image size, or merely the file size? I'd ideally like to reduce the file size to make it quicker to load, without reducing the image size too dramatically. If so, can someone explain how this is done in Photoshop? All the online tutorials seem to direct me towards making the image smaller, which isn't what I'm after. Cheers!

[not2easy]

There are tools for Mac like ImageOptim that I use all the time, I just downloaded a beta version [imageoptim.com] that offers lossy conversion that can help with png or gif animations - haven't even unzipped it yet. The creator is engineer Kornel Lesinski* and he offers api to convert images on your server [imageoptim.com] according to your size and quality settings. It does the best job I've seen on preserving image and color quality while creating a smaller file size of images. His site shows demos, the Mac app is free and it is free to try the api on your server.

The new beta includes the Google Guetzli capabilities, so I will be looking at it sometime today (I hope).


*_{(that's an acute 'n' in his surname, can't reproduce it here, sorry)}

[piatkow]

Sorry, just so I'm clear, are people reducing the image size, or merely the file size?

If you reduce the file size them something has to give. If you keep the resolution constant the image size will reduce, if you keep the image size constant the resolution will reduce.

[lucy24]

are people reducing the image size, or merely the file size?

You said at the beginning you normally use jpg. Experiment with compression and see how much you can reduce without significantly affecting visible image quality. I don't know about Photoshop, but GraphicConverter shows you the actual percentage. A 100% jpg is insane; even cutting it down to 95% is a vast reduction in filesize, and each successive 5% is another huge reduction. Go below 80% and you'll generally start seeing the difference onscreen.

It depends, of course, on what kind of picture it is. Something with a lot of sharp edges--such as image-for-text * --doesn't work well in jpg, especially once you start compressing, so for those you're better off going to png. Once you're in png you've got the further option of cutting back to less than 256 colors, which is another big filesize reduction. And then you can edit the color table to hold only the 16 colors you actually use.


* If you do use images-as-text, that's a whole nother discussion. Once you've got several on the same site, it will be size-effective to use embedded fonts instead. (I like to edit the font file to mostly bare-ASCII characters-- the ones that will actually be used in headers-- so the download is more like 40k instead of 200k.) Unless, of course, a substantial part of your audience is using an elderly MSIE :(

[Rhys1234567890]

Thanks, Lucy. Is this the Graphic Converter you're on about? [graphic-converter.net...]

[engine]

Let me just add, Google's test ought to be taken with a pinch of salt. If you reduce the image quality too much it'll look awful, which will be a bad user experience. By all means, optimise the file size (not image size), but don't upload bigger images sizes than required.

If you really want to comply with Google's suggestions for mobile, then consider going with AMP pages, which are, essentially, super-cut down pages.

I often use Gimp.

[lucy24]

Is this the Graphic Converter you're on about?

Yes. I haven't upgraded in a while (different story) so I didn't even realize it existed in a non-Mac version.

If you're in the market for a new program, do take advantage of free trials and demo periods, and try everything you can lay your hands on.

[Rhys1234567890]

Yeah I'm tempted by the AMP project, but I work in higher education and things move very slowly in this sector (plus, I've read mixed reports about AMP and its effectiveness).

Presumably, this is the Gimp website to which you referred? [gimp.org...]

My image sizes are pretty standard, 300x240, but I'm wondering whether the file size is too big, so hopefully Gimp or Graphic Converter will help me reduce the file size and therefore, load time.

[engine]

AMP was primarily for news-type sites, but many more people have jumped on the bandwagon to get the SERPs listing and the hope of a good rank. AMP is not for everyone, imho.

That's the Gimp site, yes.

[smallcompany]

TinyPNG

Very good for PNGs, as many times we need a transparent background, so JPG is not an easy option. For JPGs, sometimes it's able to reduce it further, sometimes it's not.

[csdude55]

Since we're talking about a graphic editor for webmaster use, and NOT a server plug-in...

I still have a copy of Paintshop Pro 4.12, and I wouldn't trade it for anything! The entire program would fit on a floppy disk (remember those?), and I used to carry it around in my laptop in case I needed to do something fast on a different computer. I love this little program :-)

I also keep OptiPNG, PNGoo, and IrfanView handy for different purposes, but I use PSP4 daily.

[tangor]

Thanks for the memories! (There were a slew of fun graphics programs mid-1980s to 1993 that were just so kewl! :)

Of course, back then, 320x200 was a MASSIVE image, usually 8 to 16 color .... and when it went to 64 colors it was the cat's pajamas!

Odd thing is, those kind of images are STILL valid, only this time around they are sweet for making g's speed tests scream lickety split!