WordPress Blurry Images Problem – “scaled” jpgs served and blurry

Even when dropping “Full Size” pics using the classic Add Media function in WordPress, it serves a blurry version.

This was maybe for site speed or some other theme reason, but for a photographer like me, it’s unacceptable.  As default, wordpress serves a “Rendered Size” and not necessary your intrinsic full size. SUPER ANNOYING.

Here you can see the massive difference in sizes.

You shot a diamond, but wordpress serves a turd:

 

Normally its not bad if you shoot with a DSLR.

A real photo example, here is what happens when I quickly and simply drop a FULL SIZE pic.

You might disagree this is blurry, but once you see it on your own pics you’ll see.

Also, if you are uploading Phone quality pictures, often you will want to downscale.

wordpress blur
wordpress blurred me

Solution 1: Manually Downscale this by 50% in HTML via Max-Width / Max-Height.  Forcing the browser and kinda pissing off Google Speed Insights a bit but that’s okaaay

 

The manual on element css code is this:

style=”max-width:60% !important”

BUT. WE ARE BUSY.  WE DONT HAVE TIME TO MANUALLY DOWN-SCALE EACH TIME.

 

Solution 2: Customize CSS and totally force all image classes to go “50%”, or whatever.

Same idea as the above but just use CSS classes that WordPress supports.

For example:

.size-full {max-width: 70% !important}

yes it’s dirty, and only works in certain websites.  I won’t be doing this for now until it really bothers me. But hey if it works for you you lucky.

wordpress blur

YOUR MILEAGE MY VARY.

In my case, my own theme overrides my work from their img tag attribution on max-width: 100%:

silly u theme

 

Solution 3: Post a blog post about it and hope a savvy saviour here can help me.

I’LL LOVE YOU FOR IT 🙂

 

Solution 4: Google Search it Bro

ALL TOTALLY USELESS / BAD solutions imo.  You will get served perfect SEO articles that recommend unscalable solutions like my 1 & 2 and then 5 different bloated plugins.  I’d rather use CSS if that’s the case but just IMHO.

 

SOME KNOWLEDGE FINALLY

I found theses posts useful for education:

Intrinsic Size vs Rendered Size: Understanding the Differences

 

Peter Peng

1 thought on “WordPress Blurry Images Problem – “scaled” jpgs served and blurry”

Leave a Comment

Your email address will not be published. Required fields are marked *

Shopping Cart