写真

A picture element is an image placeholder you can insert on your canvas, separate from other elements. Remember that the picture element is different from a background image applied to an element like a section or a div block.

このチュートリアルでは、次のことを学びます。

1. Ways to insert pictures
2. Techniques for adjusting picture settings
3. Steps to replace pictures
4. Methods to style pictures
5. Instructions to include alt text

How to insert pictures

You have the ability to insert a picture onto your Webflow site from:

• The Insert panel
• The Resources panel
• Fast search
• Your device

注記： The maximum file size for pictures is 4MB.

貴重な情報: Webflow generates responsive variations of your pictures when you upload them to the Resources panel. Nevertheless, it’s advisable to optimize your pictures before uploading to Webflow. Learn more about picture resolution.

Read up on the most common picture file formats used on the internet.

The Insert panel

To insert a picture element from the Insert panel:

1. に移動 挿入パネル
2. クリックしてドラッグ 写真 Webflowキャンバス上の要素

To replace the placeholder with one of your picture files:

1. 選択してください 写真 キャンバス上の要素
2. 訪問 要素設定パネル
3. 選択する Choose picture
4. Choose a previously-uploaded picture or click the “雲” icon to upload a new picture in the リソースパネル

The Resources panel

Once you upload your pictures to the リソースパネル, you can drag the pictures onto the canvas.

You can upload your pictures to the Resources panel in 3 ways:

1. クリック "雲”アイコンをクリックすると リソースパネル and select the pictures you want to upload from your device
2. Drag and drop the pictures from your device into the リソースパネル
3. Drag and drop pictures directly onto your canvas

Learn more about how to insert pictures to the Resources panel.

Fast search

Fast search is a potent search bar incorporated into the Webflow Designer. You can launch fast search with 指示 + え (Macの場合) または コントロール + え (on Windows) and search for any pictures you’ve uploaded to the Resources panel by name.

Your device

You can drag a picture directly from your device to the canvas.

How to resolve picture uploading issues

If you receive an “upload failed” alert while attempting to upload a picture, check the following:

• The picture file: Ensure that the picture file is not corrupted, has the correct and supported file extension, and is not larger than 4MB
• Check your internet connection: You should be able to upload pictures even with slow internet connections (minimum 5 mbps). To ensure that internet speed isn’t a problem, double-check your internet connection and confirm your signal strength. Learn how to troubleshoot your internet connection.
• Examine your browser extensions: Certain browser extensions may cause problems when uploading pictures to the Webflow Designer. Attempt to upload pictures from an Incognito or private browsing window, or learn how to troubleshoot your browser extensions.

How to adjust picture settings

To access image settings, there are four methods available. Initially, choose the image component on the canvas, then:

1. Perform a double-click on the image component
2. ヒット 入力/戻る キーボードのキー
3. Click the icon resembling a “gear” located next to the image component label
4. プレス だ or navigate to the 要素設定パネル

内で 画像設定, you have the capacity to:

• Select an image — Replace the default placeholder with any image from the アセットパネル. Simply double-click on the image component and choose Select image から 画像設定 window
• Adjust the image dimensions — Specify specific pixel values for the image’s width or height. These dimensions will apply to all breakpoints, but individual settings for width and height can override these values in the 要素設定パネル for each breakpoint. You also have the option to resize the image by dragging its corners. Note that adjusting the image size will not exceed the dimensions of its parent element
• Enable HiDPI mode for images — Upon checking this box, the image’s pixel width will be halved. For example, an image of 600px width will be displayed at 300px. This pixel density ensures optimal image quality on most HiDPI mobile displays
• Specify loading behavior— Modify the image loading preferences. “Lazy” loading loads images above the visible fold upon page load and loads images below the fold as users scroll to them, “Eager” loading immediately loads all images on the page during site load, and “Auto” loading adjusts based on the browser’s setup

Substitute Image Content

After inserting an image onto the canvas, you have the flexibility to substitute it whenever necessary. To swap out the image:

1. Highlight the image on the canvas
2. に移動 要素設定パネル > 画像設定
3. 選択する 画像を置き換える 開く アセットパネル
4. Pick an existing image or upload a new one

Enhancing Image Aesthetics

活用する スタイルパネル to enhance the visual appeal of images. Do note that some styling attributes do not apply to images, such as background styles. For overlay effects with images, consider utilizing background images instead.

Utilize classes to stylize images, which optimizes time efficiency as you can apply a class to multiple images. Any styling applied to the class will affect all images associated with it. This method proves particularly advantageous when establishing size specifications via the スタイルパネル 代わりに 要素設定パネル. By utilizing classes, you can eliminate the need to manually adjust the size of each image.

Here are a few examples of styling properties you can utilize to add flair to your images: 

• Corner Radius: Implement rounded corners on one or more sides. To define a radius, access the スタイルパネル > 国境 > 半径.
• Drop Shadow: Create a shadow effect to enhance the image’s appearance. To set a drop shadow, access the スタイルパネル > 効果 > Box shadows.
• Filters: Apply various filters like blur, grayscale, or sepia tones. To add a filter, navigate to the スタイルパネル > 効果 > フィルター.

Adding alternative text

Descriptive text is a concise depiction of the image concealed “within” the image (meaning it’s not visible on the site page, unlike a caption), interpreting that image when it’s incapable of being shown or viewed. This aids in comprehending your image content by individuals with visual impairments or blindness, or being presented instead of the image if the image file hasn’t loaded or when a user has opted not to view images. Search engines utilize alternative text to identify the content of the image.

To introduce alternative text to an image:

1. Opt for the picture on the canvas
2. アクセス 要素設定パネル > 画像設定
3. 進む Alternative text 選択して Custom description
4. Construct the alternative text in the space beneath the dropdown menu

If an image is merely decorative (i.e., it provides no valuable information), you can also opt for 装飾的な from the alternative text dropdown.

You can also specify alternative text in the アセットパネル so that the image is equipped with alternative text each time you append it to your site from the Assets panel.

Implementing dynamic alternative text

You can employ an image element in dynamic Collection lists and on Collection template pages. Discover further details about the image field.

For configuring dynamic alternative text for these images:

1. 選択してください 画像
2. に移動 要素設定パネル > 画像設定
3. 確認する Fetch alt text from
4. Select the section containing the alternative text for your images (e.g., “Name”)