Web/graphic design: How to get sharpest, text-based image when resized?

Factual Questions
1

I’m helping a client redesign his website and he’s kinda driving me crazy. (It’s one of those jobs that started out “oh just add new content” and has turned into one of those “redesign the entire look and feel of the site, but for the same amount of money” deals.)

We’re using Wordpress as the backend, based on a Genesis-based theme. The only reason I mention this is that this particular theme requires a specific logo size. Right now it’s set at 616x100.

I created a super-crisp PNG version of their existing logo at that size. Looked great. However, my client kept saying “It looks blurry!” I was staring at the screen and simply couldn’t see it. Then he explained, “When I increase the size on my browser it gets blurry as it gets bigger!”

Like, duh? If you put a size S sweater on a very large person, you’re gonna see the stitches as they expand.

Regardless, he insisted that I fix it.

Now, I’m an all right web designer and not bad at Photoshop, but I’m not a graphic designer and right now I’m both frazzled and under-the-weather, and seem to have forgotten everything I knew about image design for the web.

I tried starting with an image 2x the size (1232x200) at 300ppi (not that ppi really matters when on the web, but whatever, I took a shot), and making sure the image was crisp at that size. Then I resized it down to the proper 616x100, saved it as PNG, and uploaded.

No difference, acc. to client.

Next I went the same route but didn’t resize it in PS… I decided to see what happens if I let Wordpress force the resizing.

That made it worse.

I’m losing my patience. What is the Best Practice for getting an image to look as sharp as possible within reason in this situation? I don’t see swapping images via the code as a solution since the guy’s just increasing his browser size (or, possibly, using his fingers to expand the site on his cellphone screen).

Help!

2

Most modern browsers support scalable vector graphics. Try presenting it as SVG.

3

Ooh. Right. Thanks! Is SVG safe? I guess if I’m the one creating it, it can’t be exploited, right? (I’m sorry if this is a dumb question… my excuse is that I’m on cold meds.)

4

Yes, I’m not aware of any security risks with that file format and it will do exactly what you want.

5

Just wanted to thank you both so much! The SVG looks fantastic and now I want to redo each text logo I’ve ever made in that format, then hug it and squeeze it and call it George!

Atamasama, the reason I was worried about the exploit issue is that there have been some issues reported, in that since the format is basically a document file/script/css, uploading one to your site–particularly, one you didn’t make yourself and thus know its origins–could result in some nefarious script being executed on download.

Mostly a problem for admins who allow general users to upload images to their sites (perhaps in blog comments or message boards) or even staffers who might just gank images from any old place to upload to their articles.

Here are a few posts on the issue.

Luckily this isn’t the case with my client; their site is pretty much static, and any images will be linked rather than uploaded (and almost certainly will not be SVGs).

6

The only “safety” issue is not security based but compatibility based. But all modern browsers can handle SVG. Still, if you want to be “safe,” you can always design a PNG backup.

Also, when you do the SVG, do optimize it. I know Inkscape has an “Optimized SVG” option.

7

the *.svg file can be exploited … same as any other format … you are to be commended for being cautious 'n paranoid, choie. web-sites are easy to hack … same for the servers that contain the web-sites. if you wish to set your sights on svg … learn how the exploits are manifested. all it takes is a simple hack to switch clean file with nefarious version. browser compatibility is another issue. acceptance standard yet another.

my thoughts:
no such thing as “same amount of money” … unless you allow customers to walk all over yourself. remain firm yet compliant … make certain the customer is aware that your time-clock is ticking. with their former web-page, the customer started out with a jpg … give them a jpg at 616x100 and be done with it, choie.

as for *.png files … i love 'em. transparencies/translucencies can be preserved. they do not compress ugly/horribly as jpg images do.

with *.gif files … they are fine … though one is dealing with severe color limitations (max of 256 colors).

going back to svg … it’s a wonderful medium … and, for illustrations, they are top notch in my opinion. browser support 'n acceptance are issues that can be dealt with by code. exploits (or, rather, people who create exploits) will always find ways to circumvent 'n sabotage static code.

svg 'n png 'n gif can be animated … i’ve never heard of jpg being animated (except using scripts). then again … svg animation utilizes scripting as well. again … one needs to consider browser compatibility. if going for animation … make the first “frame” with the majority of the design. that way, if the browser cannot handle animation … it may accept the first frame of the animated image.

