Solved

Why do these images look blurry?

Posted on 2014-10-04
6
179 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
6 Comments
 
LVL 26

Assisted Solution

by:David Brugge
David Brugge earned 150 total points
Comment Utility
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 69

Expert Comment

by:Merete
Comment Utility
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
Comment Utility
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
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 
LVL 69

Expert Comment

by:Merete
Comment Utility
Nice answer carloselfaite.
0
 

Author Comment

by:brucegust
Comment Utility
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
Comment Utility
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

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…
Read about why website design really matters in today's demanding market.
In this tutorial viewers will learn how to restore old photos in Photoshop (an introduction to the Clone tool) Zoom into a damaged area: Click on the "Stamp" icon to use the Clone tool. Hold the Alt key and click to select a region. Click again, and…
In this tutorial viewers will learn how to increase their history states in Photoshop To undo more than one history state, use Ctrl + Alt + Z, not just Ctrl + Z: View the History window by going to Window > History: The default number of history sta…

771 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

Need Help in Real-Time?

Connect with top rated Experts

7 Experts available now in Live!

Get 1:1 Help Now