Optimize Image Size Across Browsers/Devices

williare2
Community Participant

How should I insert image files so that they retain good sizing from a browser on a desktop or laptop to a tablet or phone?

I would say consistent sizing or relative sizing (relative to screen width?)...but neither would be optimal if you go down to a phone's screen.  I use tables to center a row of multiple buttons across a row in a browser (otherwise if I dont have the table they stack- each one centering in the middle of its own row).   But the table structure seems to interact with sizing of images and that appears to be done without telling me- the stated pixel size of the image hasnt changed, but it might be visibly smaller.

I dont understand how choosing the preset sizes or specifying number of pixels for images does when the page is viewed from a different setting.  I have been experimenting and not feeling like I understand HOW to control the image sizes across the different ways the page may be viewed.

Someone must have this figured out. Is there a right way to ensure that buttons create 400x400 pixels (Large size in Canvas) would maintain that size whereever they could, but then maybe when accessed via smaller screen sizes, they would reduce as needed but maybe not in direct ration to the change in screen size...since that might make them illegible?

NOTE:  I am designing the template for my school and I created a 7-min video logging several issues I was seeing that seemed to hamper me to some extent.  Understandably, I dont see a way to send that as a file to the dev team...guess that would be tough for them to handle.  Let me try to ask the questions here (after searching for like concerns). 

Labels (1)
0 Likes