jair101 Posted April 14, 2017 Posted April 14, 2017 I am trying to find the optimal image size settings for my gallery, but it seems different image sizes are all over the place. This maybe is partiallly my fault for not researching this better, but it also seems that IPS is at fault too. OK, so we have 4 image sizes: thumbnail - 100x100 for me small - 300x300 for me medium - 1200x900 for me large - 2000x1900 for me My intention is to have the thumbnail size where, well, I need to list thumbnails and I don't care much if the picture is totally visible or not, so I fugured 100x100 is enough. I want to have small images in widgets, Pages blocks, etc. I want to have medium when the image is open in the gallery and I want to have large when the user clicks the lightbox, so he can view the image in almost all its glory. What happens instead is that for some reason on my homepage (https://magelanci.com/) image widget, medium size is used by default by IPS. Which means that I load few MB worth of pics, which are automatically resized to 175px in browser by IPS, which is terribly inefficient. Why the widget needs the medium size if it is going to resize it? But thats not all, when you click on the image it points to gallery where the large image is displayed again browser resized to 300-something pixels: https://magelanci.com/gallery/image/55156-2013100304pretoriajpg/ Why not use the small image size here? I am afraid that if I change medium to 200x200, so that it works nicely with the widget, it might affect some other area where better resolution is needed. For some reason I don't believe small image size is used anywhere, except when you select "other sizes" in image view, in this case I am not even sure I need it. In general, does anyone have any idea where: thumbnail, small, medium and large images is used? What are your gallery image settings?
jair101 Posted April 14, 2017 Author Posted April 14, 2017 @Joel R - tagging you here. I think your board is also image heavy, I wonder what you do with your gallery image settings.
Joel R Posted April 14, 2017 Posted April 14, 2017 8 minutes ago, jair101 said: @Joel R - tagging you here. I think your board is also image heavy, I wonder what you do with your gallery image settings. I left it as default. Those image settings, as far as I understand, only apply to the image's Other Sizes. They're not used anywhere else like album thumbnails, blocks, etc.
jair101 Posted April 16, 2017 Author Posted April 16, 2017 OK, I spent quite a bit of time in to this, I might as well share what I have found. We have settings for 4 gallery images: thumbnails, small, medium, large. From what I can gather the respective images are used around the suite at the following places (N.B. most of the time they are resized due to the responsiveness). : Album preview, small images, the single larger image is approximately 200px. The rest are thumbnails, 100x100: Album view "list" setting uses small resized to 125px via CSS: Album view "large preview" setting uses medium resized to fit in to the column if larger: Album view "thumbnails" setting uses small, roughly resized to 300px width, depending on your resolution: You probably notice that it is counterintuitive - the thumbnail setting does not use thumbnail images, but small ones, while large setting uses medium images... Gallery frontpage, latest images, small resized to approximately 300px width depending on your resolution: Image view, large image is shown even though it is heavily resized in javascript, thus not possible to change it easily. This is the most ineffective and weird one of all, because for some reason the image is actually getting bigger if you reduce your resolution when the navigation collapses. On full widht: Reduced width: Default gallery widget, medium is used, which then is resized via css to 125px. Terribly inefficient, because the same medium size is used when you want to view the album as "large previews". ============================================== So to summarize and what I figured are the best settings in my case (fixed width 1400px, image heavy community, it may vary for your circumstances) Thumbnails are used only on album preview page, 100x100px looks ok size for me. Small - this size is most commonly used - on both thumbnail and list view on album view, when viewing latest images on gallery frontpage and in the widget when modified. I think 200px is good compromise in this case. Medium is used in the gallery widget and with large previews, two conflicting areas - in the widget you want small light pictures, in album view you want large, nice looking ones. My solution - change medium width to 900px (approximately the width of the main column when sidebar is included) and modify the widget template to call for small pictures instead. Large - here I am puzzled. It seems that it is used on the main image view, but is heavily downsized, at the same time I want to have a large nice looking pic available in lightbox. Probably around 900px is also enough. Maybe if I leave this empty, gallery will use the medium picture instead? I think I can live with that.
jair101 Posted April 16, 2017 Author Posted April 16, 2017 Some more findings: If you leave Large settings empty, then the unprocessed original is used - BAD, don't do that. If "small" size is too small for some areas (i.e. gallery homepage) then medium is used instead, so please make sure your small size is still large enough. I decided to use the thumbnails in the widget and bump their size from 100 to 125px. Final version for me: Thumbnails: 125px; core usage - gallery widget Small: 350px for me; core usage - gallery homepage Medium: 900px for me; core usage - album view with large previews. Large: 900px for me; core usage - image view and single image lightbox. Yeah, it would have been great if I can use only medium or only large, but alas, that doesn't seem to be possible. That kinda doubles the necessary disk space, which really sucks.
Optic14 Posted August 7, 2017 Posted August 7, 2017 On 16/04/2017 at 10:14 PM, jair101 said: Image view, large image is shown even though it is heavily resized in javascript, thus not possible to change it easily. This is the most ineffective and weird one of all, because for some reason the image is actually getting bigger if you reduce your resolution when the navigation collapses. On full widht: Thanks for the very detailed post regarding the behaviour of the thumbnail sizes. Is it possible to adjust the height of the full width image view? No matter what size I put in the settings + rebuild for large it seems to have no effect.
jair101 Posted August 7, 2017 Author Posted August 7, 2017 I don't think this is that easy, at least not for me. It seems that this size is determined in javascript, which means you will have to modify the JS files. I guess it is doable if you have any idea about JS, but it is definitely not as easy as changing settings or modifying the template.
zyx Posted August 17, 2017 Posted August 17, 2017 Does nobody else think this is quite a serious flaw, and something that should be fixed in future versions?
jair101 Posted August 17, 2017 Author Posted August 17, 2017 In general it seems that not much thought went in to optimizing the gallery and attachments in terms of efficiency and wasted disk space. I have also asked for integration with image optimisation algorithms, but it doesn't seem to get any traction. My community is very image oriented, sometimes I can have a 100 images on one topic page. You can imagine what happens when all of them are on average 500kb due to inefficient compression... Right now I put my site behind paid Cloudflare and their Polish algorithm helps somewhat, but it is far from perfect.
Joel R Posted August 17, 2017 Posted August 17, 2017 I've asked for lazy load of images before, which I think is a reasonable request. Integration with image optimization is something I would love, but I just don't see it happening through IPS. I use my own compression before uploading but that only benefits my photos.
Optic14 Posted October 1, 2017 Posted October 1, 2017 Just adding to my post above, I found a plugin by @Makoto that allows you to override the full image height. Works great.
Bill Edwards Posted October 1, 2017 Posted October 1, 2017 On 4/16/2017 at 3:39 PM, jair101 said: That kinda doubles the necessary disk space, which really sucks. Have I read that right? Surely the images are stored once and resized by the software as necessary? I hope it doesn't resize and store all sizes?
jair101 Posted October 1, 2017 Author Posted October 1, 2017 1 hour ago, Bill Edwards said: Have I read that right? Surely the images are stored once and resized by the software as necessary? I hope it doesn't resize and store all sizes? Each image is resized to 4 files and all of them are stored: Large, Medium, Small, Thumbnail. You can't turn a size off even though you might not need it. For example I am perfectly fine displaying the medium size where large is required, but there is no way to do that.
Bill Edwards Posted October 1, 2017 Posted October 1, 2017 16 minutes ago, jair101 said: Each image is resized to 4 files and all of them are stored: Large, Medium, Small, Thumbnail. You can't turn a size off even though you might not need it. For example I am perfectly fine displaying the medium size where large is required, but there is no way to do that. Many thanks for clarifying: I've run into problem after problem since been advised to use the Gallery for photos - this is the last straw - I can't afford for my S3 storage bill to go any higher. I'm now convinced that Gallery is not fit for purpose
Makoto Posted October 1, 2017 Posted October 1, 2017 On 8/7/2017 at 9:31 AM, jair101 said: I don't think this is that easy, at least not for me. It seems that this size is determined in javascript, which means you will have to modify the JS files. I guess it is doable if you have any idea about JS, but it is definitely not as easy as changing settings or modifying the template. You're correct. the size is determined dynamically via a Javascript controller. My plugin which @Optic14 linked allows you to safely override this behavior and set your own sizing rules.
Recommended Posts
Archived
This topic is now archived and is closed to further replies.