fwiw … you, as designer, should retain many browsers on your own computer, choie. mie, edge, vivaldi, opera, safari, firefox, chrome, etc. also realize, different versions of each browser can be an inhibiting factor as well. which is why some designers utilize some coding aspects. not specifically tuned to browers … more conditioned toward which “elements, attributes, and behaviors” are accepted. if not … then a jpg will be substituted.

ref:
use filter “svg exploits” in google.

8

Are there any browsers at all that can handle PNG but not SVG? Back when I was a young’un, the options were restricted to just JPEG or GIF, nothing else (though a few noncompliant browsers would also display BMP, if anyone was enough of a fool to put one on a webpage). And it was my understanding that when that list expanded, PNG and SVG were added at the same time.

9

“enough of a fool” … are you referring to browser compatibility or file-size or security threats or design limitations … or something entirely different? i think you probably base that on file-size … because, used to be, we only had dial-up connections. and, when you come right down to it, almost all images are based upon bit-map*(pixels/rasters)principles … except for vectors(e.g..svg files) which rely on mathematical formulas. heck … back in those days (late 90’s) … i relied on *.gif formats exclusively … because i appreciated the transparent backgrounds as well as animation.

google search for .bmp images(logos)*:
google.com/search

image file types:

it should be noted … the above reference is not completely accurate in it’s content. for instance … *.png files are not constrained by only 256 colors … they support millions of colors. another spurious inference is that *.png files cannot be animated. they, in fact, can be manifested into beautiful animations. sadly, only two or three browsers accept *.apng/mng formats.

browser compatibility:

apng software:

10

PNG support came a bit earlier.

IE 7+ has proper PNG + alpha transparency support.
Proper SVG support didn’t come until IE 9+ and it still has some scaling issues. At work we still see about 1% of our users (a few hundred a day) on IE < 9. A while ago we made the decision to stop supporting them and go with SVG and modern JS, but other companies may not have that luxury.

(Click the “show all” button)

11

Probably the biggest downside with SVG is that if you are providing it for a client, you’re sort of handing over the source image - they potentially have the ability to decompose it, alter it etc without asking for your further assistance.

That’s not necessarily a bad thing, but it is a change from raster-based formats.

12

Huh, that’s a bit surprising to me, because unlike PNG (which fills more-or-less the same niche as GIF), SVG has a completely unique set of advantages, and hence makes a better complement to the previously-existing formats.

And yes, file size was the reason I considered BMP use on webpages to be insane. When waiting for the images to download was the bulk of the time spent in loading a page, there was no good excuse for making the images orders of magnitude larger than they needed to be. If you absolutely needed to have a perfect image, then at least use a lossless compression format.

13

It’s probably those same advantages that made it slightly more challenging to implement than PNG. Browsers needed more than just another drop-in image codec that could turn a binary blob into a bitmap, they needed to be able to parse and understand a whole new type of XML, figure out how to position, scale, and layer it (still not a perfect art), how it interacts with JavaScript and CSS, how to handle embeds like fonts and rasters inside SVG, etc. With that power and complexity came the possibility of bugs, and sure enough, it took many, many fixes for SVG to get to a usable state almost a decade later.

14

Actually, svg doesn’t use frames like flash animations (swf) or animated gifs. It’s considered part of HTML5, so any browser that can read HTML5 can handle svg. IIRC, stone age browsers simply don’t read svg, so no image appears.

You can code an svg object to go through several types of animation, one after the other, but it’s a different animal from frame-based animation. There are “key frames,” but they’re CSS properties.

Go to Codepen if you want to see some truly amazing svg animations. I get too jealous when I look at them.

15

Not a lawyer, and not privy to the contract between OP and their client, but since the graphic is a logo the basic design belongs entirely to the client. And I’d be willing to that it’s a work-for-hire situation, so the client already owns all the tangible embodiments (work products) of the contracted work anyway.

And the idea of holding a client hostage by holding back the “source image” is repugnant. But I’m kind of an Free Software bigot, so clearly that’s part of my bias set.

16

It’s not very unusual in any creative venture where there is a distinction between ‘source’ and ‘product’, for the source to be kept under the control of the author. ‘holding hostage’ is only one of a range of reasons why this is done, and sometimes the reasons are purely practical and quite reasonable.

For example, I’ve heard of cases where a designer provided a product along with the source - then some amateur at the organisation had a go at altering it and published horribly mangled versions of the thing, which got into circulation and damaged the standing of the designer with the company (because people assumed the inferior products were part of the paid-for product).

