How to properly preconnect and preload wikemedia images?

Question

Context: I am creating a custom WebGL texture map for my cube, and I need to load in 6 wikemedia images. I have read that by using preconnect and preload attributes, such as

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel='preload' as='style' href='https://fonts.googleapis.com/css2?family=Material+Icons&family=Rubik:wght@300;400;500;700;900&display=swap'>
<link href="https://fonts.googleapis.com/css2?family=Material+Icons&family=Rubik:wght@300;400;500;700;900&display=swap" rel="stylesheet">

I am able to load them in faster. The thing is, I don't really know what href, if any, I should connect to in terms of Wikimedia Commons, which is where all the images are being pulled from. I have tried

<link rel='preconnect' href='https://www.wikemedia.org' crossorigin>
<link rel='preload' as='image' href='https://upload.wikimedia.org/wikipedia/commons/9/97/Polar_bear_cubs_in_the_snow.jpg'>

and do not know if I have even connected to the right source. Is there an easy way to find which href value you should use? I would have never guessed (in the Google Fonts example), that the source would be https://fonts.gstatic.com.