Generate profile photos

[Adlago]

Generate profile photos from first letter of the member's display name is a good idea, but why the size of the generated image is 500 x 500 pixels?

The size most commonly used here is 34 x 34 pixels.
This makes a serious recalculation from a browser at a loading site. This makes the site delay slower. It is especially noticeable when online has more than 10 members with such an avatar.
Dependency is unpleasant - the more members are online - the so much load site speed decreases ...

Please reduce the output size of this generated image.

[Adlago]

This is bug in v.4.2.5

My settings in group Members/Social - "Maximum profile photo width/height" is 170px. All old members is OK - size 170 px.,but new member created now /v.4.2.5/ - size 500 x 500 px !?!

This, too, I have noticed in several other websites.

Please pay attention - this sharply worsens speed loading sites and creates a bad image of the IPS suite ...

[Adlago]

[aia]

1 hour ago, Adlago said:

This is bug in v.4.2.5

Bugs should be reported via tickets in your client area. This section is for ideas.

[Adlago]

2 minutes ago, Mr 13 said:

Bugs should be reported via tickets in your client area. This section is for ideas.

Removing serious stupid mistakes (bugs) is the best idea for IPS

[Dll]

On 23/10/2017 at 10:54 PM, Adlago said:

Generate profile photos from first letter of the member's display name is a good idea, but why the size of the generated image is 500 x 500 pixels?

The size most commonly used here is 34 x 34 pixels.
This makes a serious recalculation from a browser at a loading site. This makes the site delay slower. It is especially noticeable when online has more than 10 members with such an avatar.
Dependency is unpleasant - the more members are online - the so much load site speed decreases ...

Please reduce the output size of this generated image.

And more to the point, your pagespeed insights score must have dropped at least 10 points. Are you feeling ok? 

[Adlago]

6 minutes ago, Dll said:

And more to the point, your pagespeed insights score must have dropped at least 10 points. Are you feeling ok? 

Look at these tests - the first ones use letter avatars in the size generated by the IPS original - 500x500 pixels
The following tests have the same avatars but are optimized at 34 x 34 pixels
And these are just a few - about 3-4 images ... Decide for yourself on the this topic.

---------------------------------------------------------------------------------------------------------------------------------------------------------------

[Nick Willson]

HI Adlago

Recently I realised just how heavy my Invison Pages based homepage is and was really shocked.  I agree with Adlago that the issue of the icon sizes must really be looked at and improved.

3 hours ago, Adlago said:

This is bug in v.4.2.5

I consider it so but others may well consider it 'by design'.

To further illustrate the issue https://invisioncommunity.com/forums/ weighs in at a hefty 7.46MB .... ouch!

Best regards

Nick

[David..]

I agree. The size should be lowered and a compression should be done for the generated images.

[Adlago]

In test site 4.3 these images are again 500 x 500 px.
Is there a setting in the ACP /Profile that an administrator can use for correction only this images?

[bfarber]

It is a constant that you set in constants.php (rather than a setting in the AdminCP).

We generate the images as 500x500 by default due to retina displays.

[Joy Rex]

 

1 hour ago, bfarber said:

It is a constant that you set in constants.php (rather than a setting in the AdminCP).

We generate the images as 500x500 by default due to retina displays.

Wouldn't it be better (especially for HiDPI displays) since this is a simple circle with text to either do it via CSS, or SVG? It would probably cut down on the size, and be resolution-independent.

[Adlago]

4 hours ago, bfarber said:

It is a constant that you set in constants.php (rather than a setting in the AdminCP).

We generate the images as 500x500 by default due to retina displays.

There is no logic here - by default, you guarantee a delayed loading site due to one color surrounded by a large 500 x 500 border ...
These images simply decorate the profile of members who do not want to put their avatar. This is unimportant for site. These images also provide too many display queries, especially if there are many online members.
Believe - this is an absolute brake for SEO.

[bfarber]

It is a feature we are considering evolving. When it was introduced, the general standard was to create image files and we did the same (to prevent issues with social media sharing, email notifications and so on). That said, we are always monitoring and watching the landscape to adapt when appropriate and this area is no different.

[Adlago]

@bfarber

Using constants php is a good solution, I also use it. But this affects all such images once a rule has been introduced in the constants php. What do I do for images that are already generated?
Personally, to help my colleague here for 3 nights, I resized over 2,500 members' profiles. Yes, now its site is flying, but I will not do it any more.

What do thousands of your clients do, for whom this is not an easy action?

[prupdated]