17

But the company can do that with just the product, too. In fact, they’re more likely to do it with just the product, since not having the source prevents them from being able to do the modifications properly.

18

Consider a responsive design.

With a responsive design critical images can be created at a large size and the CSS/HTML/JavaScript dynamically resizes the image to fit the within the page in a given browser window size. There are breakpoints with the code where the page size changes, but the image will just dynamically change.

19

This has the disadvantage of impacting the most vulnerable users the most: people on the smallest screens still have to download the super-high-res version (which can sometimes be hundreds of kilobytes).

That can be remedied with a JavaScript library that actually serves up different versions of the image to different visitors, so that people on slower connections or smaller screens don’t have to download the super high res versions.

CloudFlare’s Mirage service is one easy way to do this:

And they have the additional benefit of globally caching your pre-rendered content, which for wordpress would be a huge speed-up (no need to wait for the Wordpress/PHP engine to render a page; visitors just download the finished HTML). And it’s put on a CDN with edge nodes across the world.

If your client wants a faster website, this is one super easy way to drastically improve performance – regardless of whether you end up using Mirage’s responsive raster images or SVGs.

20

Whoa, sorry to have missed the follow-ups since last we met! Thanks for the interesting info, guys.

First, yeah, I’m notoriously bad at remaining strictly to what is agreed–I always add a little mental overtime to a project when I’m making an estimate; I know my OCDish personality, and in the end, even if I’ve done what the client wants, if it doesn’t work exactly as I think it should, I’m compelled to make sure it’s a good representation of my skill (such as it is–this really isn’t my bailiwick, I mostly earn my daily bread with words).

Also I’m of the school where I like the client feeling as if s/he’s got a leetle bit more than his or her money’s worth. Not enough for them to feel smug or as if they’ve taken advantage of me… just enough for 'em to feel “oh wow, I wasn’t expecting service that good!”

So to that end, I certainly definitely don’t mind giving them the SVG or the source files. I’d be doing so even if I weren’t more than willing for them to find someone else. :smiley: (I really do want to ease out of doing web jobs anyway.) The only times I don’t do that is when I have a long-term, ongoing job with the client and handing over source files for every piddly job is more than they want to deal with.

Spoiler for boring digression:

[spoiler]This turned out to be an absolutely godsend the one time my very very very longtime client underwent a personality change–I’m not exaggerating, I genuinely think he had a mental breakdown, getting paranoid and angry and vitriolic–and refused to pay me $5K for a site revamp I’d done for him until I turned over all source artwork.

Since he had gone so unpredictable and cuckoo-for-Cocoa-Puffs that I had no confidence that he’d pay me once I’d given him the goods, I held back. Fortunately, since we had no tradition of my having turned over the source material automatically, this wasn’t breaking any precedent.

I finally got the money owed when my [del]cousin[/del]* attorney wrote him and reminded the guy that without payment, since I wasn’t an employee, the copyright to all the material still belonged to me. So he could either take down the new website or pay me the frickin’ money owed.

Money sent, and source materials subsequently delivered via flash drive. And end of 12-year business relationship. He’s a crackpot to this day and his business is failing.

  • He’s also a lawyer, to be fair. But I wouldn’t really consider him “my” lawyer, and besides, he focuses on real estate, not intellectual property or contracts. My client didn’t need to know any of that.[/spoiler]

Anyway. Yep, the site is already responsive–can’t imagine I’d ever do a site that wasn’t these days–and the image size problem Reply mentions is exactly what held me back from just creating a massive, gloriously rendered logo to shut the client up already.

Although… waitasec: would calling a second image work when someone is just zooming in on their phone or mobile device? I don’t think that’s how responsive sites work; they don’t adjust on my tablet or phone when I use my fingers to zoom in our out. They do if I go from horizontal to vertical, but zooming does nothing except make the existing layout look bigger. If there’s a way to do that, it’s beyond my technical knowledge.

(Which is why I’m trying to ease out of the business. I know I’m not as up-to-date as I should be, and I don’t like doing things half-assed. Whole ass or nothing, that’s my motto!)

Mirage sounds fantastic, btw. Wow.

Thanks again, everyone! The job is done, I just need to finish up a customized “how to” guide so they can update the basic stuff (change widgets–or even understand what widgets are–upload images, update posts, change fonts, etc.) on their own. Then the invoice goes out and we’re done, yay! I really appreciate your advice and the ongoing discussion.