I have a jpeg of a logo that is 2000 x 523px with a resolution of 198dpi. I need to resize it to use on the web to a size of 440px x 115px. When I do this the sharpness is totally lost. I tried converting the image to a vector and then resizing it, but this was even worse. Can anyone tell me how I should do this. Many thanks.
What are you using to resize the software?
I’m assuming Photoshop?
Basically when you’re resizing a jpeg in Photoshop, it’s trying to squish information into a smaller space, so the best thing to do (if at all possible) is to get a vector based version (i.e. illustraor file) so you can resize it freely.
When I resized the jpeg, I used Paintshop Pro. This didn’t work so I converted the jpeg online to an svg image. I then opened it in Gimp and resized it but it looked blurry. I don’t have illustrator unfortunately.
How was the original logo created?
I assume you haven’t got Photoshop either?
Photoshop can usually produce some pretty good results when shrinking (but there will always be some quality loss at that size).
Can you get an Illustrator version of the logo? If so I can resize it for you.
I don’t have Photoshop, but I have managed to download a trial version of Illustrator. I tried resizing, but again the quality is really pretty bad when it goes down to 440 x 115px. I have attached the original jpeg. I also tried converting it to an illustrator file and have attached that as well. I don’t know how the original logo was created as it belongs to a client who had their logo designed for them. This is the only file she sent. It may just be that I have to start from scratch, but I am trying to avoid this.
Converting from a jpeg into Illustrator isn’t really of much help as it doesn’t contain the mathematical information needed by vector programs like that.
I’m at work at the moment, so I can’t look at it in Photoshop or Illustrator, but will as soon as I get home either today or tomorrow night. I tried using the software I have at work but it’s not the best and didn’t provide a sharp result.
Should we need to re-create the logo that won’t be a problem. I have already found the font that was used here.
Does anyone else have any ideas?
I’ve resized the banner to 440px x 115px using Photshop Elements and it looks sharp and fine to me. But then my eyes are probably much older than yours 
The resizing algorithm and compression could be played with a bit if the attached image is not good enough.
If you click the attached image’s link while it is pending approval, it should still open in a new browser window from which you can down load it if you wish (it worked in another thread earlier this morning)
If you’re using paint shop pro, resize it with the optimization set to “smart resize”, then do a SHOCK sharpen pass after you resize it to regain detail. As to converting to vector, automatic conversions SUCK, you’d have to redraw it manually as a vector, and even then your target size may simply be too small. You may flat out be trying to resize it smaller than it’s detail/design allows and you may have to hand-retouch it to get that size… I’ll grab that zip and see what I think…
Oh yeah, vector or not you aren’t going to resize lines that thin down that small without losing INTENSITY – the average line-width is 4px (well, 5, except it’s badly aliased because it’s not hammered into pixel boundaries) – and you’re trying to shrink it 4.5x, that’s just not a practical design to resize that way without some… changes.
Lemme see… max blur, level adjust to turn all anti-aliasing into solid pixels… double image size, blur again, flood out solids, soften… redo the colored part with floodfill again… and resize to 440px… and bingo.
By repeatedly blurring and using the level adjustment to turn the blurred pixels a solid color, it makes the lines ‘thicker’ before the resize. A flood-fill or two further thickens the lines and lets you set the color back “proper” after the level screws it up. Once the lines are thick enough, the risize goes off without a hitch.
Basically the original wasn’t viable for a resize… so it needed a little prep-work first. I’ve been seeing that more and more with designs – artists making images that generally need some work to even come close to being web deployable… this one was at least workable… I’ve been seeing far, far worse lately on that front.
Oh, and given the low color depth and line-art nature, JPEG would be the last file format I’d use as artifacting would be VERY noticable when combined with meaninful compression levels – a 128 color PNG has no noticeable loss and comes in under 5k for it. I would also suggest trimming away the excess space around it 
… and aspect correct would be 112 tall, not 115
Just got a suggestion via IM that I explain what I meant by the image being 4px (or 3 full + 2 aliased) and the 4.5x reduction being incompatible. Take the capitol T’s stem horizontally - it’s 1px of grey, 3px of solid and 1px of grey because it’s not on the pixel alignment – generally speaking that’s a 4px section.
4px divided by 4.5 (2000/440) is less than one, and you can’t have less than one pixel, so you’ll get grey instead of white on the stem (trying to simulate being narrower than one px) – it not being on alignment with the greys means an even muddier grey – but then on the intersections you’ll get a fullbright ‘dot’. Resizing algorythms are good, but as a rule of thumb they tend to botch sizing smaller than 1px on line-art.
Which is why my method for fixing it was basically to blur and floodfill making the lines wide enough to resize without that problem.
I’m not sure what Elements did with Max Heights resize (now that his attachment’s been approved), though I would suspect some sort of auto-filtering algorythm trying to do the same thing – but notice the colors AND character heights are messed up – Typically an indication of an offset bi-cubic or similar filter… Filter artifacts can be a real pain in the tuchas on resizing content… since they can not only create data that wasn’t there (like the E in Catherine being too tall) they can make anything ‘pointy’ end up shorter/smaller (see the upper loop on the J)… though it’s certainly better than what a simple flat bilinear or quadric resize of the original would come up with… which is what Paint Shop Pro does… looking closer at mine I see the slab on that same E is kinda poking down in a similar fashion – resizing, what a pain.
PSP’s approach tries to stay closer to the original file’s intent – looks like Elements tries to preserve legibility at the cost of detail. Much like the microsoft vs. Apple font rendering debate, neither one is likely wrong… though in a lot of cases it’s just not what you want.
The resized image looks fine to me, at least as a starting point. You can always play with filters/adjustments a bit more to adjust colours or whatever, but I’m not going to spend time doing that now, especially without knowing how much flexibilty the op has with quality.
I just wanted to show you can very quickly and easily get an optimised image that is at least useable, well for me at least 
Oh, agreed. A simple color match (area colorize) and tweak of the character heights wouldn’t take any longer than the prep-work I did before resizing… I did pre-processing, yours just needs post-processing – 6 of 1, half dozen of the other.
Thanks so much everyone for your answers. I have learned loads. Yes, the resized images look great, but the dialogue has been really interesting and I now understand why it didn’t resize properly so thanks all for taking the time to explain. I’ll have a play with Paintshop Pro so that if this happens again I’ll be confident in adjusting the image. Can anyone recommend a good book that would teach me more about how to manipulate images in this way?
Once again thanks, I had been messing about with this image for ages before I posted here, with little success
DS60 is on a roll and it doesn’t even involve code!
Some points:
-
Some logos are POORLY DESIGNED and will just reproduce poorly in low detail. I don’t entirely think that is case here, but just like fonts, detail will always be lost in reduction and some of that detail may vital to the design. This mean even if you have the original vector work, the design itself may reduce poorly for many reasons ( thin lines, poorly modulated lines, too much detail to name just a few) It may be, especially after you have developed a brand, just something you may have to live with.
-
Somewhat outdated point CRTs were more forgiving than LED/digital monitors.
-
Sharpening… but not over sharpening might help a bit
-
FINALLY, Photoshop tip: When reducing an image, click “resample” and select bicubic ( if the image contains lots of gradient or detail) OR Bicubic sharper and you will get improved results.
With a FEW sharpening and slider tricks (no flood fills and watching out to preserve color fidelity)…
I hope that helps.