In-line images do's and don'ts

When resizing

Resize using the width property only.

• Setting both width and height, generally the width control is dominant and height is mostly ignored.
• Setting height only will do weird things to images when people try to view them in PDFs. 
• Width-only scales more effectively in all settings.

Working with emojis:

Lorem ipsum dolor sit amet, duo utamur copiosae torquatos ad, sale virtute vituperata ne cum, id quo aliquando adolescens argumentum. Eum nemore sadipscing eu, gloriatur deterruisset ei sea, denique definitiones mei ne.   Mel ea erat aperiam, falli interpretaris ut eum. Audire mediocritatem vix no. Sed exerci habemus no, minimum expetenda ut quo. 

Lorem ipsum dolor sit amet, duo utamur copiosae torquatos ad, sale virtute vituperata ne cum, id quo aliquando adolescens argumentum. Eum nemore sadipscing eu, gloriatur deterruisset ei sea, denique definitiones mei ne. 😁Mel ea erat aperiam, falli interpretaris ut eum. Audire mediocritatem vix no. Sed exerci habemus no, minimum expetenda ut quo.

The in-line button image debate

Lorem ipsum dolor sit amet, duo utamur copiosae torquatos ad, sale virtute vituperata ne cum, click the  button. id quo aliquando adolescens argumentum. Eum nemore sadipscing eu, gloriatur deterruisset ei sea, denique definitiones mei ne. Mel ea erat aperiam, falli interpretaris ut eum. Audire mediocritatem vix no. Sed exerci habemus no, minimum expetenda ut quo.

For accessibility, bare minimum, you MUST add alt text if the button is conveying meaningful information:

Lorem ipsum dolor sit amet, duo utamur copiosae torquatos ad, sale virtute vituperata ne cum, click the  button. id quo aliquando adolescens argumentum. Eum nemore sadipscing eu, gloriatur deterruisset ei sea, denique definitiones mei ne. Mel ea erat aperiam, falli interpretaris ut eum. Audire mediocritatem vix no. Sed exerci habemus no, minimum expetenda ut quo.

Slightly better, text label followed by in-line image with alt text:

Lorem ipsum dolor sit amet, duo utamur copiosae torquatos ad, sale virtute vituperata ne cum, click the Insert Snippet button. id quo aliquando adolescens argumentum. Eum nemore sadipscing eu, gloriatur deterruisset ei sea, denique definitiones mei ne. Mel ea erat aperiam, falli interpretaris ut eum. Audire mediocritatem vix no. Sed exerci habemus no, minimum expetenda ut quo.

Slightly better, text label followed by in-line image with alt text and manually-edited HTML to include title:

Lorem ipsum dolor sit amet, duo utamur copiosae torquatos ad, sale virtute vituperata ne cum, click the Insert Snippet button. id quo aliquando adolescens argumentum. Eum nemore sadipscing eu, gloriatur deterruisset ei sea, denique definitiones mei ne. Mel ea erat aperiam, falli interpretaris ut eum. Audire mediocritatem vix no. Sed exerci habemus no, minimum expetenda ut quo.

How we handle this in our documentation: button labels are in text-based directions with decorative screenshots with arrows to follow, sometimes with captions:

Lorem ipsum dolor sit amet, duo utamur copiosae torquatos ad, sale virtute vituperata ne cum, click the Insert Snippet button. id quo aliquando adolescens argumentum. Eum nemore sadipscing eu, gloriatur deterruisset ei sea, denique definitiones mei ne. Mel ea erat aperiam, falli interpretaris ut eum. Audire mediocritatem vix no. Sed exerci habemus no, minimum expetenda ut quo:

The Insert Snippet button