Jump to content

Create multiple different profile pic thumbnail sizes


Recommended Posts

Currently, you only create one thumbnail for profile pictures, which is 240x240px, to account for 2x DPI on the largest profile pictures that you display. However, personally, I would rather trade the lower bandwidth (and therefore higher page speeds) for the higher disk usage to get each image turned into at least a couple of different sizes. Currently, you have several different profile picture sizes defined in CSS:

  • tiny - 34px - used in last poster information
  • mini - 44px - used I think in question forums, and certain calendar things
  • small - 54px - used mostly in commerce, and also in featured topics in question forums
  • medium - 75px - used on hovercards and in quite a lot of places in commerce
  • large - 90px - ACP member view and system log only
  • xlarge - 120px - profile and forum posts

Ideally, you would cut down the number of these, and make them multiples of one another, but I guess it's too late for that. I do however think that making 34px, 75px, 120px and 240px copies of the image would cover the most common sizes of the image. Rather than setting one src, with the 2x image, you should instead use a srcset to define the highdpi image for browsers that want to display the highdpi version, and use a more correctly sized image other times.

This would mean that images may not be cached by the browser as usefully, because they might have to load two copies of one image, but I think overall that would be cancelled out by the number of times a massively oversized image (for the tiny images, the picture is 7x too large in each direction, so the file is 50x larger than it needs to be) is loaded when it doesn't need to be.

If this is added, it should be a setting rather than automatic IMO, because some sites are more constrained on file size than others, particularly CiC.

Link to comment
Share on other sites


This topic is now archived and is closed to further replies.

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...