# Giant images

**URL:** https://community.glideapps.com/t/giant-images/74163
**Category:** Ask for Help
**Created:** [June 15, 2024, 4:15pm UTC](https://community.glideapps.com/t/giant-images/74163 "2024-06-15T16:15:28Z")
**Posts on this page:** 11
**Page:** 1

<div class="post-metadata">

### Author: ![dias](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/dias/32/75988_2.png) [@dias](https://community.glideapps.com/u/dias)
#### Post date: [June 15, 2024, 4:15pm UTC](https://community.glideapps.com/t/giant-images/74163/1 "2024-06-15T16:15:28Z")

</div>

Hey there Glide community!

I was developing an app, as usual, but I wanted to make a container with just the person’s image and name. That I got right, but I need help with just one big issue.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/7/07585f7bf8383cdaa17764bd26dc0fb01b6aaf51.jpeg)

Quite literally. Is there a way to make this image smaller? I’m assuming this happens because Glide means “Original image resolution” when it’s talking about Small images. Most of our users profile pictures have high resolutions — I’m thinking of reducing these images resolution to fix this issue, but I don’t know how to do so. Help would be very much appreciated!

Thanks.

---

<div class="post-metadata">

### Author: ![dias](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/dias/32/75988_2.png) [@dias](https://community.glideapps.com/u/dias)
#### Post date: [June 15, 2024, 7:12pm UTC](https://community.glideapps.com/t/giant-images/74163/2 "2024-06-15T19:12:37Z")

</div>

Replying to boost this — can someone help? 😉

---

<div class="post-metadata">

### 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: [June 16, 2024, 12:26am UTC](https://community.glideapps.com/t/giant-images/74163/3 "2024-06-16T00:26:33Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/3/13f9d55961ef3c4d14c5b7cb7de76e5f006e1d2e.png)

I would try Title \> Simple \> Compact.

---

<div class="post-metadata">

### Author: ![dias](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/dias/32/75988_2.png) [@dias](https://community.glideapps.com/u/dias)
#### Post date: [June 16, 2024, 12:36am UTC](https://community.glideapps.com/t/giant-images/74163/4 "2024-06-16T00:36:28Z")

</div>

The thing is, that won’t work. This screen is for an embed on live streams with software like OBS, and if we use anything smaller than Headline Large, it gets so tiny the viewer can’t see it. That’s why I was looking for a solution via resolution or CSS — anything to just reduce the image’s size without doing the same for the text. Thanks for your reply, though!

---

<div class="post-metadata">

### Author: ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [June 16, 2024, 12:46am UTC](https://community.glideapps.com/t/giant-images/74163/5 "2024-06-16T00:46:44Z")

</div>

Can you give an example of the image URL?

---

<div class="post-metadata">

### Author: ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)
#### Post date: [June 16, 2024, 2:47pm UTC](https://community.glideapps.com/t/giant-images/74163/6 "2024-06-16T14:47:54Z")

</div>

I would create an HTML IMG tag with the URL for the image and adjust the size using HTML. Then display it in a rich text component.

---

<div class="post-metadata">

### 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: [June 16, 2024, 10:27pm UTC](https://community.glideapps.com/t/giant-images/74163/7 "2024-06-16T22:27:54Z")

</div>

Here’s the execution. You can change the font size as needed.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/1/e1e221e6baf1b58870ab86de85c4818ba70afe7f.png)

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/3/9377cde7574d98619eb43a481dfef3a1d46f150d.png)

```auto
<div style="display: flex; justify-content: start; align-items: center; text-align: center;">
    <div style="width: 100px; height: auto;border-radius: 50%; overflow: hidden; margin-right: 20px;">
        <img src="{I}" alt="Circular Image" style="width: 100%; height: 100%; object-fit: cover;">
    </div>
    <div style="font-size: 36px; font-weight: bold;">{N}</div>
</div>

```

---

<div class="post-metadata">

### Author: ![dias](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/dias/32/75988_2.png) [@dias](https://community.glideapps.com/u/dias)
#### Post date: [June 17, 2024, 3:48pm UTC](https://community.glideapps.com/t/giant-images/74163/8 "2024-06-17T15:48:59Z")

</div>

That worked! Thanks a lot.

I just have one minor issue — some images end up coming stretched.  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/e/4e82cacd18cbba304871ca45c9bd60c3a2909dba.png)

If you could help me out with unstretching them, that’d be great, but no worries if you can’t. 🙂

---

<div class="post-metadata">

### 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: [June 17, 2024, 11:01pm UTC](https://community.glideapps.com/t/giant-images/74163/9 "2024-06-17T23:01:08Z")

</div>

Please try this:

```auto
<div style="display: flex; justify-content: start; align-items: center; text-align: center;">
    <div style="max-width: 300px; height: auto;border-radius: 50%; overflow: hidden; margin-right: 20px;">
        <img src="{I}" alt="Circular Image" style="width: 100%; height: 100%; object-fit: cover;">
    </div>
    <div style="font-size: 36px; font-weight: bold;">{N}</div>
</div>

```

I set a max-width for the image, rather than forcing them to be 100px.

---

<div class="post-metadata">

### Author: ![dias](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/dias/32/75988_2.png) [@dias](https://community.glideapps.com/u/dias)
#### Post date: [June 21, 2024, 4:51pm UTC](https://community.glideapps.com/t/giant-images/74163/10 "2024-06-21T16:51:24Z")

</div>

Thanks a lot!

---

<div class="post-metadata">

### Author: ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)
#### Post date: [June 28, 2024, 4:52pm UTC](https://community.glideapps.com/t/giant-images/74163/11 "2024-06-28T16:52:07Z")

</div>

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.