Images turning pale even though they are scaled down
-
Hi,
I’m having a little trouble with the images I upload into my WordPress blog (http://lostinaspotlessmind.com/) – they turn pale and “washed out” when I post them. When this first happened, I realized it might be because WordPress had to scale down my images to make them fit, so I used an image editing program to scale them down so they would fit in my blog perfectly. This seemed to work for a while, but now it has started happening again, even though I’ve scaled down my images to the correct size. I also noticed that clickable images seemed to turn out paler, but my latest pictures are not clickable and they’re still pale.
Does anyone of you know what might cause this? And more importantly, how I can make it stop? I’d greatly appreciate any help!
– – – – – –
A PS for those of you who know CSS: I’ve customized my CSS (with the Benevolence theme) to make the main content of my blog 600 pixels wide, but I’ve set the maximum width for media files (underneath where you edit your CSS) to 600 pixels as well. I don’t think my CSS is the problem (since the images started to show as pale a while AFTER I’d changed my CSS), but it can be found below, just in case you can find something wrong I might have missed:
body {
position:relative;
background:#fff;
height:100%;
font-family:Times;
color:#000;
font-size:10pt;
text-align:center;
margin:0;
padding:0;
}#wrapper {
position:relative;
height:100%;
width:900px;
border-left:10px solid white;
border-right:10px solid white;
background-color:#000;
margin:0 auto;
}#insideWrapper {
position:relative;
top:0;
height:100%;
width:900px;
background-color:#fff;
text-align:left;
margin:0;
}#insideWrapper:after {
content:”.”;
display:block;
line-height:1px;
font-size:1px;
clear:both;
}.post,.page {
position:relative;
top:0;
width:600px;
left:0;
background-color:#fff;
text-align:left;
overflow:hidden;
border-left:2px solid #343434;
padding-left:8px;
margin:0;
}.sticky {
border:2px solid #333;
padding:10px;
}#content {
width:600px;
margin-left:250px;
background-color:#fff;
text-align:left;
}#sidebar {
position:relative;
float:left;
width:180px;
left:40px;
background-color:#fff;
text-align:left;
font-family:Arial;
color:#000;
font-size:8pt;
line-height:11pt;
text-transform:none;
padding:6px;
}#sidebar p {
text-transform:none;
margin:4px 0;
}.left {
float:left;
margin:0 10px;
}.right {
float:right;
margin:0 10px;
}#masthead {
position:relative;
top:0;
background:url(‘http://lostinaspotlessmind.files.wordpress.com/2009/08/new-header-august-09.jpg’);
width:900px;
height:350px;
border-bottom:2px solid #343434;
margin:0;
}.centeredImage {
text-align:center;
margin-top:10px;
margin-bottom:0;
padding:0;
}#footer {
font-size:7pt;
position:relative;
color:#fff;
top:5px;
width:900px;
text-align:center;
margin:5px 0 0;
}#footer a:visited {
color:#fff;
}#footer a:hover {
color:#ff3333;
border:0;
}.sep {
position:relative;
background:url(‘images/sep.jpg’);
width:162px;
height:14px;
left:132px;
text-align:center;
margin:0;
padding:0;
}#sidebar a:visited {
color:#000;
}#sidebar a:hover {
color:#999;
}.commentBox {
position:relative;
width:90%;
background-color:#f5f5f5;
text-align:left;
border:1px solid #999;
margin:0 auto;
padding:5px;
}.commentBox .avatar {
border:1px solid #ccc;
float:right;
margin:0;
padding:2px;
}#respond textarea {
width:99%;
}.cite {
font-size:7pt;
color:#666;
}code {
font-family:Courier New, Verdana;
text-align:left;
color:#666;
font-size:7pt;
}input {
border:1px solid #333333;
background-color:#FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:8pt;
color:#000000;
padding:0;
}h2 {
color:#666;
font-size:14px;
text-align:left;
}#sidebar ul {
margin-top:0;
margin-left:0;
margin-bottom:0;
padding-left:0;
}#sidebar li {
list-style-type:none;
margin-left:0;
}#sidebar .widget_categories li ul li {
margin-left:15px;
}blockquote,blockquote p {
text-indent:0;
margin-bottom:7px;
color:#666;
}.footerLink {
color:#666;
text-decoration:underline;
}a.footerLink {
color:#666;
text-decoration:underline;
}a.footerLink:visited {
color:#666;
text-decoration:underline;
}a.footerLink:hover {
color:#999;
text-decoration:underline;
}.title,#sidebar h2 {
font-family:’Arial Black’;
color:#333;
font-size:7.5pt;
text-transform:uppercase;
font-weight:normal;
margin:14px 0 0;
}a.title {
color:#333;
}a.title:visited {
color:#333;
}a.title:hover {
color:#999;
border:0;
}#blogTitle {
position:relative;
top:50px;
left:20px;
font-family:’Arial Black’;
font-size:8pt;
text-transform:uppercase;
text-align:left;
}#blogTitle a {
color:#333;
}#blogTitle a:visited {
color:#333;
}#blogTitle a:hover {
color:#ff3333;
border:0;
}.commentPos {
font-family:’Arial Black’;
font-size:7pt;
position:relative;
text-align:center;
text-transform:uppercase;
clear:both;
margin:0;
padding:0;
}a.commentPos {
font-family:’Arial Black’;
color:#ff3333;
}a.commentPos:visited {
color:#ff3333;
}a.commentPos:hover {
color:#000;
border:0;
}a {
color:#ff3333;
text-decoration:none;
}a:visited {
color:#ff3300;
text-decoration:none;
}a:hover {
color:#394651;
text-decoration:none;
border-bottom:1px dashed #394651;
}#sidebar a img {
border:0;
}img.centered,img.aligncenter {
display:block;
margin-left:auto;
margin-right:auto;
}img.alignright {
display:inline;
margin:0 0 2px 7px;
padding:4px;
}img.alignleft {
display:inline;
margin:0 7px 2px 0;
padding:4px;
}.alignright {
float:right;
}.alignleft {
float:left;
}.aligncenter,div.aligncenter {
display:block;
margin-left:auto;
margin-right:auto;
}.wp-caption {
border:1px solid #ddd;
text-align:center;
background-color:#f3f3f3;
padding-top:4px;
-moz-border-radius:3px;
-khtml-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
margin:10px;
}.wp-caption img {
border:0 none;
margin:0;
padding:0;
}.wp-caption p.wp-caption-text {
font-size:11px;
line-height:17px;
margin:0;
padding:0 4px 5px;
}The blog I need help with is: (visible only to logged in users)
-
Can give me an example of a picture that has turned pale? All the images I see on your front page look okay.
-
They look okay, yes, but compared to the original pictures I have on my computer they look rather depressing – to see how it SHOULD look, you can go here:
Then compare it to the version in my newest blogpost, and I think you’ll see what I mean.
-
I just tried it by copying the wordpress.com image url to the address bar including the parameters that appear after the DOTjpg ending. Once I deleted those extra parameters, the photo displayed entirely differently.
http://lostinaspotlessmind.files.wordpress.com/2009/09/magazines.jpg?w=600&h=450
http://lostinaspotlessmind.files.wordpress.com/2009/09/magazines.jpg@roseknows-what IS going on?
-
From what I can see, if you upload an image that is the exact size you want to insert into the post, wordpress is creating another image off of that image instead of using the one you uploaded and that is borking things, and wordpress does a p*ss poor job of resizing/resampling images.
If I upload an image that is the exact size for my theme, wordpress should use that image as is, and should not mess with it. Period.
Please fix this.
-
-
I couldn’t wait to try it out – and it worked! My images now look as they should, so thank you very, very much.
- The topic ‘Images turning pale even though they are scaled down’ is closed to new replies.
WordPress.com Forums 
