Before you ask please READ THIS

Album Images soft in mobile version

in FatMoon Posts: 60
In mobile version images in albums look really soft. When clicked individually, they open in the lightbox good and sharp, but previews are reallllly soft. As there are around 35/40% visits from mobile, it's a tough and important one :/
for example
https://olafsosh.com/album/street-and-personal/

Comments

  • Posts: 60
    Something has to do with forced thumbnail size or...
    What?
    Yes.
    No.
    What?
  • Posts: 60
    That

    "High DPI Screen users(Retina)

    If you are worried about image quality for your retina(or alike) users you should check this plugin http://wordpress.org/extend/plugins/wp-retina-2x/faq/ . It will serve better quality images for high DPI screens." didn't work.
  • AirAir
    Posts: 10,970
    Hey there:-)

    Images in lightbox are full versions, so it is obvious they will look better. Images in bricks album are resized versions & optimized for fast loading.

    First thing you can try is to change quality setting Appearance → Customize → Miscellaneous Settings → Apollo13 Image Resize http://rifetheme.com/apollo13-framework/docs/customizing-the-theme/miscellaneous-settings/

    Thing is, that in web it is always compromise speed vs quality. From my experience I know that authors of site are more concerned about 2nd one, and in the end they are only one who care about it, but I understand need to show own art in best way possible :-)

    With kind regards.
  • Posts: 60
    That did nothing, I'm afraid. The images are really soft.

    Tried add_filter('jpeg_quality', function($arg){return 100;});, but that ain't working as well.

    Is there any way to control, how those thumbnails behave, as the drop in quality is pretty big, not only in overall sharpness, but, as a result, in contrast.
  • AirAir
    Posts: 10,970
    It doesn't seem to regenerate images. Please try again, this time by setting it to like 20, save, and then 100.
    I see your image is still from 16 March, so it is either cache or stuck setting.

    About controlling behavior - this images sizes are result of 3 settings in your albums:
    - number of columns(Bricks columns),
    -margin(Bricks margin)
    -and max width that columns can take(Max width of bricks content)

    So you can play with them, however quality of resized images is set by mentioned before setting.

    Can you check how it looks on desktop browser resized to small size, is it the same for you?

    With kind regards.
  • Posts: 60
    Did you mean this one? If yes, setting to low and back again didn't change things. Looked funny tough.

    Actually, there's a quality loss on a desktop as well, just not so noticable as on mobile.
    snip15.PNG
    409 x 390 - 20K
  • AirAir
    Posts: 10,970
    ... OK I have found that there is a bug in theme, and setting quality to 100 doesn't work, as it reverts to 90. However you can set it for 99. This thing I will fix for next update.

    Anyway I personally didn't see any difference on my test image between quality 90 & 99.

    I think there might be something else you are seeing, in this case maybe CSS transforms or HIGH DPI screen is making additional distortion.

    Could you make screen shot from your phone and post it here? Also info on what phone you are testing would help!

    With kind regards.
  • Posts: 60
    Yeah, 99 does not have visible impact. Screenshots are in my OP above - nothing has changed.
    And I have Motorola PlayX.
  • AirAir
    Posts: 10,970
    O yes, sorry about that, forgot about them.
    If everything else failed, then lets try to increase image size.

    Go edit album and find option Max width of bricks content and increase it to 2500 and test. You can try to type even higher values if you will still not be satisfied.

    With kind regards.
  • Posts: 60
    Thanks! Yeah, a lot of plugins cramped up in this short time :]

    OK, If anything, I'll ring the bell :D

    So, yeah, basically just that ongoing image quality thing, but apart of that I think we are at the end of things, hah. Probably some random question now and then, but overall - YEAH!
  • AirAir
    Posts: 10,970
    Have you tried my solution from above post? :-)
  • Posts: 60
    Oh! I actually wanted to post this on that front-page-issue page :]

    yeah, 2500px - done. I think it's the same.
  • AirAir
    Posts: 10,970
    Be sure to clear cache on your mobile. Cause now it is served 500px wide photo, while previously it was 384px

    You can compare both:
    https://olafsosh.com/wp-content/uploads/apollo13_images/image-50-6o5knncjcoz8rtn171upoopmbd1xhhua9j.jpeg
    https://olafsosh.com/wp-content/uploads/apollo13_images/image-50-6o5knnciycbs03y2sg6ws26nqk3me7aqk6.jpeg

    With kind regards.
  • Posts: 60
    Might be better. Now just not being lazy and upload larger images from the desktop, not fetch them from old squarespace :]

    OK, Sir! I guess, thank you for now. I will let other to annoy you :D

    \m/
  • AirAir
    Posts: 10,970
    If you still not feeling it is displaying right, we can dig further :-) However I am happy that you feel it is better now!

    With kind regards.
  • Posts: 60
    I'll slap myself into reuploading images during a week and get bact to ya.
  • Hi! I have the same problem with the quality of images on a mobile device. I set the quality to 99% and set the value to 2500px, but this does not help. When viewing an album, the quality of photos is noticeably worse than when you zoom in on the image when you view it.
    What could be the problem? How to make the image quality the same so as not to lose the contrast and sharpness of the image in the album
  • AirAir
    Posts: 10,970
    Hello :-)

    I believe this plugin is the answer https://wordpress.org/plugins/imagemagick-sharpen-resized-images/

    We talk about it in details in this topic https://support.apollo13.eu/discussion/5851/image-sizes-and-sharpness#latest

    Happy Easter!

    With kind regards.
  • Ok - what i need to do??
    just tell me what i need to do to make the quality the same?
  • This plugin does not solve the problem and does not change anything (
  • AirAir
    Posts: 10,970
    Hey :-)

    Sorry, maybe I was to fast to assume you would mean the same.
    Could you send a link to that album so I could check how it looks?

    With kind regards.
  • The site is closed for now. When I turn off lightbox - it works perfectly.
    When the lightbox is on, my image in the album is worse in quality than when I click on the image and it opens
  • 2 different quality
    IMG_2803.PNG
    1242 x 2208 - 4M
    IMG_2804.PNG
    1242 x 2208 - 3M
  • What do you think about this?
  • AirAir
    Posts: 10,970
    Hey :-)

    I see that one image is opened in lightbox and another is a thumbnail.

    In lightbox, image opened is an original image so it is full resolution.
    Thumbnails are resized images, so they will be smaller. They are smaller so page would load faster.

    If increasing size of bricks albums settings doesn't give you results that you desire then you should use the plugin I talked about in the first place. WordPress by default "softens" images, to lower images size as much as possible. This is not the best approach for photographers.
    alexandrmazur said: This plugin does not solve the problem and does not change anything (
    You probably need to recreate images after activating this plugin. Zafar is talking about it here https://support.apollo13.eu/discussion/comment/23867/#Comment_23867

    I think the best way to notcie a difference would be to:
    1. Activate plugin ImageMagick Sharpen Resized Images
    2. Login to FTP and go to wp-content/uploads/apollo13_images
    3. Delete all created images.
    4. Refresh your album.

    Now your images should be much sharper, but also a bigger filesize.

    I will add it to documentation soon, as I will only get time to test it enough.

    Have a happy Easter!

    With kind regards.
  • Thank you!!!
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!