Before you ask please READ THIS

Image sizes and sharpness

in Rife Posts: 52
I found this, but can't add to it since the thread is closed: https://support.apollo13.eu/discussion/3827/images-on-the-album-list-bad-resolution

I think resolution should be independent or, scaleable in some way. I do not want to pick number of bricks depending resolution, but because of what looks best to me in terms of layout.

With too many bricks, resolution on smartphones suffers a lot.

However, I think another and possibly bigger concern is the resizing algorithm being used, which is probably very fast and therefore generates blurry looking images. Is it possible to change this, so it uses an algorithm which also sharpens when resizing?

I used 8 different sizes of same photo to find the the best resolution I should be using. The resolutions rage from 1000px to 6000px

Currently, I have a brick size at 720px and all variations of the photo look almost the same.

If I export the photo with similar crop and 720px from my editing software, and with post-resize sharpening applied (an important detail, especially for photographers), it looks like way better.

With smaller bricks, the blurriness plays a bigger part/makes the images look worse. In all honesty, the blurriness is a big bummer and I noticed it without looking for it.

Attached screenshot shows the bricks in the background, and my 720px export in the window.

Comments

  • AirAir
    Posts: 10,970
    Hey :-)
    Zafar_Iqbal said: I found this, but can't add to it since the thread is closed: https://support.apollo13.eu/discussion/3827/images-on-the-album-list-bad-resolution
    The topic that you have linked is from one of our older themes. There was an issue with using secondary WordPress library for resizing images. Since then it was fixed, at least in the Rife theme.
    Zafar_Iqbal said: I think another and possibly bigger concern is the resizing algorithm being used, which is probably very fast and therefore generates blurry looking images.
    The theme uses the same Image library as a WordPress, so there is no much that can be done with it from theme level.

    Only setting is to improve quality to 100, but I am not sure it will make anything better, as the current setting is 90. Please check Appearance → Customize → Miscellaneous Settings → Apollo13 Image Resize .

    Could you send me a link to that album so I could check how it beahaves in compare to original WordPress images?
    Zafar_Iqbal said: I think resolution should be independent or, scaleable in some way. I do not want to pick number of bricks depending resolution, but because of what looks best to me in terms of layout.
    I don't think I understand exaclty what do you mean here.

    You probably are talking about setting of images size dependant on max width and number of columns?
    In my opinion it is best compromise between quality and filesize when responsivness is most important, so images will load fast for viewers and not lag their device.

    Could you tell me how you would see it?


    With kind regards.
  • Oh, I didn't notice it was for a different theme.

    Quality/compression setting is already at 100. Not because that's what I want to stay with all the time, but only for while testing/checking quality. I actually like this feature and had it set to something like 65, before I started having a closer look at quality. One of the reasons I liked Rife, was because it was fast. I don't expect perfect quality but I do think the theme is beeing a bit too hard on us photographers :)

    In the screenshot, it's an album list showing. The titles refer to the image version that was used as featured image: http://v2.zafariqbal.dk/albums/

    This album has photos in different sizes, ranging from 1000px up to 6000px: http://v2.zafariqbal.dk/album/resolution-test-1000/


    If I set the width to 1170 and have 3 columns, each brick will be 390px wide and bricks already looks soft.
    http://v2.zafariqbal.dk/album/resolution-test-1024/

    If I set the width to 1170 but had 5 columns, each brick will be 234px wide and now look really horrible and pixellated.
    http://v2.zafariqbal.dk/album/resolution-test-1024/

    I suggest something like a parameter which could go from 1 to whatever. With 1 = the resolution gets multiplied by 1 = no change. With a value at 1.5, the resolution (width devided by number of columns) gets multiplied by 1.5 etc. Images shouldn't be able to resize to sizes larger than original, of cause.
  • AirAir
    Posts: 10,970
    Hey :-)
    Zafar_Iqbal said: This album has photos in different sizes, ranging from 1000px up to 6000px: http://v2.zafariqbal.dk/album/resolution-test-1000/


    If I set the width to 1170 and have 3 columns, each brick will be 390px wide and bricks already looks soft.
    http://v2.zafariqbal.dk/album/resolution-test-1024/
    None of these album works unfortunatelly, however for me most important was thing about softening pictures, as like I have said it dependant on avaliable image library on the server.

    Here are 3 version of one of your image used in here http://v2.zafariqbal.dk/albums/

    1. Original - http://v2.zafariqbal.dk/wp-content/uploads/2019/04/sk026-bryllup-bryllupsportraet-1024x680.jpg - nice and sharp.
    2. Resized by WordPress to one of the default sizes http://v2.zafariqbal.dk/wp-content/uploads/2019/04/sk026-bryllup-bryllupsportraet-1024x681.jpg
    3. Resized by theme to make brick http://v2.zafariqbal.dk/wp-content/uploads/apollo13_images/sk026-bryllup-bryllupsportraet-6tfnlwjlsshgjgp6ofeol8f7gdxmies1t2.jpg

    2 & 3 use the same library, and the theme is dependant on this what is available for WordPress.

    However, in the case of 2) image got scaled up, and that is why it doesn't look good.

    In this case, I would use a different ratio for bricks as currently, it has to stretch image up.
    Another solution would be to switch to 4 columns, and/or lower max width of bricks layout.

    Most important is that cropped image wouldn't get taller than original because of the settings for album/ Albums list.

    In Rife theme what we want to avoid at most is empty space where images provided are not enough size, as it often looks worse then upscaled images.

    I would still like to see those album where you experimented with one photo in various image sizes.


    With kind regards.
  • None of these album works unfortunatelly, however for me most important was thing about softening pictures, as like I have said it dependant on avaliable image library on the server.
    My apologies. I did so much that I felt like cleaning up.

    I have created the albums again, with 9 versions of same image. Original photo is 5735px wide, so nothing was upscaled before uploading. There is also a 10th album called Optimized. See below.

    Albums page (Billeder in menu), 1170px wide
    http://v2.zafariqbal.dk/albums/
    Looks very soft on phones

    Frontpage, album list below slider, 2160px wide
    http://v2.zafariqbal.dk/
    Looks much better on phones

    All 9 albums are 1170px wide

    10th album is 2162px wide
    http://v2.zafariqbal.dk/billeder/resolution-test-optimized/
    Like the wider album list, photo bricks looks much better here too

    3 bricks in all album lists and albums

    All albums are using the photos in same way. Only featured image differs, with versions from 1000px up to 5735px. Featured image on 10th album isn't relevant.

    I showed these to a bunch of photographers and they all agreed it didn't look good at all.

    I came up with the width the following way:

    Smartphone resolution I use as a base: 360px wide
    360px looks really bad on everything I've seen, and if I double the number, it will look much better: 720px
    I want 3 rows, so 720x3 = 2160px
    I have a 1px border in albums, which means 2 pixels in between bricks and thereby end up with 2162px in total. Each brick in albums is now a perfect 720px match.

    Ideally, I'll be creating web photos in 1440px, but I didn't want to for this example. Maybe it doesn't even matter, considering how soft Wordpress rescales.

    Don't mind how irregular the site appears. I'm only testing and getting to know the theme.

    I haven't seen how all this is with photos in pages and blogs - those will be important too, and everything else doesn't matter much. With my current theme, I actually didn't rely on wordpress rescaling so that's why I didn't notice before, just how bad it does things.
    1. Original - http://v2.zafariqbal.dk/wp-content/uploads/2019/04/sk026-bryllup-bryllupsportraet-1024x680.jpg - nice and sharp.
    The file I uploaded was this: http://v2.zafariqbal.dk/wp-content/uploads/2019/04/sk026-bryllup-bryllupsportraet.jpg but I see some up scaling is still going on. I'll have to look into that. Images shouldn't scale up.
  • AirAir
    Posts: 10,970
    Please leave of all of above available I will investigate it later today and reply!

    Thanks :-)
  • Sure!
  • AirAir
    Posts: 10,970
    Hey again :-)

    Thanks for test albums.
    I have compared photos used there and results are not surprising - the higher resolution is base photo the better it looks after WordPress algorithm.
    Zafar_Iqbal said: I showed these to a bunch of photographers and they all agreed it didn't look good at all.
    That is very biased crowd:D
    Zafar_Iqbal said:
    1. Original - http://v2.zafariqbal.dk/wp-content/uploads/2019/04/sk026-bryllup-bryllupsportraet-1024x680.jpg - nice and sharp.
    The file I uploaded was this: http://v2.zafariqbal.dk/wp-content/uploads/2019/04/sk026-bryllup-bryllupsportraet.jpg but I see some up scaling is still going on. I'll have to look into that. Images shouldn't scale up.
    O yes, I have pasted wrong link. My bad here.

    Zafar_Iqbal said: I haven't seen how all this is with photos in pages and blogs - those will be important too, and everything else doesn't matter much. With my current theme, I actually didn't rely on wordpress rescaling so that's why I didn't notice before, just how bad it does things.
    Well WordPress, allows you inserting original image in posts/pages so it shouldn't be a problem. Also our slider & scroller are using orginal photos.
    However, bricks layout needs to use resizing algorithm to make bricks fit.

    Many photographers are using our themes, and to be honest I don't know what to advise you at this point.

    If I would add option to bricks "use orginal images" then whole lot of options will get useless, and it will force you to add images in proper dimenssions, so in fact you will have to do everything manually.

    With kind regards.
  • That is very biased crowd:D
    Haha, yeah :blush: I know us photographers can be too whiny, when it comes to image quality. I'm trying not to be that type and always upload my photos to Facebook at 960px, because who cares and so many use phones anyways. But the photos using the theme looks soft, and they shouldn't when it's supposed to be on my homepage. That's where they should shine.

    Even though I haven't tried, I have a felling it will be alright with blogs and pages :) And yes, I've noticed with sliders and scrollers. That's cool too.
    Many photographers are using our themes, and to be honest I don't know what to advise you at this point.
    Would love to see some of their sites. If they are happy then I'm a bit puzzled. On one hand, I understand the need to have fast websites. On the other hand, IG, FB etc. are clearly showing photos sharper, and there is tons of photos there.

    I don't think you should add option to use original images. That would defeat the purpose of optimization and it was a big reason why I chose this theme. I'm pretty sure I'll design for a 2160px width or something like that, and then let that size control the brick resolution. Most people don't have desktop monitors with such resolutions, so it will look like full width page to them, which is OK too.

    Thanks for your time though. I really like this theme and can't wait to properly start building my site. It will be awesome :)
    Just leave it and work on more important stuff :D
  • AirAir
    Posts: 10,970
    I have dived deeper into this compression issue and made some tests.

    Here is original Photo compressed beforehand in PhotoShop https://mk0demosgcc89fcb9u9m.kinstacdn.com/wp-content/uploads/2018/10/Frame2.jpg
    It is ~100kB

    Here is a version resized by WordPress to 1024x683 https://mk0demosgcc89fcb9u9m.kinstacdn.com/wp-content/uploads/2018/10/Frame2-1024x683.jpg It is ~50kB

    Now, if I want to have the same result in file size, I have to compress the original photo in 34% quality, to get to 50kB for 1024x683. Even if it is pixelated then, it still looks sharper then the WordPress version.
    When I save in 90% quality for 1024x683 my photo is 141kB, so 3 times bigger than the WordPress version, but much sharper.

    It seems that WordPress is softening photos to save a lot on compression, as most users aren't looking for sharpness(probably). Still, there should be a way to improve sharpness in exchange for file size.

    I will take a look are there any solutions :-)

    With kind regards.
  • Thank you very much for looking further into this. You don't have to but I appreciate it.

    I'll create my site as full width, with either 5 or 3 bricks. With 5, I love that it goes from 5 - 3 - 2 - 1, when resizing browser on desktop :smile:

    I found ImageMagick Sharpen Resized Images plugin. Just a tad sharpening makes a big difference. The bricks still need to be larger as especially below 500px looks too soft for my taste. 640px looked like a good compromise.

    Btw, I haven't seen it anywhere, but I do not think the CSS pixel ratio thing applies to images at all.

    Right now I have an album with 71 photos @ 720px and they take up 4.46MB in total. That's not bad. At 390px, they take up 1.88MB but they become soft to look at.

    You can have a look if you want:

    With sharpening - quality was set to 65 in ImageMagick. 100 in Image Resize:
    http://v2.zafariqbal.dk/billeder/test-sharpened-1170-wide-3-bricks/
    http://v2.zafariqbal.dk/billeder/test-sharpened-2160-wide-3-bricks/

    ImageMagick disabled. Image Resize is 100:
    http://v2.zafariqbal.dk/billeder/test-no-sharpening-1170-wide-3-bricks/
    http://v2.zafariqbal.dk/billeder/test-no-sharpening-2160-wide-3-bricks/

    If I lower Apollo13 Image Resize quality, then ImageMagic will apply sharpening to compression artefacts. That's not good :smile:

    The plugin hasn't been updated for 2 years and I hope that won't become an issue. I've also ready ImageMagick is more resource heavy, but it doesn't affect me.
  • AirAir
    Posts: 10,970
    Zafar_Iqbal said: With 5, I love that it goes from 5 - 3 - 2 - 1, when resizing browser on desktop
    :+1:

    Zafar_Iqbal said: I found ImageMagick Sharpen Resized Images plugin. Just a tad sharpening makes a big difference. The bricks still need to be larger as especially below 500px looks too soft for my taste. 640px looked like a good compromise.
    I see you were able to test this plugin before me:-) Yes, it is only plugin that I have found that tweaks things on server level, I suppose.
    I will test it and probably add as a recommendation in the theme documentation.
    Zafar_Iqbal said: Right now I have an album with 71 photos @ 720px and they take up 4.46MB in total. That's not bad. At 390px, they take up 1.88MB but they become soft to look at.
    Yes, for so many photos I think it is not bad indeed!
    Zafar_Iqbal said: If I lower Apollo13 Image Resize quality, then ImageMagic will apply sharpening to compression artefacts. That's not good :-)
    Yes, with 65 quality I like soften photos much more then sharpened. Will you switch back to 90 in this case?
    Zafar_Iqbal said: The plugin hasn't been updated for 2 years and I hope that won't become an issue. I've also ready ImageMagick is more resource heavy, but it doesn't affect me.
    I don't think you have to worry about it, as there is probably nothing new that could be updated in the plugin. WordPress will warn you nonetheless.


    With kind regards.
  • I see you were able to test this plugin before me:-)
    Haha. It can get a bit weird because it seems it only runs the first time, when images are uploaded. If I later change brick sizes, width or Apollo13 quality, then the images will be regenerated in the normal way (without sharpness). That's a bit of a bummer and maybe I won't use ImageMagick because of this.
    Yes, with 65 quality I like soften photos much more then sharpened. Will you switch back to 90 in this case?
    Before installing the plugin, I had Apollo13 Image Resize set to 65 (but it looks better on softer photos). If I end up deciding not to use ImageMagic, then I'll use a quality somewhere between 65-90. I might set the quality a bit higher than needed because I also just learned about WebP format and it's awesome. But with optimal quality + WebP compression = too many artifacts.
    I don't think you have to worry about it, as there is probably nothing new that could be updated in the plugin. WordPress will warn you nonetheless.
    Yeah, I was thinking the same.
  • AirAir
    Posts: 10,970
    I would be on the lookout with WebP for now as it is not yet supported in some browsers https://www.keycdn.com/support/webp-browser-support

    It is also not tested with Rife theme, so I don't know how it will behave. Maybe it has some kind of fallback to JPG/PNG but I don't know yet.

    I didn't have time yet to test ImageMagic plugin but it is on my list. Too much is going on ;-)

    With kind regards.
  • I've seen that page too and somewhere else I ready plenty of browser support it. My visitors (potential clients) mainly use Chrome and Safari so I don't care much about less popular browsers. I decided to give it a try - nothing on the site is crucial anyways :smile:

    I found WebP Express for Wordpress, which does the job very easy. It adds rules in htaccess, so webp is used if they exist and the browser supports them. If not, jpg/png is used. If webp file is missing, the plugin generates them on the fly.

    I just tried creating webp for pretty much everything, with quality set to 5 (can go up to 100), to make it very easy to see if it works or not. It works and I didn't notice any issues across different pages.

    I then disabled the plugin and manually deleted all webp files using FTP to see what would happen, and the site is still working fine - but now with normal JPG/PNG files.

    The plugin has an option to "Alter HTML" and it warns it might break styling if the option is enabled, but I didn't notice any issues. Slider, scrollers, albums, lightbox etc. all worked as they should and everything looks as it should.

    I'll try again and test thoroughly, once I have a real site up and running.
  • AirAir
    Posts: 10,970
    Sounds great! I must also check it at some point :-)

    Thanks for all the details!

    With kind regards.
  • Btw, is it possible to stop images from scaling up?
  • AirAir
    Posts: 10,970
    Hey :-)

    Do you mean on hover, or in any other particular situation?

    WIth kind regards.
  • I mean the images generated for bricks, where portrait format photos will scale up, if the original wasn't large enough.
  • AirAir
    Posts: 10,970
    Hey :-)
    Zafar_Iqbal said: I mean the images generated for bricks, where portrait format photos will scale up, if the original wasn't large enough.
    I wrote about it before:
    Air said: In Rife theme what we want to avoid at most is empty space where images provided are not enough size, as it often looks worse then upscaled images.
    There is no option for that, as the size of brick is dictated by image size. I have no idea how bricks should behave to not mess out bricks layout while not being bigger than the original provided file. It would rather look odd. Do you have any idea about it?

    --

    I have added to documentation info about ImageMagick. If you can please check it https://rifetheme.com/help/docs/plugins-recommendations/imagemagick-sharpen-resized-images/

    With kind regards.
  • Bricksizes should remain as they are. I mean the actual photos used for the bricks should use html/css to scale, if possible, instead of actual image upscaling.

    The theme (or Wordpress) resizes based on brick wdith, which means photos in portrait format become much larger than they need to be.
  • Awesome with the The ImageMagick tip. Looks fine to me. I haven't used Elementor a whole lot with this theme yet, but I think the forced update will be OK.
  • AirAir
    Posts: 10,970
    Thanks for checking out my writing! Much appreciated :-)
    Zafar_Iqbal said: Bricksizes should remain as they are. I mean the actual photos used for the bricks should use html/css to scale, if possible, instead of actual image upscaling.
    I don't think it would work as you desire. It would probably require a different approach.

    Anyway - could you show me example album where you face this issue? I wonder how come you have there such a small photo that would get upscaled?

    With kind regards.

  • I've created a gallery for you:
    http://v2.zafariqbal.dk/billeder/bricks-upscaling-portrait-format

    Resolution before uploading:
    Landscape: 1440x957px
    Portrait: 720x1083px

    The album has width set to 4320px and uses 3 bricks. Portrait format photos in the bricks gets scaled up by 200%, to 1440x2166px.



    An interesting experiment I did: I downloaded photos from the Apollo temp folder, rescaled portrait format photos to 720x1083px and then replaced them on the server. It doesn't break anything, new images are not being created and I can't tell any difference in quality. I'll save few MB too in filesize :)

    You can see it here:
    http://v2.zafariqbal.dk/billeder/manually-rescaled-temp-files-portrait-format/



    The solution I'm currently using, is my balance between loadtimes, quality and relative size.

    On smartphones, the larger photos means visitors can zoom. I did a poll, and 93% said they zoom, when they browse a photographers site. Most of the voters were casual people (potential clients), not other photographers.

    Relative size is relevant for lightbox on desktop and 1083px seemed like a good match to go along with landscape photos being 1440px wide. But portrait format photos in bricks are being scaled up and it's just a waste of bandwidth.
  • AirAir
    Posts: 10,970
    Thanks for the album:-)

    Let us look at this photo:
    In album: http://v2.zafariqbal.dk/wp-content/uploads/apollo13_images/zi20151010_143001_7033c-720x1083-6toelc5zfwspe4v1zm0fq1w12hqnzhru5u.jpg
    Original: http://v2.zafariqbal.dk/wp-content/uploads/2019/04/zi20151010_143001_7033c-720x1083.jpg

    It looks that your changes on the server have affected both albums, as you have probably same sizes set there. So I can't see the difference.

    However, why are using 4320px of width for the album? Isn't it a bit too much? Such width will force you to use 1440px wide images at least.

    I would set max-width to 1920px and keep current sizes of images(1440 & 720), so resizing script would have "margin" of size to work with.

    With kind regards.
  • Looks like I resized the wrong files :blush: Sorry about that.

    Normally uploaded:
    http://v2.zafariqbal.dk/billeder/normal/

    Replaced temp files, with manually downscaled photos:
    http://v2.zafariqbal.dk/billeder/resized/

    Both use same album width and number of bricks.

    I'm using a very wide width, because it forces the photos to be larger. If the photos are larger than display size, then on smartphones, visitors are able to zoom in and still see real detail.

    I did a poll about this some days ago, and 93% answered they zoom, while browsing a photographers website. Most who voted were casual people and not other photographers :)

    I'll agree, that it's a waste on desktop. I'm prioritizing smartphones a lot and since the brick photos are "too large", I can get away with using aggressive compression. The RESIZED album has an average photo filesize at 108KB.

  • AirAir
    Posts: 10,970
    Thanks for your sample albums - they are very helpful!

    Now I can see your point clearly, and as you say album still works good, while the file size is not increased without the need for it.

    In your example, it is clear, that generating higher size images only waste file size.
    I will look for a way to change and will reply here so we could test solution together.

    With kind regards.
  • Awesome. I'll gladly help in any way I can :smile:
  • AirAir
    Posts: 10,970
    Hey :-)

    I couldn't sleep so I made some corrections to the resizing script;-)

    Please unzip the attached file and upload it to wp-content\plugins\apollo13-framework-extensions\supports\image_resize\.

    After this, you can test how it works on your albums when it respects the max width of the photo.

    With kind regards.
    zip
    zip
    class-apollo13-image-resize.zip
    4K
  • Wonderful!

    I didn't notice any issues and it works as expected.

    I created a new album - and it works fine:
    http://v2.zafariqbal.dk/billeder/new-php-image-resize/

    I also deleted theme temp files for an older one, and it works fine too:
    http://v2.zafariqbal.dk/billeder/new-php-image-resize/

    The old one had a total of 11MB for all photos, and now it's down to 7.28MB :)
  • AirAir
    Posts: 10,970
    Thanks for the feedback!

    I will add it with the next update of the companion plugin :-)

    With kind regards.
  • Great! Glad I could help.
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!