Responsive png icons - buttons with transparent background - html

Question

I am developing an oscilloscope type of instrument where the screen is a mobile device. I am using canvas to draw the oscilloscope image and I have several buttons to perform functions like setup, settings, etc. For the buttons, I use .png icons because they have a transparent background. Everything works fine if the user uses a tablet but I want to be able to use other devices like smartphones or laptops.
My problem is that I cannot make the .png images responsive to screen size. Besides having several different images for different screen resolutions and sizes, is there a way to make .png icons responsive?
Here is my button/icon code (nothing fancy):
.thumbs {
position: fixed;
bottom: 20px;
right: 20px;
width: 64px;
}
.buttonPNG{
display:block;
cursor: pointer;
border: 1px;
margin:2px;
}
<div class="thumbs">
<div class="buttonPNG">
<img src="./home.png" alt="home" onclick="show_home()">
</div>
<!-- several such buttons -->
</div>

Answer 1

The only way I can resize PNG images is to use the picture tag. This is not the best solution in my case, because the server is a tiny ESP32 with limited resources and storing multiple images for each button takes a lot of flash memory. But since it is the only solution until now, I post it if somebody finds it helpful. Multiple source tags can be present and one img tag, as a fallback if none of the source tags matches.
<div class="buttonPNG">
<picture >
<source media="(min-width:650px)" srcset="./next_L.png" onclick="selectionUp()">
<img src="./next1_S.png" alt="next" onclick="selectionUp()">
</picture>
</div>

Answer 2

Setting the width and height of an image to a percentage
If Im understanding the question correctly, you want to scale the images to size depending on the screen size. This can be done by setting the width and height of the image to a percentage. For example:
width: 70%; height: 70%;
will set an image to 70% of the screen width and height. If you resize the window, the image will become responsive and adjust.
Using media queries
Another way to get responsive images would be media queries. What you can do is say if the screen width is a certain width or less, set an image to a specific width/height. Here is some code that will set the background of the body to lightblue if the user is on a mobile device with a small screen size:
#media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
Here is a link to a tutorial on media queries and how to use them: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
EDIT
This is what I would do: I would set up some styling for your images meant for viewing them on a computer. Then I would use media queries to say if the viewer is on a small screen width (Phone) then change the styling and the same goes with a tablet. Some example code:
/* Extra small devices (phones, 600px and down) */
#media only screen and (max-width: 600px) {
/*Stying for phones*/
}
/* Small devices (portrait tablets and large phones, 600px and up) */
#media only screen and (min-width: 600px) {
/*Styling for large phones.*/
}
/* Medium devices (landscape tablets, 768px and up) */
#media only screen and (min-width: 768px) {
/*Styling for tablets and ipads*/
}
/* Large devices (laptops/desktops, 992px and up) */
#media only screen and (min-width: 992px) {
/*Stying for labtops*/
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
#media only screen and (min-width: 1200px) {
.buttonPNG{
display:block;
width: 100px;
height: 100px;
cursor: pointer;
border: 1px;
margin:2px;
}
}
So there I set up a bunch of queries saying that if the user is on a certain device with a certain screen width, styling the buttons a specific way. If you want the buttons to have a width and height of 20px on mobile, just add the styling inside the mobile loop where the comment is like so:
/* Extra small devices (phones, 600px and down) */
#media only screen and (max-width: 600px) {
.buttonPNG{
display:block;
width: 20px;
height: 20px;
cursor: pointer;
border: 1px;
margin:2px;
}
}