The whole world seems to be on WordPress. Heck, I’m on WordPress and I’ve been on for as far as I can remember but I’ve always had a little something that’s always irked me and that is the way my images look on my site.
I process and they look great on my monitor, prepare the post, hit publish and voila my images are live and now they don’t look the same. What’s going on here. This has irked me so much that I decided to port Origami over to Squarespace (this was about 2 months ago) and avoid those pitfalls.
Rewinding a little bit, it’s worth mentioning that I’m a Mac user and I live on Safari for all my internet browsing purposes and that includes looking at websites including my own. So when my images started looking off I decided to finally investigate to see if I could come up with the problem.
At first, I blamed WordPress’s image compression engine for jpegs and simply attributed the problem to something that was on their side. Fast forward to a couple of days ago and while browsing on the iOS App store I decided to give Opera Mini a try. I had used it before and I quite like it so why not. So far so good, I’m loving the Opera Mini experience and I came upon their sync option which syncs bookmarks with the desktop version. So on I go to the Safari and download Opera for Mac and I bring up this blog immediately just to see how it looks and oh my God, I couldn’t believe it, my images looked alive. I open up a window in Safari and compare it immediately and to my surprise the differences were astonishing, night and day, 180 degrees apart I tell you. I don’t know what’s up with Safari when it comes images or perhaps its a user preference that I’ve selected, the fact is I don’t really know why, but my eyes weren’t lying to me, the differences were glaring and boom, I exported my bookmarks from Safari and will now happily live in the Opera world.
Amazing, I tell you. I opened Origami as well just to make sure and the images looked great and I couldn’t really see any differences between my blog and Origami, damn I was happy. Anyway, just thought I let the world know in case someone is having the same issues.
I leave you with a recent set of images taken withe the XF 27mm on a trip to BJ’s while shopping for groceries.
Ledesma Photography 
WordPress (at least the self-hosted version) doesn’t have a compression engine of its own built-in. Instead, it relies on the image processing engine supplied by the web host. It supports either GDLib or ImageMagick. I would assume that the WordPress.com hosted blogs are the same in this regard. The actual compression settings are defined not by the user, but by the hosting company. Some utilize better settings than others. This really comes into play when WordPress is passing the image resizing parameters to ImageMagick or GDLib (defined in Settings=>Media and/or any resizing plugin you may have installed, such as Resize at Upload Plus).
As an example, I have a self-hosted WordPress installation on ICDSoft, who supplies ImageMagick. They don’t compress very heavily, and so my resizes and image views look good and consistent across most browsers and devices, and match my output from Lightroom/Photoshop very well, even when using dynamic resizing.
Thanks for your insights Geren !!
Puhhh… seems I need to learn a lot more about posting pics. 🙂
For me sometimes it works, sometimes not.
I am satisfied with the results in Chrome.
Oliver 2.0
I’m quite sure it’s a color management problem. Imbed a color profile in your web images, preferably sRGB, then the problem with Safari or Firefox should be cured. Firefox and Safari are those few web browsers does color management.
Thanks but I export all my jpegs as sRGB already, I always have but I’ll have a check unless I made a mistake somewhere.
Wouter makes an important point that I was going to make when I first saw your post.
All of these content engines have changeable skins called themes and each theme has different “mechanicals” which is the old way of describing the max width of things that can be placed in various areas, like main columns, sidebars, footers, etc.
I recently changed a wordpress theme I was using for a long time because it rendered things fine on computers running browsers (any computer, any browser) but on mobile devices (both iOS and Android) the main column was compressed such that images cropped square weren’t square, they were taller than they should have been and distorted.
But, if I were just starting out I could have easily used smaller images.
But, in fact wanted to use larger images and because of that I wanted to get rid of my sidebar anyway so decided to move to a new theme. In testing I found one I liked that looked decent on both computers/browsers and mobile devices and I went with it. And, it does a decent job of scaling when window sizes change.
I use Safari as my every-day browser and while there is a difference between the way it and, say, Chrome renders images and colors, with my theme on my computer and iPad and iPhone I don’t see enough difference to switch.
All of that said, I don’t use WordPress to hold images, I use Flickr to hold images and embed them in WordPress from Flickr. This adds a layer of complexity to posting but it keeps the bandwidth of my blog low (my blog’s been around since 2004 so it’s got a lot of content on it). And, if WordPress does have a crude compression engine that’s messing up images, I’m not experiencing it because I’m not using it.
Because of my using Flickr to embed images, I add a bit of complexity to the theme width calculation and the theme templates. I’ve found ways around that by using standard templates (regular post templates, not image templates) and I don’t go bigger than 800 px wide although I probably could as the theme does a nice job of scaling.
One of the nice things about a hosted WordPress site (I’ve had a self-hosted site for years and am almost finished moving the content over to the hosted service) is the fact that tags can lead people you’d never meet with a self-hosted site to find you. Like on Flickr, tags can help you find others and can help others find you. For that I find the WordPress community invaluable. I had thousands of followers on my old self hosted site so I didn’t switch to gain more popularity, I switched because hosted WordPress is quite stable and does what I need it to do. A side benefit is that there’s a built in community there (here) and I find that useful.
Its all a bit confusing, you know the template changing business and I’ve done my fair share but when in doubt I tend to go big and just avoid the having to resize. Most templates are now responsive and hopefully that will aid the end user.
Thanks for your insights.
Jorge: This new theme looks great. Congratulations on finding it and sticking with WordPress. I think you’ve made the right choice.
Thanks me three.
Jorge
Glad you found a solution.
What do you think of Squarespace so far?
Thanks Stephen, I think its great, a few quibbles here and there mainly you media files. From my understanding, the images belong to the actual post or page so they can’t be reused in another post or galleries That I don’t like. What I love are their galleries 1million times better than wordpress any day of the week and twice on Sunday.
All in all, its pretty nice. Do I recommend it, hmm, it depends on what you want.Thanks for chiming in. Cheers.
Thanks Jorge
Thanks for the note about reusing images. I’ll look into that.
What I want is simplicity, and I suppose reliability. I’d rather spend time making photographs, so Squarespece appeals. I’ll play with it some more.
No problem. When you think about it, it’s not a deal breaker as I rarely go back and fiddle with published images.
Right. Good point.
I’ll have to try more of that. Thinking I mean…
🙂
I use a mac too, (and the Cocoa theme too) and my pictures also look a bit off on Safari, and better when I use Firefox or Chrome. Therefore I use Safari now for work purposes and Chrome for everything else (of course blogging too). The whole blog itself sort of looks crisper, cleaner, better…
I feel kind off silly just finding this out myself but I concur with you.
Oh no, don’t feel so. I only realised about a month ago when I couldn’t do something on Safari and had to download chrome for it. Another curious thing is that, on the Cocoa theme, when there is a long title of post in my Safari, the words get chopped up between lines:
So it wou-
ld look like that.
Whereas in Chrome that doesn’t happen, the titles are neat:
So it would
look like that.
Browsers can work in funny ways…
Thanks for chiming in Sofia, I appreciate it.
Hi Jorge, I have been posting on WordPress for a year and a half with no problems. My images post exactly how I view them in PS6 on my Mac. Sorry that you are having problems.
Thanks Keith, but I think the problem is solved and Safari is culprit, that was drying me crazy I tell you.
I use Safari, Firefox, and Chrome. For some reason, Safari has not been working well for me lately. Extremely slow page loads.
I use Chrome and the images appear softer in Safari. It certainly has to do with how a browser scales images and some seem to do a better job than for instance Safari.
Good to know Wouter thanks! When I saw the images on my site my jaw dropped I couldn’t believe like I said.
And itis important to display images in the intended size on your blog to avoid browsers from rescaling your images.
Do you mean by whatever one’s theme suggest ie. Setting/Media max width etc etc.
A thema determines the maximum width, but assuming you want display images at a certain size (for instance 950 pixels) upload them in that size. Uploading a 1024px width image and displaying it at 640px isn’t really good.