# Images as buttons- Realistic size? **URL:** \ **Category:** Ask for Help\ **Created:** [September 3, 2020, 7:35pm UTC](https://community.glideapps.com/t/images-as-buttons-realistic-size/15228 "2020-09-03T19:35:51Z")\ **Posts on this page:** 19\ **Page:** 1
**Author:** ![S\_C](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/s_c/32/12766_2.png) [@S\_C](https://community.glideapps.com/u/S_C)\ **Post date:** [September 3, 2020, 7:35pm UTC](https://community.glideapps.com/t/images-as-buttons-realistic-size/15228/1 "2020-09-03T19:35:51Z")
Has anyone figured out how to create an image that works as button but is not huge? I am trying to create multiple buttons. I tried to stack 3:1 images stacked on each other but those look huge in comparison to other buttons, text. Here is a pic ![Flappd (Beta) · Glide · Create Apps from Google Sheets 2020-09-03 15-32-45](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/b/bd32c65b43c06d46e135bcd07b0774731ca1a391.jpeg) ---
**Author:** ![SuperMerabh](https://avatars.discourse-cdn.com/v4/letter/s/8491ac/32.png) [@SuperMerabh](https://community.glideapps.com/u/SuperMerabh)\ **Post date:** [September 3, 2020, 8:41pm UTC](https://community.glideapps.com/t/images-as-buttons-realistic-size/15228/2 "2020-09-03T20:41:06Z")
I created images that are 500x500 px and center the button that is around 200-300px wide, this way it works with all sorts of settings. Button has to be PNG with transparent background. I’m attaching an example ![no](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/3/33ef5b6eeec85ca01b270f8849d4ba906b0bdfc2.png) The icon is white on transparent background, so you may need to open it in Illustrator or Photoshop ---
**Author:** ![S\_C](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/s_c/32/12766_2.png) [@S\_C](https://community.glideapps.com/u/S_C)\ **Post date:** [September 3, 2020, 8:42pm UTC](https://community.glideapps.com/t/images-as-buttons-realistic-size/15228/3 "2020-09-03T20:42:26Z")
Thanks @SuperMerabh. I really like the button you shared. It represents my state of mind with buttons 🙂 ---
**Author:** ![SuperMerabh](https://avatars.discourse-cdn.com/v4/letter/s/8491ac/32.png) [@SuperMerabh](https://community.glideapps.com/u/SuperMerabh)\ **Post date:** [September 3, 2020, 8:45pm UTC](https://community.glideapps.com/t/images-as-buttons-realistic-size/15228/4 "2020-09-03T20:45:03Z")
Ha! Yes, it does take a bit of manipulations but it gets better once you figure out how to do things. This button was showing as one of 3 options based on something the user chooses. The other options was happy and neutral 😆 ---
**Author:** ![Krivo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/krivo/32/5363_2.png) [@Krivo](https://community.glideapps.com/u/Krivo)\ **Post date:** [September 3, 2020, 9:14pm UTC](https://community.glideapps.com/t/images-as-buttons-realistic-size/15228/5 "2020-09-03T21:14:24Z")
@S_C if you want images with low height you could insert an image with image height 1:1 (e.g. actual size) - and make the image 900x100 (yellow in the below picture) then you only get width:height equal to 9:1. It would make you screen more compact. ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/9/9ca28e342858f7ca1133709e09a8ace2187fc0de.png) ---
**Author:** ![Krivo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/krivo/32/5363_2.png) [@Krivo](https://community.glideapps.com/u/Krivo)\ **Post date:** [September 3, 2020, 9:20pm UTC](https://community.glideapps.com/t/images-as-buttons-realistic-size/15228/6 "2020-09-03T21:20:08Z")
@S_C another way of getting a compact screen with a number of “buttons” is to use an inline list with small images (ratio 3:1) I made an inspirational app using inline lists (here images are square sized) > [@Create a compact homepage](https://community.glideapps.com/t/compact-homepages-like-never-before/10338): > > It is time to build some crazy compact homescreens live never before. Url: [https://companydirectory.glideapp.io/](https://companydirectory.glideapp.io/) A new feature has been added to Actions - “View details”. Select the “Independent screen configuration pr. item” and you can make the Tile layout send the user in all different directions. That is crazy. [Screen Shot 2020-06-04 at 9.16.52 PM] I put a front page on the Employees template where you can show different things Take a look - and copy the app if you want to se… ---
**Author:** ![S\_C](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/s_c/32/12766_2.png) [@S\_C](https://community.glideapps.com/u/S_C)\ **Post date:** [September 3, 2020, 9:33pm UTC](https://community.glideapps.com/t/images-as-buttons-realistic-size/15228/7 "2020-09-03T21:33:16Z")
Thanks @Krivo. So I should design the image to be 9:1 and apply 3:1 image setting in Glide image component to make it compact? Given that you are expert with images on Glide community, can you please suggest pixels as well. Sorry if didn’t get your point. Please explain again. ---
**Author:** ![S\_C](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/s_c/32/12766_2.png) [@S\_C](https://community.glideapps.com/u/S_C)\ **Post date:** [September 3, 2020, 9:34pm UTC](https://community.glideapps.com/t/images-as-buttons-realistic-size/15228/8 "2020-09-03T21:34:37Z")
Inline list doesn’t work for me as I need to link image to different components. ---
**Author:** ![Krivo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/krivo/32/5363_2.png) [@Krivo](https://community.glideapps.com/u/Krivo)\ **Post date:** [September 3, 2020, 9:40pm UTC](https://community.glideapps.com/t/images-as-buttons-realistic-size/15228/9 "2020-09-03T21:40:30Z")
@S_C You should make your image 9:1 (or 20:1 if you want a really tiny button 🙂 ) then make the height of the image 1:1 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/5/59d2695866a63ae0ed98f8c92558bb792cd387f2.png) No expert, but tried a bit 🙂 I normally use width = 1000px for images as it should do great on a new iphone I believe. If you want to enlarge the image then I go for heigher resolution. Quite a few of my images are stored in cloudinary and then I would often use q\_auto setting - meaning going for automatic quality. Hope it helps ---
**Author:** ![S\_C](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/s_c/32/12766_2.png) [@S\_C](https://community.glideapps.com/u/S_C)\ **Post date:** [September 3, 2020, 9:44pm UTC](https://community.glideapps.com/t/images-as-buttons-realistic-size/15228/10 "2020-09-03T21:44:58Z")
> [@Krivo](#): > > No expert, but tried a bit 🙂 That’s how we become one 😊 Thanks so much @Krivo. Will try it tomorrow and let you know how it goes. I haven’t touched Cloudinary yet. When I do, I plan to bug you and Thinh again on that😊. ---
**Author:** ![Krivo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/krivo/32/5363_2.png) [@Krivo](https://community.glideapps.com/u/Krivo)\ **Post date:** [September 3, 2020, 9:50pm UTC](https://community.glideapps.com/t/images-as-buttons-realistic-size/15228/11 "2020-09-03T21:50:01Z")
@S_C If you haven’t got a Cloudinary account yet the please consider signing up by an invitation link. Mine is: [https://cloudinary.com/invites/lpov9zyyucivvxsnalc5/ufjxv2xds2yignimyvnu](https://cloudinary.com/invites/lpov9zyyucivvxsnalc5/ufjxv2xds2yignimyvnu) but you could also ask some of the other cloudinary power users (like Thinh, Robert…) for theirs if you want to give them some extra credits. ---
**Author:** ![S\_C](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/s_c/32/12766_2.png) [@S\_C](https://community.glideapps.com/u/S_C)\ **Post date:** [September 3, 2020, 9:52pm UTC](https://community.glideapps.com/t/images-as-buttons-realistic-size/15228/12 "2020-09-03T21:52:17Z")
You got it. You asked it first. I will thank them some other way 🙂 ---
**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\ **Post date:** [September 4, 2020, 12:00am UTC](https://community.glideapps.com/t/images-as-buttons-realistic-size/15228/13 "2020-09-04T00:00:10Z")
Great suggestions here about the size, Krivo. In some of my apps I did want the same thing and I will surely try out your ideas. You deserve the Cloudinary referral, I don’t use it as much haha. ---
**Author:** ![S\_C](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/s_c/32/12766_2.png) [@S\_C](https://community.glideapps.com/u/S_C)\ **Post date:** [September 4, 2020, 3:39am UTC](https://community.glideapps.com/t/images-as-buttons-realistic-size/15228/14 "2020-09-04T03:39:34Z")
@Krivo Your 9:1 suggestion solved the problem. I still can’t understand the logic behind it. Is it just the original formatting? I do wonder what is the formatting of Glideapp button. Thank you so much for your help. ---
**Author:** ![Krivo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/krivo/32/5363_2.png) [@Krivo](https://community.glideapps.com/u/Krivo)\ **Post date:** [September 4, 2020, 5:12am UTC](https://community.glideapps.com/t/images-as-buttons-realistic-size/15228/15 "2020-09-04T05:12:45Z")
@S_C glide will make the image fill the full width when using image height 1:1 so an image with size 90px x 10px will do the same as 900px x 100px but the resolution would of course be quite different ---
**Author:** ![Rasha](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/rasha/32/4585_2.png) [@Rasha](https://community.glideapps.com/u/Rasha)\ **Post date:** [September 4, 2020, 6:28pm UTC](https://community.glideapps.com/t/images-as-buttons-realistic-size/15228/16 "2020-09-04T18:28:49Z")
@S_C If you’re feeling adventurous, Figma removes much of the guessing. I’m not sure how the 20:1 works but I set my “frames” in Figma to iphone 8 which means I’m always working with a width of 375px. If you’re trying to stack a bunch of TW buttons, the actual button’s width is irrelevant as long as the total image width (button + padding) is 375px. ![fig](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/8/8a66a4f5ea6e93c97b14b560ca79b8331f789e07.png) ![settings](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/e/e5444c4e4739075383302ac025a5f4c301825b84.png) ---
**Author:** ![S\_C](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/s_c/32/12766_2.png) [@S\_C](https://community.glideapps.com/u/S_C)\ **Post date:** [September 4, 2020, 6:37pm UTC](https://community.glideapps.com/t/images-as-buttons-realistic-size/15228/17 "2020-09-04T18:37:53Z")
Thanks @Rasha. That’s helpful. Clearly, I’ve a lot to learn. Do you know of any YouTube or video tutorials that can reduce the learning curve? ---
**Author:** ![Rasha](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/rasha/32/4585_2.png) [@Rasha](https://community.glideapps.com/u/Rasha)\ **Post date:** [September 4, 2020, 6:54pm UTC](https://community.glideapps.com/t/images-as-buttons-realistic-size/15228/18 "2020-09-04T18:54:15Z")
I’m not a designer/dev and am hardly practiced in Figma. Just use it periodically. I did not go through tutorials – too impatient. I start then consult resources when I get stuck. So that’s usually my advice but I see they have an extensive tutorial library (Youtube). More broadly, [Material Design](https://material.io/design) is a resource worth spending some time with. ---
**Author:** ![S\_C](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/s_c/32/12766_2.png) [@S\_C](https://community.glideapps.com/u/S_C)\ **Post date:** [September 4, 2020, 6:55pm UTC](https://community.glideapps.com/t/images-as-buttons-realistic-size/15228/19 "2020-09-04T18:55:30Z")
Much appreciated @Rasha