Studio Editor: Editing and Customizing Images
Once you add images to a site, you can use a wide range of options to customize and edit them. Adjust image sizes, crop them and set their focal points so the relevant areas are always displayed, regardless of the screen size.You can also edit with Photo Studio, and add watermarks for copyright protection. In this article, learn how to:
Choose the image's fit mode Crop an image Set the focal point Mask the image with a shape Edit an image with Photo Studio Add a watermark for copyright protectionTip:Keep an image visible as visitors scroll up and down the page by setting its position to Pinned or Sticky. Choosing the image's fit modeIn the Studio Editor, every image has a bounding box that acts like a responsive container. These are the blue edges that you see around the image. You can choose how the image is displayed within the bounding box (e.g. Fill, Fit).To choose the image's fit mode:
Select the relevant image.  Click the Settings icon .  Select an option from the Display mode drop-down:Fill bounding boxThe image fills the bounding box so there aren't any empty areas, while still maintaining its original aspect ratio.If the image aspect ratio doesn't match the bounding box proportions, parts of the image are cropped out in the process. For example, when fitting a rectangular image into a square, the sides are cropped to fit that shape.  Fit to bounding boxThe entire image is shown inside the bounding box. If the image aspect ratio doesn't match the bounding box proportions, the image shrinks so it's fully displayed.The image is centered inside the box, which may create empty spaces like in the example below:Keep image ratioThe image width is fixed to the bounding box, while the height adjusts automatically to match the image's original aspect ratio.  This is a great option for non-symmetrical layouts where you want to show images in different heights, like in the Repeater below:   Note: This option is not available for stretched images. If you want to select this option, unstretch the image first.Working with breakpoints:The display mode you choose for the image applies to all breakpoints. Cropping an imageYou can choose how an image is cropped for each breakpoint. This allows you to further customize the image to suit your specifications, and provide an ideal experience for visitors on all devices.To crop an image:
Click the relevant breakpoint at the top of the Studio Editor. Select the image. Click the Crop icon . Customize the crop to your needs. Click Apply.Tip:If you want to uncrop your image, you can reset it by clicking the Settings icon , then Reset Image.Setting the image focal pointYou can choose the image focal point for each breakpoint. This allows you to select which part of the image is visible when it's resized for different breakpoints on different screen sizes. Tip:Whenever a dominant face is detected, we automatically set it as the focal point of the image, however, you can change or adjust the focal point as needed. To set the image focal point:
Click the relevant breakpoint at the top of the editor. Select the image. Click the Focal Point icon . Select the area of the image that you want to remain visible when it's resized.Masking an image with a shapeImage masks allow you to easily crop images into different shapes, giving you the flexibility to fit them seamlessly into the design. Choose from thousands of unique designs or upload your own SVG file. To mask an image:
Select the relevant image. Click the Mask icon . Choose the shape you want:
    
Explore the different shapes available in the panel. Click the Add icon  to browse through more designs or upload your own file.    (Optional) Make the image fit the shape's original aspect ratio by clicking Reset to shape's ratio
Note: This might resize the image.Changed your mind?Click the square shape at the top of the panel. This removes any mask previously applied to the image.Editing an image with Wix Photo StudioUse the Wix Photo Studio to create beautiful images without leaving the Editor. The Photo Studio allows you to customize images that you've already uploaded and saves the newly edited version to the Media Manager.There are a variety of editing options available, such as filters, rotation, and overlays, so you can revamp any image on the spot. Tip:You can also edit images directly from the Media Manager by clicking Crop & Edit under the thumbnail image.To edit an image:
Select the relevant image in the Editor. Click the Settings icon . Click Adjust. (In the Photo Studio) Edit the image using the available options. Click Save.What's next?The newly edited version is automatically replaced on all breakpoints, as the Wix Photo Studio makes changes to the image source. However, changes done on the canvas (to the image design or crop) still only apply to the current breakpoint. Adding a watermark for copyright protectionProtect images on the site by adding watermark text in the Photo Studio. The text can be designed and customized to suit your client, and cannot be removed from the file if downloaded.To add a watermark to an image:
Select the image in the Editor. Click the Settings icon . Click Adjust. (In the Photo Studio) Click Text under Add An Element. Browse the text styles and click to add one to the image. Type your watermark message. (Optional) Click Design to customize the text. Click Save.