46 minutes ago, Adlago said:

@bfarber

Using constants php is a good solution, I also use it. But this affects all such images once a rule has been introduced in the constants php. What do I do for images that are already generated?
Personally, to help my colleague here for 3 nights, I resized over 2,500 members' profiles. Yes, now its site is flying, but I will not do it any more.

What do thousands of your clients do, for whom this is not an easy action?

So there is no thumbnail being created for these avatars?

[Numbered]

I think new method, like ->getImageResized( [int|null] $width, [int|null] $height, [bool] $save_proportion_or_not ) - must be present in IPS framework.

For example, we have image something.jpg 500x200. In some place this image will show in block with 250 width. So, we can just call ->getImageResized(250) and our image will save in same place with filename something_250x100.jpg. get, store, perfect working. Same for height ->getImageResized(null, 20) - return someghing_50x20.jpg. Or ->getImageResized(300, 20) - will return someghing_50x20.jpg because 20 is smaller and we didn't define $save_proportion_or_not to false. So ->getImageResized(300, 20, true) - shoud return something_300x20.jpg ugly image. But just what you want.

I'm not first, who dream it. This technics already done by other (not community) frameworks very long time ago. It worked and perfect. Be extremely good if IPS get this experience and did it too. Than every place can get absolutely good image for special needed place.

If IPS want i can share detailed experience of that realization with all needed image operations with gd, imagick, storing, expiring. And it's a good idea for creators create a this tool plugin 

[Adlago]

11 minutes ago, prupdated said:

So there is no thumbnail being created for these avatars?

Nope. Browser loads 10-12 kB 500x500 px, and resized by CSS  rules

[prupdated]

8 minutes ago, Adlago said:

Nope. Browser loads 10-12 kB 500x500 px, and resized by CSS  rules

I'd say that's some valuable feedback then is to at least generate a thumbnail image for these.

That explains why earlier I saw blank thumbnail entries in the database for all of these which is how I wound up finding this topic.

I used to use a random avatar assignment script to do all this. I turned it off and went with this new method. But, I didn't realize this was going on.

That might be another idea or feedback, is to allow a pool of random avatars or something else be selected instead of letters.

In any case, the letters are now off for me. I'm back to giving new members random avatars (with thumbnails) and also running a script now to revert back the 10,000 members who got these big letters.

[prupdated]

19 minutes ago, Upgradeovec said:

I think new method, like ->getImageResized( [int|null] $width, [int|null] $height, [bool] $save_proportion_or_not ) - must be present in IPS framework.

For example, we have image something.jpg 500x200. In some place this image will show in block with 250 width. So, we can just call ->getImageResized(250) and our image will save in same place with filename something_250x100.jpg. get, store, perfect working. Same for height ->getImageResized(null, 20) - return someghing_50x20.jpg. Or ->getImageResized(300, 20) - will return someghing_50x20.jpg because 20 is smaller and we didn't define $save_proportion_or_not to false. So ->getImageResized(300, 20, true) - shoud return something_300x20.jpg ugly image. But just what you want.

I'm not first, who dream it. This technics already done by other (not community) frameworks very long time ago. It worked and perfect. Be extremely good if IPS get this experience and did it too. Than every place can get absolutely good image for special needed place.

If IPS want i can share detailed experience of that realization with all needed image operations with gd, imagick, storing, expiring. And it's a good idea for creators create a this tool plugin 

That would be good if it were built in to IPS.

Right now it's pretty simple on nginx, with a few image_filter lines.

So if you want a 250x250 (or whatever size) version of /image.jpg in the URL, you just call /250x250/image.jpg instead.

Something that simple would be good to have to keep image sizes from being too large. 

Although, you have to be careful not to resize the same images in too many places. Then the client doesn't have the cache of all the sizes so it can be counter productive.

[prupdated]

Random avatars I am back to using for new members work out like this ( selects from about 200 ):

[SeNioR-]

@Adlago i fully agree. I discovered that avatars have 500 pixels just yesterday. I have blank avatar in ACP too. I was shocked after testing site on GTmatrix  

Resizing in constants.php works only for new register members.  

<?php
define( 'THUMBNAIL_SIZE', '100x100' ); /* size of letter avatar default size is 500x500 */

 

[Sheffielder]

 

Is there a way to quickly sort this for someone with limited coding knowledge

Is there a way to turn these huge letter avatars off?

[opentype]

3 minutes ago, Sheffielder said:

Is there a way to turn these huge letter avatars off?

[Sheffielder]

Awesome thank you