Logo Looks A Little Fuzzy and Mottled

I have a logo on my Master Page that was imported by creating a graphic box and importing a jpg. It looks a little fuzzier than the real logo and it even has a mottled look as though it sat in a puddle overnight and was left to dry out. (I know, strange description, but I can’t think of any other way to describe it.)

I’ve tried other formats for the logo and even tried creating the logo at exactly the size it was going to be on the web page.

Any thoughts on why this one graphic image doesn’t look good?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Sometime around 5/3/08 (at 20:59 -0500) Jamie Turner said:

I’ve tried other formats for the logo and even tried creating the
logo at exactly the size it was going to be on the web page.

Two good things to do: don’t use JPEG for your original formats if
you have a choice, and scale elsewhere for the absolute best in
crispness.

Any thoughts on why this one graphic image doesn’t look good?

Because it is being output as a JPEG rather than a GIF, and it is a
flat, crisp-edged graphic that doesn’t suit the JPEG format? It would
help if you could give a URL where we could see the problem
first-hand…

k


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

You could try this. If you select the item and go to the Inspector
palette and look at the Output Options section (little window icon)
there is the option to change formats. Select PNG and change colours
to Millions. Freeway then creates a better looking image when it
publishes the site. I think you are seeing JPEG artefacts that give
it the bedraggled look.

Cheers
Pete

On 6 Mar 2008, at 01:59, Jamie Turner wrote:

I have a logo on my Master Page that was imported by creating a
graphic box and importing a jpg. It looks a little fuzzier than the
real logo and it even has a mottled look as though it sat in a
puddle overnight and was left to dry out. (I know, strange
description, but I can’t think of any other way to describe it.)

I’ve tried other formats for the logo and even tried creating the
logo at exactly the size it was going to be on the web page.

Any thoughts on why this one graphic image doesn’t look good?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Problem solved! Thank you all, especially Pete who seemed to know the solution. Plus, he used the word “bedraggled” which is even better than “mottled.”

:wink:

Thanks for you help!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Sometime around 6/3/08 (at 08:21 -0500) Jamie Turner said:

Problem solved! Thank you all, especially Pete who seemed to know
the solution. Plus, he used the word “bedraggled” which is even
better than “mottled.”

That is a particularly good word for it. :slight_smile:

But I’d still like to see the graphic in question. PNG files can be
noticably large, and it may be that a nice, compact GIF would suit
the image just as well. Perhaps.

k


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

PNG-8 files can be quite compact as well. PNG-24 is huge, though it
offers graphic possibilities impossible in any other Web format.
Mmmmmmm! Tasty transparent drop shadows!

Walter

On Mar 6, 2008, at 9:11 AM, Keith Martin wrote:

Sometime around 6/3/08 (at 08:21 -0500) Jamie Turner said:

Problem solved! Thank you all, especially Pete who seemed to know
the solution. Plus, he used the word “bedraggled” which is even
better than “mottled.”

That is a particularly good word for it. :slight_smile:

But I’d still like to see the graphic in question. PNG files can be
noticably large, and it may be that a nice, compact GIF would suit
the image just as well. Perhaps.

k


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi, Guys –

The logo graphic can be seen at www.60SecondMarketer.com. The site hasn’t officially launched yet, so all the links don’t work, but you’ll be able to see the logo (in all it’s crisp, clear, re-birthed glory) in the upper left hand side of the home page.

Any additional comments or suggestions – about the logo or the usability of the site – are welcome.

Thanks,
Jamie


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

That logo is just screaming out for 8-bit glory. Either PNG-8 or GIF.
EIther one will probably go down to a handful of colors including
anti-aliasing, and your total file size ought to be measurable in
bytes (as opposed to kilobytes).

Walter

On Mar 6, 2008, at 10:01 AM, Jamie Turner wrote:

Hi, Guys –

The logo graphic can be seen at www.60SecondMarketer.com. The site
hasn’t officially launched yet, so all the links don’t work, but
you’ll be able to see the logo (in all it’s crisp, clear, re-
birthed glory) in the upper left hand side of the home page.

Any additional comments or suggestions – about the logo or the
usability of the site – are welcome.

Thanks,
Jamie


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Excellent advice, Walter. Done.

Two things:

  1. What is anti-aliasing?
  2. Are you the Walter who created the Carousel action? If so, I’m dying to add that to this site, once I’ve got a gazzillion other things finished. Once I do, I’ll re-visit your site and make a donation. It’s the coolest action around.

Thanks,
Jamie


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Anti-aliasing is the way that curved or angled lines get to appear
smooth in a low resolution bitmap environment. A computer screen has
a very limited number of relatively large pixels to work with,
compared with ink on paper or a high resolution laser printer. The
only objects that appear perfectly sharp in that environment are
those that fit exactly into the checkerboard grid of pixels.

