Blurry images due to the responsive-ness

Just bought this theme a few days ago and been playing around with it ever since. Seems like a nice piece of work so far 🙂

I however can´t really get my head around the recommended picture widths. Acording to the documentation the size of a two-column picture is 700x(whatever i want). However if actually mesauring the pictures that are up on the website they all get to a max-width of 699px.

So first question: What is the correct width for pictures (to make them appear as crisp as possible)?

Secound I´m having some issues with the responsive-ness of the pictures. If i follow the recommendation for max-width and uploading my pictures with a width of 1074px the look perfectly fine resized by the broswer (that is importing the 1074 into a wordpress post and letting the max-width of the post decide the size of the picture). However when I reduce the size of the browser window the picture gradualy changes from crisp to absolutely horribly blurry and back to crisp – depending on the resolution.

So second question: What is there to do about the issue with blurry pictures on resizing the browser window (or looking at the page from a computer/tablet/phone that has a built in resolution that apperas blurry)?

• This topic was modified 11 years by MrOrsh.

Usually that issue is from using the Photon plugin in the (crappy) Jetpack stuff.

I’ve found it much better to use the regenerate thumbnails plugin to create the new thumbs for the theme, and so you have the correct sizes. The “resizing” in responsive is also partially dependent on the web browser, and some do a better job than others.

Might not apply to your use case, but after 12 months with the theme that’s been my experience.

Thank you for your response. I removed the while Jetpack-plugin and tried but the issue seems to still reamin.

Tried switching back to the WordPress standard-theme and when I slowly change the width of the browser window the pictures stay exactly the same quality wise (as long as they aren´t actually being pushed by the browswer windows edge of course – i which case the change pysical size and focus).

If i try this with the Newspaper theme every time i gently make the broswer window narrower every picture change it´s focus just a little from being rezised whats look like one pixel up and one pixel back evere time there is a change in broswer window – even though they shouldn´t be rezised at all since the only thing I´m doing is moving the outer edge of the browser window.

Tried to make a picture of the phenomenon. http://i.imgur.com/0U0m8ku.jpgIn the upper part of the picture the image displaying is being showed as 700px (as it supposed to be). In the bottom picutre the broswer window has been narrowed as little as possible – the browser windows is not pushing on the pictures. Somehow changing the browser window has manged to change the displayed image resolution to 699px instead.

If i make the browswer window one pixel narrower the image gets sharp again since it´s (again) returing to being displayed as 700px width.

This is crazy! 🙂 However it has to do something with the theme itself (or some plugin) since the error is not present in the WordPress standard theme (twenty fifteen).

• This reply was modified 11 years by MrOrsh.

Just tried out the demo again: http://themeforest.net/item/newspaper/full_screen_preview/5489609

And the issue is present there too. If you open the page and gently pull the browser window narrower ALL pictures on the site shifts size up and down with one pixel with every move that is made to the browser window.

This seem like kind of a serious issue..

Great idea! However it don´t really do anything for me :-/

If i apply max-width: none; generally to all img-tags by just typing: img {max-width: none;} the pictures (well, some of them at least) gets their actual resolution (way to big for the theme) and they do not shrink down at all when i resize the browser window. However – as a small win – they do not shake or jump one pixel up/down when rezising the window 🙂

However I am still stuck here 🙁

I manged to resolve the issue in firefox by adding “img{-moz-transform: rotate(0.00deg);”. I´m not really sure how this solves the issue, but it does. The issue is however still present in other browsers.

Well, after a bit more searching the topic these code snippets seems to make the issue less visible in most browsers:

img {
-moz-transform: rotate(0);
-webkit-transform: rotate(0);
-o-transform: rotate(0);
-ms-transform: rotate(0);
-sand-transform: rotate(0);
transform: rotate(0);
}

It´s not perfect in Explorer and Chrome. I can still see the pictures jumping there but it is a lot sharper. In Firefox though it works perfectly.

The site is not live yet but just under development localy so unfortanely I can´t post the link :-/

• This reply was modified 11 years by MrOrsh.
• This reply was modified 11 years by MrOrsh.

That sounds great! Thank you for actually keeping the theme maintained. It means a lot.

Been fiddeling around with all the general settings for a few days now and there is a lot to go through. Over all though, at least so far, i must say you have created a great product. Thumbs up!