How to sharpen text image

[paint247]

First post!

 

been using Paint for a couple of years now and have foudn it to be an valuable resource!  I'm amazed at what I've been able to do with it.

 

I'm building a website and using Paint to make a simple text based image as my logo.  Problem is, its coming out a little blurry on the website while it looks nice and sharp in Paint.  I know that there is some resizing going on.  The image in paint is 490x420 which is what it is supposed to be on the website but the browser is resizing it a little which is where I lose my sharpness.

 

I know that the internet will only render at 72ppi but is ther anyway to sharpen this up so it doesn't get fuzzy?

 

I don't have any plugins at this point and any help would be appreciated.  The logo in question can be found at itsagoodinvestment.com by scrolling down the page.  The logo in the header will be disgarded for the easier to use Garamond text image (encased in the semicircle) just below the main image beside the text.

 

Thanks in advance!

[racerx]

A couple things to try:

 

1) Right-click on image on your website and choose copy, then paste it in PDN and check actual resolution.

2) Make your text image the same resolution and save as png not jpg. 

[Red ochre]

Try 96 p.p.i.?

There doesn't seem to be a consensus of the 'best' resolution as far as I can see (from a google search). But there will be web-site experts that can better advise you!

[paint247]

Copying the image out of the website and pasting it back into Paint showed it was at 96ppi.  I was expecting 72.....

 

Saving as a png file seemed to help!  Thanks!

 

Any more advice for a newb??

[paint247]

Try 96 p.p.i.?

There doesn't seem to be a consensus of the 'best' resolution as far as I can see (from a google search). But there will be web-site experts that can better advise you!

 

I would have thought that copying right of the internet would have yielded 72....Thanks for the reply!

Edited October 28, 2015 by paint247

[skullbonz]

You actually could use any level of PPI ( pixels per inch ) that you want to. The higher the PPI the better the image and clearer it is when resizing. In the resizing menu in the Image tab change the PPI to 300.00, and size you need. 

[Red ochre]

I admit that I get very confused about p.p.i. on the web, after all the browser can resize so SkullBonz is probably right, the more the better... but what you upload and what is displayed aren't always the same!
For print higher d.p.i. is sensible (300+)

This tutorial is useful reading,http://forums.getpaint.net/index.php?/topic/17049-dpi-and-you-understanding-resolution-for-print-and-web/
but, not being a web designer, I have no idea about what is currently 'best practice' for web sites. HD screens vs tablets?

[Ego Eram Reputo]

My 2 cents..,

 

Forget PPI. It doesn't amount to anything

 

Images are best rendered at the size they are specified. So in your HTML or CSS where the Height and Width are stated for a specific image  - make the actual image that size. Another option is to NOT specify the height and width and simply place the image within a container like a DIV.

 

Filetype may also be an issue. I use the *.PNG file format for almost all occasions. The exception here is photographic type images which do better in JPG format (smaller file size). PNG's can be compressed with the OptiPNG plugin while in paint.net.

[david.atwell]

My 2 cents..,

 

Forget PPI. It doesn't amount to anything

 

Images are best rendered at the size they are specified. So in your HTML or CSS where the Height and Width are stated for a specific image  - make the actual image that size. Another option is to NOT specify the height and width and simply place the image within a container like a DIV.

 

Filetype may also be an issue. I use the *.PNG file format for almost all occasions. The exception here is photographic type images which do better in JPG format (smaller file size). PNG's can be compressed with the OptiPNG plugin while in paint.net.

I actually need to update my DPI tutorial.  Since the release of Retina displays, this isn't exactly true everywhere anymore.  :-)

[paint247]

My 2 cents..,

 

Forget PPI. It doesn't amount to anything

 

Images are best rendered at the size they are specified. So in your HTML or CSS where the Height and Width are stated for a specific image  - make the actual image that size. Another option is to NOT specify the height and width and simply place the image within a container like a DIV.

 

Filetype may also be an issue. I use the *.PNG file format for almost all occasions. The exception here is photographic type images which do better in JPG format (smaller file size). PNG's can be compressed with the OptiPNG plugin while in paint.net.

PPI is a problem because if you get too detailed, the image will be so heavy it'll slow the website down.  I've been advised to keep all the images as light as possible and 100kb per image would be ideal but not really realistic.  I've found that keeping the total of all the images on any one given webpage below 1mb seems to load pretty well.

 

Thanks for all of he replies!!!

[david.atwell]

PPI is a problem because if you get too detailed, the image will be so heavy it'll slow the website down.  I've been advised to keep all the images as light as possible and 100kb per image would be ideal but not really realistic.  I've found that keeping the total of all the images on any one given webpage below 1mb seems to load pretty well.

 

Thanks for all of he replies!!!

It depends on what you're targeting.  If you're targeting mobile browsers, then file size definitely matters, but if you're targeting desktop displays in North America, Europe, or Eastern Asia, you can pretty safely use images of whatever reasonable size you'd like.  In fact, for most broadband networks, server ping time accounts for more lag than image download time, so you should actually just consolidate your server requests (by using sprites, compiling all code into as few files as possible, etc).