How to get crisp widget graphics

[reemalhashmi]

Hi,

I am using the Genesis framework and the Lifestyle Pro theme on the latest
Wordpress version, on the Mac Retina Display Laptop 15".

I am trying to customise my widget's headers by installing my own graphics
for their "titles". I design the headers in Photoshop CS6 and then upload
the file into wordpress, and get the url of the file and put it in code
and it works just fine!

However, the quality of the graphics look perfectly crisp on my Mac Retina
laptop, but not on other laptops or computers. You can have a look here:

Portfolio

You may see that they look like they've been sized down, so they're
squished or fuzzy looking. That goes for all of them except for the first
one (social media icons) where I tried resizing the graphic (266x120, 72
ppi) and it looks fuzzy and unclear still.

At first I tried 300ppi and the dimensions were huge. I thought that may
have been a problem so while attempting to size it down to the widget's
dimensions (266x120), the graphic gets really unclear and the text is
fuzzy as you can tell on the first widget. I tried 70ppi, 150, 300 and
even 1000ppi, and nothing improved. They all look distorted.

I don't know what to do now, I've tried everything I could. Why does this
happen? I contacted a graphic designer who helped integrate my logo onto
my header, and she had no clue as to why this was happening, and advised
me to contact the theme creator. I hope you can help me out with this
issue. To me it seems as if the graphics (text and image) look distorted
from Photoshop originally, it's not that Photoshop is glitches, it's that
it looks that way from the start, maybe from the dimensions or the ppi?
I'm not sure.

Thanks in advance!

Reem AlHashmi

http://www.reemalhashmi.com

[nerdworker]

Hi Reem,

I don't know if you figured this out already, since the images look great on my Mac. 🙂

But one thing to keep in mind is that when you upload images through WordPress itself, they may get automatically resized/optimized. I've found that the best way to be sure your images stay the way you intended would be to size them to the same size as your destination area, then upload them manually with an FTP program to an images folder for your theme. That way you know your images are how you intended them. You may want to try that if it's still a problem for you and see if it helps. I hope that makes sense.

Stefanie
nerdworker.com

[Author]

Posts