In order to create curves and angles that don’t look like staircases,
anti-aliasing algorithms “fill in” the edges of non-square with
computed average colors. So if the figure color was black, and the
background was pink, then the edges of a curve on the figure would be
filled in with various flavors of dusty rose. This is only noticeable
if you zoom way in on the image. But on screen, this (ironically)
blurry edge looks sharper and cleaner than an aliased (stair-stepped)
version of the same image.

Yes, that’s me. Thanks (blush, digs toe) for the compliments. I
didn’t write the underlying JavaScript, I just made it work with
Freeway. All the heavy lifting was done by Prototype and
Scriptaculous, and the Glider.js implementation is by Bruno
Bornsztein http://missingmethod.com.

Walter

On Mar 6, 2008, at 10:28 AM, Jamie Turner wrote:

Excellent advice, Walter. Done.

Two things:

  1. What is anti-aliasing?
  2. Are you the Walter who created the Carousel action? If so, I’m
    dying to add that to this site, once I’ve got a gazzillion other
    things finished. Once I do, I’ll re-visit your site and make a
    donation. It’s the coolest action around.

Thanks,
Jamie


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

That’s exactly how I discovered the benefits of PNG in Freeway -
sorting out good looking drop shadows. As you say - Mmmmmm.

But there is the vexed question of file size and how it affects
performance. Until the middle of last year, living as i do in a rural
area, I was limited to 28k dialup so could appreciate the performance
hit and slow loading that graphic files produced. Painful at times.
The real tortoise is Flash though. Really bogs down a slow
connection. Video? forget it. Now the village has been connected (Dr
British Telecom, I presume) and I’m on a broadband feed that delivers
actual 2-3mb speeds all that is behind me. Which is nice.

What I would be interested to know is if there are statistics
available for how many people are still using really slow dialup and
wether there is any lower standard to cater for? During our campaign
for BB it was clear that we were in one of the last areas in the UK
to get ADSL enabled, and using ancient line splitting technology, so
i figured that most people would generally be getting better speeds
even on dialup and could tolerate slightly larger file sizes. It was
also clear that designers, once on broadband, have short memories and
are understandably generally eager to load sites with whizzy effects
to take advantage of the extra speed. How long does one allow for the
lowest common denominator?

The question also applies in regard to page sizing where it is felt
that 800x600 is a good minimum size but a few years ago 640x480 would
have seemed polite to allow for older monitors. Presumably, as people
upgrade, the number of slow connections/small monitors get to a point
where one has to ignore the shrinking number of performance impaired
users and aim for the new middle ground. Or is this akin to
discrimination on technology grounds and worthy of a duffing up by
the accessibility crowd?

Pete

On 6 Mar 2008, at 14:20, Walter Lee Davis wrote:

PNG-8 files can be quite compact as well. PNG-24 is huge, though it
offers graphic possibilities impossible in any other Web format.
Mmmmmmm! Tasty transparent drop shadows!

Walter

On Mar 6, 2008, at 9:11 AM, Keith Martin wrote:

Sometime around 6/3/08 (at 08:21 -0500) Jamie Turner said:

Problem solved! Thank you all, especially Pete who seemed to know
the solution. Plus, he used the word “bedraggled” which is even
better than “mottled.”

That is a particularly good word for it. :slight_smile:

But I’d still like to see the graphic in question. PNG files can be
noticably large, and it may be that a nice, compact GIF would suit
the image just as well. Perhaps.

k


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Sometime around 6/3/08 (at 10:01 -0500) Jamie Turner said:

Hi, Guys –

The logo graphic can be seen at www.60SecondMarketer.com. The site
hasn’t officially launched yet, so all the links don’t work, but
you’ll be able to see the logo (in all it’s crisp, clear, re-birthed
glory) in the upper left hand side of the home page.

Aha! That is a perfect candidate for the GIF format.

JPEG is well suited to photos and other graphics with soft gradients
and complex, subtle changes in hue and tone. It is pretty bad at
handling graphics with flat colours and crisp, sharp edges.

GIF is limited to a maximum of 256 colours, tops. It also uses
compression techniques that work best with runs of pixels of the same
colour, not subtle variations all the time. This means it is ideally
suited to crisp flat-colour logos - and not to photos of complex
scenes with subtle tone variations.

Freeway automatically sets imported graphics to a particular output
format based on their colour depth; 24-bit colour images are assumed
to be suitable for JPEG, and 8-bit (256 colour) or less images are
assumed to be best suited to GIF. This works probably 99% of the
time, but sometimes - as with your image example - it doesn’t come up
with the best automatic option.

As you’ve found, all you have to do is change the output format in
the Inspector palette. Try using GIF. First, turn on Graphic Preview
in the View menu. This renders the output format right there in the
page, letting you see how it will look AND showing the output file
size for the selected graphic in the Inspector palette. Try switching
between formats to see which looks best and gives the smallest size.

k


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks for all the advice, guys! I appreciate it.

– Jamie


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Try clicking on the graphic and then going to the inspector panel and click on the 3rd tab at the top and turn the quality up to 100%.
Fergus
http://www.lynardrie.co.uk


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options