Currently, Popups is causing a lot of requests to non-standard sizes. We are planning to start rate-limiting hits to those (T408062: FY 25/26 WE 5.4.7 Standardize thumbnail sizes and T402792: Consider rate limiting non-standard thumbnail sizes) urgently for various reasons. So it would break Popups images now.
It currently takes the thumbnail url, extracts the thumbsize and changes it on the fly:
function generateThumbnailData( thumbnail, original, thumbSize ) { const parts = thumbnail.source.split( '/' ), lastPart = parts[ parts.length - 1 ], originalIsSafe = isSafeImgFormat( original.source ) || undefined; // The last part, the thumbnail's full filename, is in the following form: // ${width}px-${filename}.${extension}. Splitting the thumbnail's filename // makes this function resilient to the thumbnail not having the same // extension as the original image, which is definitely the case for SVG's // where the thumbnail's extension is .svg.png. const filenamePxIndex = lastPart.indexOf( 'px-' ); if ( filenamePxIndex === -1 ) { // The thumbnail size is not customizable. Presumably, RESTBase requested a // width greater than the original and so MediaWiki returned the original's // URL instead of a thumbnail compatible URL. An original URL does not have // a "thumb" path, e.g.: // // https://upload.wikimedia.org/wikipedia/commons/a/aa/Red_Giant_Earth_warm.jpg // // Instead of: // // https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Red_Giant_Earth_warm.jpg/512px-Red_Giant_Earth_warm.jpg // // Use the original if it's a supported image format. return originalIsSafe && original; } const filename = lastPart.slice( filenamePxIndex + 3 ); // Scale the thumbnail's largest dimension. let width, height; if ( thumbnail.width > thumbnail.height ) { width = thumbSize; height = Math.floor( ( thumbSize / thumbnail.width ) * thumbnail.height ); } else { width = Math.floor( ( thumbSize / thumbnail.height ) * thumbnail.width ); height = thumbSize; } // If the image isn't an SVG, then it shouldn't be scaled past its original // dimensions. if ( width >= original.width && filename.indexOf( '.svg' ) === -1 ) { // if the image format is not supported, it shouldn't be rendered. return originalIsSafe && original; } parts[ parts.length - 1 ] = `${ width }px-${ filename }`; return { source: parts.join( '/' ), width, height }; }
This should at least use the standard sizes (e.g. build the width, the jump to the next larger one). In the longer term, it probably shouldn't change the url to the thumbnail on the fly.