Editor

Insert product visuals

Overview

Insert product visuals into your documentation using DocsHound and learn how to prepare and upload images for a professional and visually appealing presentation.

Setting Up for HD Screenshots

Custom Device Setup

To set up a custom device in DevTools for capturing HD screenshots, follow these steps:

First-Time Setup:

  • Open DevTools: CMD + OPTION + I

  • Toggle Device: CMD + SHIFT + M

  • Expand Dimensions: Click the dropdown

  • Edit Devices: ClickEdit

  • Add Custom: SelectAdd Custom Device

  • Name Device: EnterHD screenshot

  • Set Resolution: Input 1920 x 1080

  • Adjust Ratio: Set device pixel ratio to 2

  • Choose Desktop: SelectDesktop mode

  • Confirm Addition: ClickAdd

  • Exit Menu: Click Xand close

For HD Screenshots going forward:

  • Open DevTools: CMD + OPTION + I

  • Ensure Device: CMD + SHIFT + M if needed

  • Select HD: ChooseHD screenshot

  • Open Command: CMD + SHIFT + P

  • Type 're s': Autocomplete toCapture screenshot

For additional adjustments, you can use browser zoom before opening DevTools. When capturing a sequence or a flow, keep the viewport consistent.

Take 16:9 Screenshots

Upload images with a resolution of 1920 x 1080 pixels and a 16:9 aspect ratio for a full HD display.

Upload Images

To upload images to DocsHound, follow these steps to ensure they display well.

Start by preparing your image. The recommended size for upload is 1920 x 1080 pixels. This ensures a 16:9 aspect ratio, giving your documentation a full HD and visually pleasing look.

  1. Open the context menu that appears when your cusor hovers in the editor

  2. Press the plus button

  3. Select Image, GIF or Video

  4. Upload or embed media

  5. Adjust the settings if needed

  6. Save your changes

Frequently Asked Questions

  • DocsHound supports common image formats such as JPEG, PNG, WEBP and GIF.

  • Using HD resolution (1920 x 1080 pixels) ensures a clear and visually appealing display, making your documentation look professional.