Solved

Why do these images look blurry?

Posted on 2014-10-04
6
188 Views
Last Modified: 2014-10-09
Head out to http://www.muscularchristianityonline.com. In my carousel, I've got a series of images and they look blurry in some instances. I've tried setting the resolution to 300 dpi, made a point of scrutinizing what the dimensions should be and still, they look "fuzzy" compared to how they appear as I'm making them.

Perhaps it's the effect that makes the difference, but I wanted to run it past some minds greater than my own and tell me what I could try that would result in a sharper image.

Thanks!
0
Comment
Question by:brucegust
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
6 Comments
 
LVL 26

Assisted Solution

by:David Brugge
David Brugge earned 150 total points
ID: 40361764
Doesn't look like any minds greater that yours are going to pick up the challenge, so I'll see what I can contribute with my limited resources.

First of all, all of your images are within acceptable limits for sharpness, but yes, a few are not as crisp looking as the others.  Without know exactly which image we are talking about and without knowing how you were producing them, let me share some general information about graphics for the web.

Image dpi
The misconception that I find to be almost universal has to do with dpi and image sharpness. For the most part, the dpi of an image destined for the web is antiquated information, much like web safe colors. It stems from the days that graphics would be embedded in lines of type. The desktop printers back then didn't try to match the page layout, instead it would reflow the text using the local computer's own fonts, and the graphics would appear wherever they happened within the text. The printer used the dpi to determine what resolution to print the image.

The default size everyone agreed on was 72 dpi, because this was the resolution of most monitors. Printing an image at 72dpi came closest to reproducing what you saw on your monitor.

This is the ONLY time that the dpi is used on a web image. Other than that, it serves no purpose. Whatever you set it to, the web browser will ignore it. Web browsers go strictly by number of pixels. (ignore the fact that you can override the dimensions and make the browser stretch or shrink the image for now).

Okay, got that out of the way. Now how to make sure the image is sharp.

Well, of course start out with a sharp image. It is very rare that a truly blurry image is improved by sharpening.  After that, work on the image at the exact size that it will be viewed at. This is trick nowadays because most graphics are just as likely to be viewed on a phone as a tablet or a HD monitor. This means that you need to look at it at all sizes and adjust accordingly. If your web workflow allows you to make thumbnails, regular size images, and enlarged images all separately, do so and sharpen them each individually. It is always better, if you can, to reduce your image to thumbnail size and then add sharpening instead of the other way around.

Understand anti-aliasing.
You probably know that you can't actually display a curved line on a monitor. You have to make a series of stair steps to approximate a curve. This can leave curved lines looking jaggy no matter how sharp the original image. Because the screen doesn't accurately represent the curve, it is called an alias. To compensate for this, web designers started putting pixels of varying darkness in the corners of these stair steps. When viewed at normal viewing distance, this blurs the edges slightly and blends them into a smooth looking transition. This is antialiasing.

Most modern graphics programs add anti-aliasing to images automatically. However, when working with very small type, the human eye already blurs the edges to make the type legible. When software adds anti-aliasing to small type, it makes the type look blurry. A good example of this is the "inspiration, perspiration, transformation" in your logo. If this text were set with the anti-aliasing turned off, the text would look much smoother. If you are zoomed in while working on the type, it will look awful. It's not until you view it at normal size does it look sharp.

That's all I have to say at the moment. I will wait to see your comments to see if this has been of any help to you. Otherwise, I'll try and answer your question in another way.
0
 
LVL 70

Expert Comment

by:Merete
ID: 40361985
They look good to me, maybe the difference types of images used just shows different textures,
The keys are real? the one with Nicolas Cage look alike is drawn, poster art colours, Billboard is real background, Google earth is a photo and the other is just text on White.
As we look at the different scrolling pictures one is full of colours another white and maybe that second can cause our pupils to alter perception from clear to dots within the drawn images of  Nicolas Cage  poster Art
Our eyes take in different light textures .
They look very nice in Chrome browser on my Samsung Syncmaster
You can try this for fun
How to Invert Your Browser's Colours for Easier Reading at Night
http://lifehacker.com/5912480/how-to-invert-your-browsers-colors-for-easier-reading-at-night
0
 
LVL 4

Accepted Solution

by:
carloselfaite earned 350 total points
ID: 40362356
Your images look blurry because they are being resized, for example: thhis image's 4444444444444444444444444444444444444444 (http://muscularchristianityonline.com/forum/wp-content/uploads/2014/10/leftbehind_featured-725x430.jpg)  original size is 725 x 430, but when it is shown on your carrousel is resized to 1049 x 617, so if you want your images to look wihout any blurry eather you have to adjust your carrousel so the images show equal or smaller than the original size(725 x 430) or make your images bigger (1049 x 617)
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 70

Expert Comment

by:Merete
ID: 40365075
Nice answer carloselfaite.
0
 

Author Comment

by:brucegust
ID: 40366224
Thank you all so much and especially to David - very comprehensive and the info you provided is great.

Carlos... I took a screenshot of the page in order to get the size of the carousel. Your observation is dead on, but how did you figure out the actual size of the carousel? I figured I was deploying a foolproof approach by doing a screenshot and then building my images according to the size of the carousel as it appeared on that screenshot.

Doesn't work that way, I guess...

So how did you determine the size of the carousel?
0
 
LVL 4

Expert Comment

by:carloselfaite
ID: 40366382
to get the original size of the images I cheked the source code of  your web, grab the url of the image and downloaded it;
to check the size of the image resized first i set the webbrowser zoom to default and took a screenshot.
0

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Choosing color palettes 1 121
I want to find a font for a Boxing logo 6 1,376
adobe photoshop cs 5 temp file location move 3 105
Cut out portion of vector image in Illustrator 2 216
Introduction When sharing photos, especially via e-mail, the large resolution images that most cameras take today make for extremely large file sizes. The time required to upload these files to forums, send in e-mails, post to blogs or even placi…
In this article, I'll explain how to change the color of a selection in Photoshop. I'm sure there are a couple different ways to do this in photoshop, but this is my preferred method in Photoshop. I am using Photoshop CS6 and I will be adjusting the…
In this tutorial viewers will learn how to create a vector texture to apply a non-rasterized texture to vector images, using Photoshop and Illustrator Open a textured image such as a scanned-in piece of cardboard in Photoshop: Convert the texture to…
In this tutorial viewers will learn how to create layer styles in Photoshop to easily apply effects to multiple items. Open a document in Photoshop: Apply layer styles to a layer by right clicking the layer in the Layers window and selecting "Blendi…

756 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question