Why do these images look blurry?

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.

brucegustPHP DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

David BruggeCommented:
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.
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
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)

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

Nice answer carloselfaite.
brucegustPHP DeveloperAuthor Commented:
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?
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.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Adobe Creative Suite CS

From novice to tech pro — start learning today.