Optimize and add device images

[GMart]

Reduce images folder size from 2.84 MB to 1.41 MB using PNG Optimize for web and resizing.
Reduced all images to max size of 500 x 500.
Add photos for Private, Unknown, DIY. Icons from Wikimedia.
Add Icon for Heltec HT62 (Chip module) Image from Heltec's website.
Let me know if there would be a better icon for "DIY".
Add Image for Heltec Wireless Tracker V1.0 since it looks fairly similar to V1.1.

[liamcottle]

Thanks!

I did actually run the images through tinypng to optimise, but I didn't cap the size, so that helps a bit.

Personally not a fan of the wikimedia icons. Let's remove those. I don't think they help out at all when showing in the map UI, just takes up space without really showing you what the hardware is.

• ✅ Reduce images folder size from 2.84 MB to 1.41 MB using PNG Optimize for web and resizing.
• ✅ Reduced all images to max size of 500 x 500.
• ❌ Add photos for Private, Unknown, DIY. Icons from Wikimedia.
• ✅ Add Icon for Heltec HT62 (Chip module) Image from Heltec's website.
• ✅ Add Image for Heltec Wireless Tracker V1.0 since it looks fairly similar to V1.1.

Let me know if there would be a better icon for "DIY".

I think it's fine to have no image for now. If you can remove those wikimedia images, I'll merge in.

Map UI	Device List

Looks like this one actually increased in size lol. But no problem...

[GMart]

Ok thanks.
I didn't realize the images would show so large. I will create a issue to add error checking. Currently, the site requests 2 dozen images that don't exist. Maybe there can be a check before it does its GET request?
Thanks.

[liamcottle]

Maybe there can be a check before it does its GET request?

Yeah, there's no check at the moment, because it's just an img element pointing to the image it thinks should exist, and uses the onerror to hide the img tag if it couldn't load it.

I saw this issue of loading images over and over when I originally implemented it, but don't have a quick fix in mind just yet, so left it as is.

One option is to fetch an endpoint that gives a list of all available images, but if that fails, you get no images.
Another option, is to return an image_url from the nodes api endpoint. If it's null, there's no image. This would mean the server side does the check to make sure images exist in the image folder.

I'll have a think about it a bit more later...

[GMart]

OK, I added the HELTEC_HT62 image, thinking that there were many of those devices, since a few days ago it showed up high in the list of devices. Now, there are only 2, and also the image isn't showing up. I wonder what happened?

[liamcottle]

Those were probably the nodes I deleted from the map for spam. Discord thread for reference:
https://discord.com/channels/867578229534359593/871553604652240948/1230098501753638994

[CamFlyerCH]

I can not access this thread. On what discord server / channel is this ?

[liamcottle]

@CamFlyerCH it's in the mqtt channel of the official Meshtastic Discord. You can find the link to it on https://meshtastic.org as generating invite links is disabled.