# Adding image to Card model

**URL:** <https://forums.ankiweb.net/t/adding-image-to-card-model/36385>\
**Category:** Help\
**Created:** [October 31, 2023, 9:47am UTC](https://forums.ankiweb.net/t/adding-image-to-card-model/36385 "2023-10-31T09:47:07Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![AD\_25](https://avatars.discourse-cdn.com/v4/letter/a/919ad9/32.png) [@AD\_25](https://forums.ankiweb.net/u/AD_25)\
**Post date:** [October 31, 2023, 9:47am UTC](https://forums.ankiweb.net/t/adding-image-to-card-model/36385/1 "2023-10-31T09:47:07Z")

</div>

Hello, i want to add an image to this card model, but i don’t know how to do it.

 ![Capture d’écran 2023-10-31 104614](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/3X/8/3/83b90dde3833f03d586f60946f48ad7086a5ca61.png)

---

<div class="post-metadata">

**Author:** ![AD\_25](https://avatars.discourse-cdn.com/v4/letter/a/919ad9/32.png) [@AD\_25](https://forums.ankiweb.net/u/AD_25)\
**Post date:** [October 31, 2023, 10:10am UTC](https://forums.ankiweb.net/t/adding-image-to-card-model/36385/2 "2023-10-31T10:10:17Z")

</div>

i found how to add the image but now it’s too big. I guess i need to modify the CSS file.  
The image is in “

”.  
Here’s the CSS:  
.card {  
padding: 1em 0;  
background-color: white;  
color: black;  
font-family: Verdana;  
font-size: 16px;  
text-align: center;  
}

.type {  
margin-bottom: 0.25em;  
color: #333;  
font-size: 70%;  
font-weight: bold;  
text-transform: uppercase;  
}

.info {  
max-width: 30em;  
margin: 0.75em auto;  
color: #333;  
font-size: 90%;  
font-style: italic;  
}

.value {  
font-size: 150%;  
}

.value–top {  
margin-top: 1em;  
}

.value–image {  
margin-top: 0.75em;  
}

.value \> img,  
.value \> .placeholder {  
max-width: 100%;  
height: auto;  
}

* * *

When I change max-width, the preview of the image is smaller

 ![Capture d’écran 2023-10-31 110856](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/3X/e/0/e09932e839209a147cb90a6aac168c978ff3ef08.png)  
but it’s still too big when using the card

---

<div class="post-metadata">

**Author:** ![NameLessGO](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/namelessgo/32/34298_2.png) [@NameLessGO](https://forums.ankiweb.net/u/NameLessGO)\
**Post date:** [October 31, 2023, 6:31pm UTC](https://forums.ankiweb.net/t/adding-image-to-card-model/36385/3 "2023-10-31T18:31:15Z")

</div>

Good default for images, also changes if you are in ankidroid or anki mobile  
[https://ankiweb.net/shared/info/952691989](https://ankiweb.net/shared/info/952691989)

To transform images to WebP which consumes less storage  
[https://ankiweb.net/shared/info/1151815987](https://ankiweb.net/shared/info/1151815987)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/1X/8f1279ababc5879d54e4838989f606cfe55af8c7.jpeg) [@system](https://forums.ankiweb.net/u/system)\
**Post date:** [November 30, 2023, 6:31pm UTC](https://forums.ankiweb.net/t/adding-image-to-card-model/36385/4 "2023-11-30T18:31:54Z")

</div>

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