Skip to content
Guidelines

Images and videos

We encourage you to complement your content with relevant images to help drive your point home.

Do not overpopulate your content with unnecessary images, though.

Screen recordings

Quick screen recordings showing complex navigations and steps are welcome.

Settings:

  • Resolution: Full HD (1920×1080).
  • Use a high-compression video codec (such as AV1, HEVC, or H.264).
  • FPS: Up to 30.
  • Extension: MP4.
  • Length: Up to 1 min.

Voiced-over screen recordings

Voiced-over screen recordings may be accepted. Although they are valuable assets, they are much more challenging to create. You need to ensure your narrative is clear and concise, you do not repeat yourself, your non-words (“ahh,” “hmm,” “eh,” etc.) are cut off from the recording, and there is no background noise, among other peculiarities to ensure a good-quality recording.

  • Before proceeding with any voiced-over screen recording, consult with your editor to determine whether it’s worth trying. You must have previous experience with them and present published examples for evaluation.
  • If they give you the go-ahead, when ready, they must request review and approval from the Editorial Team Lead, who may not approve it unless it meets minimum quality requirements (clarity, conciseness, length, size, purpose, and need).

Use the same settings as for quick screen recordings, except for:

Length: Up to 3-4 min.

Basic image requirements

Requirements:

  • Width: 900–1400 pixels
  • File size: Up to 150 kb. Compress your images before uploading them to our website (you can use a free tool like Squoosh).
  • File name: Name each image file as best describes the image content. Always use dashes (-) to separate words in file names — never underscores or spaces.
  • Title: Each image should include title text.
  • Captions: Each image must include a caption below the image itself. The caption text should be short enough to fit on one line. Example:

IMAGE

  • Alt text: Always provide visually descriptive alt text. See the section on alt text below for more details.
  • Source: If you didn’t create the image yourself, it must include a source link for reference. The image source link should always be tied to the company that created it, such as HBR or HubSpot. Example:

IMAGE

  • Quality: Make sure the image isn’t blurry or over-compressed. We don’t accept blurry images.
  • Social Media: If you’re embedding an image from, say, Twitter or Instagram, always use the URL of the post itself; that way, WordPress will automatically display it properly. Don’t use the iframe source code.
  • Arrows and callouts: If you’re including arrows, pointers, or callout boxes in your images, please use our Kinsta purple: #5333ED or R: 84, G: 45, B: 240

Arrows, callouts, and other elements

For taking screenshots and adding features like arrows and callouts to images, we encourage you to use Snagit, which is what the Kinsta team uses. Snagit offers one month’s trial without a subscription.

In Snagit, your settings for arrows and callout boxes should be as follows:

  • Color: #5333ED or R: 84, G: 45, B: 240
  • Shadow: None. Make sure this box is unchecked.
  • Width: 5pt

IMAGE

If you need a completely free alternative to Snagit, you can use Snipaste. Both of these apps are available for Windows and Mac, and they’ll both enable you to follow our image guidelines.

Note that if you’re installing Snipaste on a Mac, you’ll need to go into System Preferences > Security & Privacy the first time you launch it and click the Open Anyway option:

IMAGE

Alt text

Alt text should be provided for accessibility.

  • Alt text is meant to be illustrative for those who cannot see an image itself. The alt text of any image should, by design, be more descriptive than its caption.
  • Alt text lines should end with a period. This allows screen readers to pause after the text before beginning the next line.
  • Do not use “Image of” in alt text. This is redundant, as screen readers already identified the media as an image.
  • If the image itself contains text, the alt attribute value should be an exact match of the visible text.

Additional general guidelines are covered in this best practices article and this alt text decision tree.

Our article’s featured images are created by our in-house design team. You are not responsible for this main image — only for supplemental visual materials. One less thing to worry about!

Saving images from Google Docs

The easiest way to save images from Google Docs is to view the document as a web page. To do this, click into File > Download > Web Page (.html, zipped):

IMAGE

The zipped file will be downloaded to your computer. Within it, you’ll find a folder named “images” — this is where you can access your article’s graphics.

Rename each image file per the guidelines above before uploading them to WordPress.