How to avoid image compression at upload

[birdwaves]

HI,
I am seeing my images come out a little fuzzier after uploading and posting to our site. I have the Miva image settings at 100% but they are still looking re-compressed. Is there any way to turn off the automatic JPEG compression, and see my images as they actually are?

Is there any difference in compression between storefront hero and storefront slider?

Using Miva 10 with Levels Readytheme.

Thanks!

[afiumano]

I have noticed this at times too - seems to be more prominent in the 'resized' versions of the image. I also have the image settings at 100%.

[Brennan]

What are the image to types (gif, png, jpg). Gif tends to have the worst quality when resized. Have you tried another yet type and see if it makes any difference.

[birdwaves]

What are the image to types (gif, png, jpg). Gif tends to have the worst quality when resized. Have you tried another yet type and see if it makes any difference.

They are Jpegs. I haven't tried other formats.

[cpp-dev]

Resizing jpegs to be larger will reveal the artifacts quickly.

The inverse is less true, you can take a larger jpeg and downsize it with not much loss of fidelity.

[birdwaves]

I tried a png, and it didn't help. I also tried (on the Dev site) an image 2x's the size and resized down. Still looks blurry.

This screenshot shows the Production website above, and how the same image looks locally below. The text is blurry on the website.

Why can't I turn off the automatic compression? There is no resizing of the image on the website. Image quality set to 100%.
Screen Shot 2021-07-20 at Jul 20, 9.25.32 AM.pdf

[cpp-dev]

That looks like an artifact of re-compressing the image.

I'm not sure how to turn off the feature.

What are the pixel dimensions of the image? That might also be part of the artifact issue.

[birdwaves]

I tried with the image dimensions at 1170x418 with it set to "use image dimensions". I also tried using an image at twice the size, but set to display at 1170x418. That did not help.

[RTHOMASDESIGN]

Chrome is rendering the image out at 1146x409px because of the padding in your layout. You can try to upload it at that resolution to see if that reduces the "blur" caused by browser downsizing. This isn't a Miva issue, but an issue with how browsers render downscaled images. Others have reported similar issues on the forums. You can see that the image itself is clear on the server: https://www.wiseways.com/mm5/graphic...hdr-Teas_2.jpg

Hope this helps!
-Ryan

[birdwaves]

Hi Ryan,
Interesting that the link you sent directly of the image is sharper. I didn't think to try that. I replaced the image with and 1146x409 image, but I can't get the image to load separately on its own page. Like its not available yet. But you can see it on the home page. Weird.
Thanks for the tip!

[RTHOMASDESIGN]

No problem :)

Another thing I should mention... unless Miva is generating the image for you (using image machine or mvt:do), it won't resize/compress your images. If you upload an image asset under theme components > images (without auto sizing), and you're just using the item tag in your template, Miva will output exactly what you uploaded.

What page are you trying to output to? Make sure you have the ReadyTheme item assigned to the page.

[birdwaves]

Thanks, I will give it a try!

[William Davis]

I not sure if this is relevant to this discussion, either way I would benefit from clarification. I seem to recall way back that regardless of the image one uploads browsers displays them in lower resolution (72 pixels if I am not mistaken).

However, I been on many sites such as collectibles wherein they display images for very expensive products that are not only large but very high in resolution, how do they do this?

Click on the following then on the map and zoom-in, wow. I guess they use CDN to host image, but how they prevent the browser to lower resolution?

Example: https://www.raremaps.com/category/Ma...nd/Connecticut

[RTHOMASDESIGN]

https://www.pixelperfectcreative.com/blog/72-dpi-why

As far as the zoom in your example goes, that site is using Zoomify (http://www.zoomify.com/). It's a great solution for super large images (many megabytes or even gigabytes) that literally need zoom to provide more information. It splits images up into tiles and generates new tiles based on the viewport and user behavior.

Here you can see one tile:

[William Davis]

RTHOMASDESIGN , thanks!

That blog post you referred me to reminded me what I had forgotten, and got confused -we seldom ever have a need to print high end images.

As to Zoomify, I forgot that service existed -when I visited the site I had already been bookmarked! I fear I am getting too old to keep up with all this and all you young kids (I'll let you in a little secret, it s@ck to be old). lol