Add an image or video

# Navigate to the media uploader

Visit the image uploader page and sign-in using your Google corporate account. Note that this page only allows Googlers access, so signing in with a personal account will fail.

# Choose a file

Upload a high quality image (jpg or png if you need alpha transparency). Our image CDN will handle converting the image to webp if the browser supports it and it will resize the image so you don't have to.

• Drag one or more files to the Drop files here! area
• Click Upload

A preview of the image or video with a shortcode snippet will appear. It should look something like this:

{% Img src="image/foR0vJZKULb5AGJExlazy1xYDgI2/ZOR0at2oFXeasz6jKylI.jpg", alt="ALT_TEXT_HERE", width="380", height="240" %}

• Click the copy button to copy the snippet to your clipboard 📋

# Paste!

Paste the copied code from the previous step into your article.

Be sure to replace the text that says "ALT_TEXT_HERE" with your own description of the image. You can read more about writing effective alt text over on the web.dev handbook.

# Properties

The {% Img %} and {% Video %} shortcodes accepts many named arguments. Below are interfaces for both shortcodes. Each property of the interface is a named argument that can be used in the shortode.

# Img Properties (ImgArgs)

/*
 * Copyright 2021 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import {TODOObject} from '../utils/todo';

export type ImgArgs = {
  /**
   * Defines an alternative text description of the image.
   */
  alt: string;
  /**
   * A space-separated list of the classes of the element.
   */
  class?: string;
  /**
   * Provides an image decoding hint to the browser. `'async'` by default
   * for images that are not `'high'` fetchpriority.
   */
  decoding?: 'sync' | 'async' | 'auto';
  /**
   * Indicates the relative priority of resources to the browser.
   */
  fetchpriority?: 'high' | 'low' | 'auto';
  /**
   * The intrinsic height of the image, in pixels. Must be an integer without a unit.
   */
  height: string;
  /**
   * Often used with CSS to style a specific element. The value of this attribute must be unique.
   */
  id?: string;
  /**
   * Flag to wrap image in `a` tag pointing to the image. `false` by default.
   */
  linkTo?: boolean;
  /**
   * Indicates how the browser should load the image. `'lazy'` by default
   * for images that are not `'high'` fetchpriority.
   */
  loading?: 'eager' | 'lazy';
  /**
   * One or more strings separated by commas, indicating a set of source sizes. If value is not provided one is generated dynamically.
   */
  sizes?: string;
  /**
   * Pathname of image hosted by imgix.
   */
  src: string;
  /**
   * A string containing CSS styling declarations to be applied to the element.
   */
  style?: string;
  /**
   * The intrinsic width of the image in pixels. Must be an integer without a unit.
   */
  width: string;
  /**
   * Params directly passed to the imgix API. This can be used to make specific overrides, use with caution.
   */
  params?: TODOObject;
  /**
   * Options passed when generating an imgix srcset.
   */
  options?: ImgixOptions;
};

export type ImgixOptions = {
  widths?: number[];
  widthTolerance?: number;
  minWidth?: number;
  maxWidth?: number;
  disableVariableQuality?: boolean;
};

The {% Img %} params object exposes the entire Imgix API to you. For example, if you wanted to use the flip API to flip an image on its horitonzal axis you would do:

{% Img
  src="image/foR0vJZKULb5AGJExlazy1xYDgI2/iuwBXAyKJMz4b7oRyIdI.jpg",
  alt="ALT_TEXT_HERE",
  width="380",
  height="240",
  params={flip: 'h'}
%}

Original

Flipped

# Video Properties (VideoArgs)

/*
 * Copyright 2021 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

export type VideoArgs = {
  /**
   * A Boolean attribute; if specified, the video automatically begins to play back as soon as it can do so without stopping to finish loading the data.
   */
  autoplay?: boolean;
  /**
   * A Boolean attribute which if true indicates that the element should automatically toggle picture-in-picture mode when the user switches back and forth between this document and another document or application.
   */
  autoPictureInPicture?: boolean;
  /**
   * A space-separated list of the classes of the element.
   */
  class?: string;
  /**
   * If this attribute is present, the browser will offer controls to allow the user to control video playback, including volume, seeking, and pause/resume playback.
   */
  controls?: boolean;
  /**
   * Prevents the browser from suggesting a Picture-in-Picture context menu or to request Picture-in-Picture automatically in some cases.
   */
  disablePictureInPicture?: boolean;
  /**
   * The height of the video's display area, in CSS pixels (absolute values only; no percentages.)
   */
  height?: number;
  /**
   * Often used with CSS to style a specific element. The value of this attribute must be unique.
   */
  id?: string;
  /**
   * A Boolean attribute; if specified, the browser will automatically seek back to the start upon reaching the end of the video.
   */
  loop?: boolean;
  /**
   * Flag to wrap video in `a` tag pointing to the video. `false` by default.
   */
  linkTo?: boolean;
  /**
   * A Boolean attribute that indicates the default setting of the audio contained in the video.
   * Defaults to true if `autoplay` is enabled because browsers require autoplay videos to also be muted.
   */
  muted?: boolean;
  /**
   * A Boolean attribute indicating that the video is to be played "inline", that is within the element's playback area. Note that the absence of this attribute does not imply that the video will always be played in fullscreen.
   */
  playsinline?: boolean;
  /**
   * Pathname of image hosted by imgix to be shown while the video is downloading.
   */
  poster?: string;
  /**
   * This enumerated attribute is intended to provide a hint to the browser about what the author thinks will lead to the best user experience with regards to what content is loaded before the video is played.
   */
  preload?: 'none' | 'metadata' | 'auto';
  /**
   * Pathname(s) of video hosted by CDN.
   */
  src: string | string[];
  /**
   * The width of the video's display area, in CSS pixels (absolute values only; no percentages).
   */
  width?: number;
};