Getting wrong image out from Viber's keyboard button's Image

Question

I am creating a Viber bot via Viber REST API using PHP. I am trying to understand how to create the Keyboard design set by Viber but to no avail. How to make it look like the same from the example provided by Viber's keyboard design?

[
      [
            'Columns' => 3,
            'Rows' => 2,
            'Text' => '<font color=\"#494E67\">Smoking</font><br><br>',
            'TextSize' => 'medium',
            'TextHAlign' => 'center',
            'TextVAlign' => 'bottom',
            'ActionType' => 'reply',
            'ActionBody' => 'Smoking',
            'BgColor' => '#f7bb3f',
            'Image' => 'https://img.icons8.com/material-outlined/24/000000/smoking.png',
      ],
      [
            'Columns' => 3,
            'Rows' => 2,
            'Text' => '<font color=\"#494E67\">Non Smoking</font><br><br>',
            'TextSize' => 'medium',
            'TextHAlign' => 'center',
            'TextVAlign' => 'bottom',
            'ActionType' => 'reply',
            'ActionBody' => 'Non smoking',
            'BgColor' => '#f6f7f9',
            'Image' => 'https://img.icons8.com/material-outlined/24/000000/no-smoking.png',
      ],
]

Answer 1

Viber tries to stretch small images to fill the button, and while there are ways to control which axis is the largest and whether the image is cropped, there is no way to prevent this stretching.

You can save each button as a high-resolution image (including the text and icon), and then use that image as the value of the 'image' property of the button.

Alternatively, you can enlarge the current image transparent background so the total image dimensions are larger and can fill the button (such as 100x100 pixels for example), while the icon size stays the same (24x24 pixels). However, this approach has the disadvantage that you need to find how to position the icon in the image such that it doesn't overlap with the text. For this reason, the previous suggestion of using a high resolution image that contains the text and the icon is generally preferable.