max-width blury

Report · Apr 01, 2020

I've just recently changed my entire 490,000+ page site to a responsive web design. In Dreamweaver, I use a vertical split, code-design view. On the design side, the images are now blurry. Here is an example:

The code I'm using for the img:

The actual size of the image is 13x13, but as you can see it is displaying in the design view blurry.

Any ideas why / how to fix? If I remove the max-width line completely, same thing, blurry image.

Sean

Report · Apr 01, 2020

Something else in your code is allowing your images to be displayed much larger than 13x13 pixels, causing major pixelization.

Could you share a link to your page online so we could take a look?

Report · Apr 01, 2020

That particular page, that I was using as an example, is here:

Mitchell Report

Sean

Report · Apr 01, 2020

I'm seeing the correct size in the browsers, but your page does have a fair number of errors that should be cleaned up to ensure all browsers see it as intended. Run your pages through the validators at...

HTML: https://validator.w3.org/nu/

CSS: https://jigsaw.w3.org/css-validator/

...and repair the listed problems. That will at least make sure you have the most consistent experience possible for your viewers. As for DW's Design View, sometimes it just won't display correctly, especially when you use old html attributes and css to control the layout and styles of a page.

Report · Apr 01, 2020

Thank you Jon,

Yes, I tested it on a dev server for a month. I knew it was displaying correctly on all browsers, tablets, and modern smartphones. Just annoyed the heck out of me that when I work on it in Dreamweaver, it looks ridiculous. Nearly every image on every page is like that as well.

I figured since CSS is not my strong suit, I might have been missing an easy solution. Heck, I'm not even great with Dreamweaver, I just manage to struggle through it, since 1999!

That is why you saw those errors. I literally, two weeks ago, converted 490,000+ pages from an old school table based site that was using a fake mobile solution, to that responsive design (which I started working on back in October). When I get the bugs worked out on the pages and databases this month, I'll go back and get that CSS as perfect as possible.

Until then, will just keep working with horribly out of focus images that display as intended, and worked before in DW, but not anymore. LOL

Sean

Report · Apr 01, 2020

I think you should use Font Awesome icons instead of that GIF. The quality will be much better on all devices.

Font Awesome icons

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Font Awesome Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Font Awesome-->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<style>
i {color:green}
</style>
</head>
<body>
<h3>This is a Font Awesome Checkmark</h3>
<p>No pixelation at any size</p>
<p><i class="fa fa-5x fa-check"></i></p>
<p><i class="fa fa-4x fa-check"></i></p>
<p><i class="fa fa-3x fa-check"></i></p>
<p><i class="fa fa-2x fa-check"></i></p>
<p><i class="fa fa-sm fa-check"></i></p>
<p><a href="https://fontawesome.com/v4.7.0/cheatsheet/">Font Awesome Cheat Sheet</a></p>
</body>
</html>

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Apr 01, 2020

Font Awesome icons instead of raster images. No pixelation at any size.

Font Awesome icons

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Font Awesome Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Font Awesome-->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<style>
i {color:green}
</style>
</head>

<body>
<h3>These are Font Awesome Icons.</h3><p>No pixelation at any size</p>
<p><i class="fa fa-5x fa-check"></i></p>
<p><i class="fa fa-4x fa-check"></i></p>
<p><i class="fa fa-3x fa-check"></i></p>
<p><i class="fa fa-2x fa-check"></i></p>
<p><i class="fa fa-sm fa-check"></i></p>
<p><a href="https://fontawesome.com/v4.7.0/cheatsheet/">Font Awesome Cheat Sheet</a></p>
</body>
</html>

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Apr 10, 2020

Those are really cool Nancy, but it isn't just checkmarks, its almost ALL the images on ALL the pages inside of Dreamweaver that I use. The checkmark one was just a sample. The baseball at the bottom of every single page (490,000 of them) even displays stretched out oddly inside of DW, but the typewriter on the top of every single page, displays perfectly...

Report · Apr 10, 2020

A very low resolution GIF will look blurry when your display magnification is greater than 100%. In contrast, the higher resolution PNG maintains a decent appearance because it contains more pixels to begin with.

Revert your display settings to normal magnification level.

In DW, go to View > Design View Options > Magnification > 100% [Ctrl + 0 (zero)].

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Apr 10, 2020

Not that either. It's on virtually EVERY image. HUGE ones. Tiny ones. I've never switched the Magnification in DW. I think it has something to do with the css, it NEVER did this before, not on a single image, but now that I've put in a ton of styles, I get the distorted view:

Now, here is a screenshot of the old site, same are in designer, no CSS in place, just good old fashioned html:

Checkmarks, in DW, look perfectly fine.

Report · Apr 10, 2020

You can find out if the distortion is caused by your CSS simply enough.

Go to View > Design View Options > Style Rendering > disable Display Styles.

Incidentally, this has no effect on Live view, Real-Time Preview or Preview in Browser.

BTW, fix your code errors. You still have quite a few in your HTML and CSS.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Apr 10, 2020

Did what you suggested:

Go to View > Design View Options > Style Rendering > disable Display Styles

Checkmark displays perfectly fine. So it is in the style sheet. The code for that are:

And in my style sheet I have:

.datacolBox { vertical-align: middle; padding: 4px; font-size: smaller; border-color: black; border-style: solid; border-width: 1px; }

Any ideas?

Sean

PS: The site was built back in 1999. Updated every day since. Lots of evolution there by a guy with twenty years plugging away with various tools. So it does have lots of errors. I'll be fixing some of those errors soon, just takes time, I've got a half million pages...

Report · Apr 10, 2020

You have conflicting styles in your stylesheet which is at the source of your problem. See screenshot from Firefox Inspect Element (F12).

Width: 100% is grossly distorting low res images. Change width to max-width or remove that style entirely.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Apr 11, 2020

Switched to max-width, every single image "fixed" itself inside of DW. So much easier to work now. Just a few more thousand errors to get corrected now!

Thank you VERY MUCH Nancy.

Sean

max-width blury

1 Correct answer