Perfect - and then not so much

[deyvion]

Hi,

 

I have a problem which I think that some of you more experienced graphics makers might be able to help me with.

 

So, this is the problem:

 

Whenever I do work in Photoshop the result is just as I want it and it is sharp and good. 

 

And then I post it online, and it is not so good anymore. It is blurry. Why is this, and what can I do to prevent it in the future?

[ENO1986]

What size are your images? if they are small that could be your problem the way it works is if your image is small and you try to blow it up it will cause pixilation. Let me know if this helped any or not.

Edited September 1, 2013 by ENO1986

[deyvion]

Usually, there is no resizing involved at all. If the work is, let's say, 700px*500px, and I upload it and it still has the same sizeproperties, the blurryness is still there. I read somewhere on the internet that it can be about colorsettings that are different in PS than the colors used on the internet. Does that make sense?

[CyberGenius]

To be honest I've not experienced something like this before. The only time this happened, was when I over optimized my image(s). However, I think the site you uploaded your images to probably optimized them.

Edited September 1, 2013 by CyberGenius

[OhioTom76]

It's difficult to say without seeing some examples. Blurry can be caused by a lot of things. It's possible you are not creating the graphics at the right resolution. Typically in the past, web graphics were designed at 72 dpi. Your document in Photoshop might have been at the wrong resolution, check some of the preset profiles. If you are entering your own dimensions, sometimes it will adjust the DPI as you are changing other things, so always double check that last before you create the document. On the flip side of that problem, there are high resolution displays out now and if the images weren't prepared for those, they will look blurry too. I won't get into all the options for serving images for multiple resolutions here. Another cause could be that the image was over compressed too much.

[ENO1986]

Are you saving your image as a jpg try saving it as a gif the problem with saving them as a jpg is every time you save it loses a little bit of its quality let me know how this turns out.

[deyvion]

Thank you for all your answers. May I just ask which resulution that is the best to use? I will also try the gif solution.

[BeautifulAngel]

I usually save my images as png or gif but I've also noticed that when I upload some images on imageshack the picture can get a little blurry. I would suggest tipypic. Other than that I'm not really sure. 

 

I hope you get this issue resolved, I can only imagine how frustrating it would be to work so long a project and not even being able to upload it. 

 

Wish you the best of luck =) 

[deyvion]

I usually save my images as png or gif but I've also noticed that when I upload some images on imageshack the picture can get a little blurry. I would suggest tipypic. Other than that I'm not really sure. 

 

I hope you get this issue resolved, I can only imagine how frustrating it would be to work so long a project and not even being able to upload it. 

 

Wish you the best of luck =) 

I will try that, thank you. =) I am currently working on a project and I will try to use all the suggestions from here, like the resolution and saving with right fileextension. I will tell you all how it went =) And thankyou for suggesting tinypic, I will try that one and see if it makes a difference. 

[OhioTom76]

From within Photoshop, how are you saving your images? Generally you should be using the "Save For Web" option from within the File menu. From there you can choose from a variety of formats but the most commonly used are Jpeg, Gif and PNG.

 

JPEG's are good for photographic images with a lot of details and colors. You can adjust the level of compression - more compression results in a lower file size but the image also starts to look blurrier and choppier. 

 

GIF's support animation and transparency, but it's a hard transparency - either completely transparent or completely opaque, no in between. GIFs work better with images that have a lot of areas of solid color. Images with a lot of detail will result in higher file sizes and a lot of compression artifacts such as banding and dithering. Plus GIF's use a much more limited color palette.

 

PNG is a more modern format that is similar to Jpeg, but also supports alpha transparency, meaning you can have sections of the image that are semi transparent - it's a good all-around format to use these days.

[Kakashi2020]

If it becomes pixelated then maybe the dimensions of your saved image is small.  Try recreating the image with the needed dimensions and you'll get a good image and not a blurry pixelated one.