Smaller picture on product list than in product card, how to do that?

You have two choices...

1) Use the scaling option in "Products --> Settings --> Picture Settings" and auto scale the images
2) Edit the CSS file and the following text...

.size100 {
width:100px;
}
.size200 {
width:200px;
}
.size400 {
width:400px;
}

Then when you add the class to the img command...

----------------------------------------------------
ie, for my product list...

<img alt="$product_title1$" border="0" class="size100" src="$product_picture1_url$">

This will scale the picture1 to 100x100px
------------------------------------------------------
for my product card...

<img alt="$product_title1$" border="0" class="size200" src="$product_picture1_url$">

This will scale it to 200x200px
-----------------------------------------------------
I've added 400x400 option in the css file should I wish to use it in the future.

Method #1
Good reason - it's easier to use and no CSS editing knowledge is required.
Bad reason - You have to upload more images

Method #2
Good reason - if you use the same image you only have to upload it once, better control of the images.
Bad reason - looks a little daunting if you've never edited CSS files before.

Remember, with option #1, you will have to upload the images to the products for each size, if you have 3 images per product, that's 6 images you will have to upload per product...my method means you will only upload 3.

And if you change the image, you only change it once per picture...