Working With Images

Images enhance the visual appeal of your site, convey information effectively, and improve your visitors’ experience. This guide will show you the many different ways you can add images to a WordPress website.

There are a lot of things you can do with images, so we’ve broken them down into several pages:

• To check with types of image files you can upload to WordPress.com, see the Accepted File Types guide.
• Upload an image to your site using the Image block.
• Upload a gallery using the Gallery block or Tiled Gallery block.
• Upload a slideshow using the Slideshow block.
• Upload a header or banner-style image using the Cover block.
• Add an image side-by-side with text using the Media & Text block or compare two images using the Image Compare block.
• Find free images to use for your website from these sources.

• Crop, resize, rotate, align, and caption images using the block settings in the WordPress editor.
  • Learn more about these settings in the Image block guide or explore our other media blocks.
• View and delete images on your site using the Media section of your dashboard.
• You can also rotate, crop, and flip images in Media. See Edit an Image in Media to learn how.
• Optimize your images to ensure they load quickly and take up minimal storage space.

• Troubleshooting Image Uploads – Are your images not uploading? Here are some tips for uploading images successfully.
• Troubleshooting Blurry Images – See why images could appear blurry on your site even though the original photo uploaded is of good quality.

Here are some examples of how you can display your images in the WordPress editor. The images will look different depending on the theme you are using on your site, so try them out on your site!

All the images are sourced from the Pexels Free Photo Library.

Use the Image block to add single images.

Default style:

Rounded style:

To show two images next to each other, you can use the Gallery block:

If you already have a single image inserted, you can quickly drag and drop a second image next to it. When dragging the image file from your computer, hold it until a vertical line appears next to your first image, and then release it. Here’s a video demonstration showing how to drag and drop a new image next to an existing one:

Use the Media & Text block to place an image (or video) side-by-side with text. It also has a handy option to stack the media and text on mobile devices:

For more options to wrap text around an image, visit our guide to Align Images With Text.

Use a Cover block for full-width header and banner-style images. You can set the image to a fixed background (also known as a “parallax effect” or “parallax scrolling”), add a color overlay, and even add text and other content on top of the image.

Fixed background with the parallax effect:

Non-fixed background:

Use the Gallery block to display multiple photos arranged in attractive ways.

Use the Slideshow block to share many pictures without taking too much space on a page or post.

The Tiled Gallery block comes in four different styles:

• Tiled mosaic
• Circular grid
• Square tiles
• Tiled columns

Tiled Mosaic

Circular grid

Square tiles with an option for rounded corners

Tiled Columns

Use the Image Compare block to place two images side by side (or above and below) and use a slider to reveal differences between the two images.