XF 1.5 Massive images of small mobile screens

[Alpha1]

When mobile users post screenshots then these screenshots are huge on desktop. Images that are normally small are now blown up massively. This is logical because modern phones have high resolution. its common to get pics of 1200x2200px
So its logical this happens, but it doesn't make sense to show huge images for small pictures. On desktop I need to reduce my browser size to view it.
Does anyone have an idea how to solve this?

 

[AndyB]

I suggest using this add-on:

https://xenforo.com/community/resources/resize.5032/

 

[Pierce]

https://xenforo.com/community/threa...click-max-width-message-messagecontent.94430/

Perhaps it be best to limit the max width of all images.

I would use a percentage but a max value like 500px.

When you tap on the image then it becomes super massive.

 

[AndyB]

Perhaps it be best to limit the max width of all images.

Yes I suggest 1600 x 1600 as a max width and height.

 

[eva2000]

When mobile users post screenshots then these screenshots are huge on desktop. Images that are normally small are now blown up massively. This is logical because modern phones have high resolution. its common to get pics of 1200x2200px
So its logical this happens, but it doesn't make sense to show huge images for small pictures. On desktop I need to reduce my browser size to view it.
Does anyone have an idea how to solve this?

that's why i integrated Google's ngx_pagespeed into my Centmin Mod LEMP web stack https://centminmod.com/nginx_ngx_pagespeed.html as it auto resizes images on the fly for screen resolutions for desktops and mobile devices via optimization filters for images https://developers.google.com/speed/pagespeed/module/filter-image-optimize and auto converts images to webp format if it detects web browsers that support webp

Optimize Images
Introduction

The PageSpeed Modules optimize your images to minimize their size and thus reduce their load time. They remove non-visible image information and apply high-efficiency compression techniques. This can result in a data saving of 50% or more.

Using PageSpeed Modules, you can focus on the content of your site, knowing your visitors will receive images in the best format and dimensions for their device and browser while using minimum bandwidth.

The image quality levels can be specified using various parameters, listed here in order of precedence.

1. Format-specific qualities for save-data: JpegQualityForSaveData and WebpQualityForSaveData.
2. Format-specific qualities for mobile: JpegRecompressionQualityForSmallScreens,WebpRecompressionQualityForSmallScreens, and WebpAnimatedRecompressionQuality.
3. Format-specific qualities for all other cases: JpegRecompressionQuality, WebpRecompressionQuality, andWebpAnimatedRecompressionQuality.
4. Format-generic quality for all other cases: ImageRecompressionQuality.

on average it reduces my image sizes site wide by ~52% https://community.centminmod.com/threads/benefits-of-ngx_pagespeed.1032/

i.e. https://developers.google.com/speed...imize#JpegRecompressionQualityForSmallScreens

JpegRecompressionQualityForSmallScreens
This option sets the quality for JPEG images for users visiting your site from a mobile device. It overrides JpegRecompressionQuality, unless it is set to -1.

https://developers.google.com/speed...imize#WebpRecompressionQualityForSmallScreens

WebpRecompressionQualityForSmallScreens
This option sets the quality for WebP images for users visiting your site from a mobile device. It overrides WebpRecompressionQuality, unless it is set to -1.

Yes I suggest 1600 x 1600 as a max width and height.

yeah that helps too i set to 1920x1920 as mobile cameras still have way high resolutions and not many folks resize their camera photos for web upload from their mobile devices

FYI, ngx_pagespeed would be way more effective if Xenforo folks implemented this suggestion too https://xenforo.com/community/threads/removing-php-extension-from-proxy-php-images.81988/

 

[eva2000]

And specific filter https://developers.google.com/speed...age-optimize#resize_rendered_image_dimensions

Resize images to rendered dimensions
This filter shrinks images to their rendered dimensions on the web page. Unlike resize_images, it ignores any widthand height attributes specified for the images. If the same image appears more than once on a page it is resized to the largest rendered dimensions.

To report the rendered dimensions back to the server, this filter injects JavaScript code to your pages which beacon the sizes back. Your page needs to be visited several times before the server figures out the rendered dimensions. To use this filter, the CriticalImagesBeaconEnabled filter must be enabled (this is the default).

Note: If both resize_rendered_image_dimensions and resize_images are enabled,resize_rendered_image_dimensions takes precedence.

Note: This filter always strips color profiles and metadata. The resized image may be recompressed or converted to a new format and quality based on your configuration.