Squashed images in email signature in Outlook Mac

Question

I am assembling the signatures of my company in html. It works in Windows Outlook but in Mac the images are crushed. I do not understand where the error could be.

Attached are images of the error and how it should look.

Signature image error

Signature image good

 <table border="0" width="320" height="158" cellpadding="0" cellspacing="0">

    <tr>
        <td align="center" width="36%">
            <!-- aqui se pone las fotos -->
            <img width="91" style="width: 91px;padding-bottom: 1%;"
                src="https://espartadigital.com/wp-content/uploads/2022/05/Carlos.png" alt="Foto-Carlos">
        </td>

        <td width="64%" align="left">
            <table border="0" cellpadding="0" cellspacing="0" heigth="105"
                style="color: #ee7601;font-family: 'Raleway', sans-serif; font-weight: bold;">

                <tr>
                    <!-- aqui se pone el nombre -->
                    <td colspan="2" style="line-height: 14px">
                      <span style="font-size: 15px; font-weight: 900;" >Carlos Fabuel</span> <br>
                    <!-- aqui se pone el cargo -->
                      <span  style="font-size: 12px;">SEO Account Manager</span>
                    </td>
                </tr>


                <!-- elimina este bloque si no tiene telefono -->

                <tr style="line-height: 14px;">
                    <td align="left" width="10%">
                        <!-- aqui se pone el telefono -->
                        <img style="padding-bottom: 4px;" width="10"
                            src="https://espartadigital.com/wp-content/uploads/2022/05/phone-call.png" alt="">
                    </td>
                    <td align="left" style="font-size: 10px;"><span> 960 64 98 57</span>
                    </td>
                </tr>


                <tr style="line-height: 14px;">
                    <td align="left" width="10%">
                        <img style="padding-bottom: 4px;" width="10"
                            src="https://espartadigital.com/wp-content/uploads/2022/05/linkedin.png" alt="">
                    </td>

                    <td align="left" style="font-size: 10px;"> <a
                            style="text-decoration: none !important; color: #ee7601;"
                            href="hhttps://www.linkedin.com/in/carlosfabuel/">Linkedin/CarlosFabuel/</a> </td>
                </tr>
            

                <!-- fin del bloque a eliminar -->

            </table>

        </td>
    </tr>

    <tr>
        <td colspan="2">
            <img src="https://espartadigital.com/wp-content/uploads/2022/05/Barra-con-logo-1.png" alt="Eslogan-logo">
        </td>
    </tr>

</table>

Answer 1

It looks like the heights are being interfered with somehow.

You can put the height of the image along with the width that you already have.

<img width="91" height="91" style="width: 91px;padding-bottom: 1%;" src="https://espartadigital.com/wp-content/uploads/2022/05/Carlos.png" alt="Foto-Carlos">

If you wanted larger images such as the bottom one responsive, you can do the following:

<img width="320" height="53" style="max-width:100%;height:auto;" src="https://espartadigital.com/wp-content/uploads/2022/05/Barra-con-logo-1.png" alt="Eslogan-logo">

So on smaller screens the max-width will kick in and reduce the width automatically, and the height:auto will auto-calculate the right proportionate height.