https://docs.builderius.io/assets/js/c9f1c5cd.97d4c0e0.js

1"use strict";(globalThis.webpackChunkbuilderius=globalThis.webpackChunkbuilderius||[]).push([[6797],{4281:(e,i,s)=>{s.r(i),s.d(i,{assets:()=>o,contentTitle:()=>l,default:()=>m,frontMatter:()=>r,metadata:()=>n,toc:()=>c});const n=JSON.parse('{"id":"elements/image","title":"Image","description":"The Image element displays images on your page using the HTML `` tag. It provides a complete image management system with media library integration, responsive sizing options, and accessibility features built-in.","source":"@site/docs/elements/img.md","sourceDirName":"elements","slug":"/elements/image","permalink":"/docs/elements/image","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{"id":"image","title":"Image"},"sidebar":"docs","previous":{"title":"SVG Code","permalink":"/docs/elements/svg-code"},"next":{"title":"Source","permalink":"/docs/elements/source"}}');var t=s(4848),a=s(8453);const r={id:"image",title:"Image"},l=void 0,o={},c=[{value:"Image Selection Interface",id:"image-selection-interface",level:2},{value:"Media Library",id:"media-library",level:2},{value:"Image Optimization Settings",id:"image-optimization-settings",level:2},{value:"Accessibility Best Practices",id:"accessibility-best-practices",level:2},{value:"Performance Considerations",id:"performance-considerations",level:2},{value:"Dynamic Image Sources",id:"dynamic-image-sources",level:2},{value:"Best Practices",id:"best-practices",level:2},{value:"When to Use Image Element",id:"when-to-use-image-element",level:2}];function d(e){const i={code:"code",h2:"h2",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,a.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(i.p,{children:["The Image element displays images on your page using the HTML ",(0,t.jsx)(i.code,{children:"<img>"})," tag. It provides a complete image management system with media library integration, responsive sizing options, and accessibility features built-in."]}),"\n",(0,t.jsx)(i.h2,{id:"image-selection-interface",children:"Image Selection Interface"}),"\n",(0,t.jsxs)(i.p,{children:["The Image element provides ",(0,t.jsx)(i.strong,{children:"multiple ways to add images"}),":"]}),"\n",(0,t.jsx)(i.p,{children:(0,t.jsx)(i.img,{alt:"Screenshot showing Image element Content tab with Select Image button and settings",src:s(5834).A+"",width:"1350",height:"1400"})}),"\n",(0,t.jsxs)(i.ol,{children:["\n",(0,t.jsxs)(i.li,{children:["\n",(0,t.jsxs)(i.p,{children:[(0,t.jsx)(i.strong,{children:"Media Library selection:"}),' Click "Select Image" to browse your WordPress media library.']}),"\n"]}),"\n",(0,t.jsxs)(i.li,{children:["\n",(0,t.jsxs)(i.p,{children:[(0,t.jsx)(i.strong,{children:"Dynamic images:"})," Use dynamic data to pull images from custom fields, featured images, or external sources. Use dynamic source for alt value as well."]}),"\n"]}),"\n",(0,t.jsxs)(i.li,{children:["\n",(0,t.jsxs)(i.p,{children:[(0,t.jsx)(i.strong,{children:"Direct URL:"})," Enter any image URL directly in the URL field for external images. It's possible to also set alt value directly."]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(i.h2,{id:"media-library",children:"Media Library"}),"\n",(0,t.jsx)(i.p,{children:(0,t.jsx)(i.img,{alt:"Screenshot showing media library modal with search, upload, and size selection options",src:s(4903).A+"",width:"1310",height:"1514"})}),"\n",(0,t.jsxs)(i.p,{children:["When you click ",(0,t.jsx)(i.strong,{children:"Select Image"}),", the media library modal provides:"]}),"\n",(0,t.jsxs)(i.p,{children:[(0,t.jsx)(i.strong,{children:"Search functionality:"})," Find images quickly using the search field to filter by filename."]}),"\n",(0,t.jsxs)(i.p,{children:[(0,t.jsx)(i.strong,{children:"Upload capability:"})," Add new images directly through the ",(0,t.jsx)(i.strong,{children:"Upload"})," button without leaving the builder."]}),"\n",(0,t.jsxs)(i.p,{children:[(0,t.jsx)(i.strong,{children:"Size selection:"})," Choose from available image sizes (thumbnail, medium, large, full) to optimize for different use cases and performance."]}),"\n",(0,t.jsxs)(i.p,{children:[(0,t.jsx)(i.strong,{children:"Image metadata:"})," View file details including dimensions, file size, and format before selection."]}

1),"\n",(0,t.jsx)(i.pre,{children:(0,t.jsx)(i.code,{className:"language-html",children:'\x3c!-- Example output with selected image --\x3e\n<img src="/wp-content/uploads/image.webp" \n     alt="Descriptive alt text" \n     width="700" \n     height="394"\n     loading="lazy">\n'})}),"\n",(0,t.jsx)(i.h2,{id:"image-optimization-settings",children:"Image Optimization Settings"}),"\n",(0,t.jsxs)(i.ol,{start:"4",children:["\n",(0,t.jsxs)(i.li,{children:[(0,t.jsx)(i.strong,{children:"Loading behavior:"})," Control when images load for better performance:","\n",(0,t.jsxs)(i.ul,{children:["\n",(0,t.jsxs)(i.li,{children:[(0,t.jsx)(i.strong,{children:"Auto"})," - Browser default behavior"]}),"\n",(0,t.jsxs)(i.li,{children:[(0,t.jsx)(i.strong,{children:"Lazy"})," - Load when image enters viewport (recommended for below-fold images)"]}),"\n",(0,t.jsxs)(i.li,{children:[(0,t.jsx)(i.strong,{children:"Eager"})," - Load immediately (recommended for above-fold images)"]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(i.p,{children:[(0,t.jsx)(i.strong,{children:"Alt text:"})," Provide descriptive text for accessibility and SEO. This is crucial for screen readers and appears when images fail to load."]}),"\n",(0,t.jsxs)(i.p,{children:[(0,t.jsx)(i.strong,{children:"Size optimization:"})," The media library automatically provides different sizes to match your design needs while optimizing file size."]}),"\n",(0,t.jsx)(i.h2,{id:"accessibility-best-practices",children:"Accessibility Best Practices"}),"\n",(0,t.jsxs)(i.p,{children:[(0,t.jsx)(i.strong,{children:"Descriptive alt text:"})," Write alt text that describes the image content and purpose:"]}),"\n",(0,t.jsx)(i.pre,{children:(0,t.jsx)(i.code,{className:"language-html",children:'\x3c!-- Good alt text --\x3e\n<img src="team-meeting.jpg" alt="Five team members collaborating around a conference table">\n\n\x3c!-- Avoid --\x3e\n<img src="team-meeting.jpg" alt="Image">\n'})}),"\n",(0,t.jsxs)(i.p,{children:[(0,t.jsx)(i.strong,{children:"Decorative images:"})," For purely decorative images, write ",(0,t.jsx)(i.code,{children:'""'})," into the alt text field to create (",(0,t.jsx)(i.code,{children:'alt=""'}),") and indicate they should be ignored by screen readers."]}),"\n",(0,t.jsxs)(i.p,{children:[(0,t.jsx)(i.strong,{children:"Informative images:"})," For images that convey important information, ",(0,t.jsx)(i.strong,{children:"ensure the alt text captures that meaning"}),"."]}),"\n",(0,t.jsx)(i.h2,{id:"performance-considerations",children:"Performance Considerations"}),"\n",(0,t.jsxs)(i.p,{children:[(0,t.jsx)(i.strong,{children:"Lazy loading:"})," Use lazy loading for images below the fold to improve initial page load times."]}),"\n",(0,t.jsxs)(i.p,{children:[(0,t.jsx)(i.strong,{children:"Appropriate sizing:"})," Select image sizes that match your actual display dimensions to avoid loading unnecessarily large files."]}),"\n",(0,t.jsxs)(i.p,{children:[(0,t.jsx)(i.strong,{children:"Modern formats:"})," The media library supports modern formats like WebP for better compression and quality."]}),"\n",(0,t.jsxs)(i.p,{children:[(0,t.jsx)(i.strong,{children:"Responsive images:"})," Builderius automatically handles responsive image delivery based on screen size and device capabilities."]}),"\n",(0,t.jsx)(i.h2,{id:"dynamic-image-sources",children:"Dynamic Image Sources"}),"\n",(0,t.jsxs)(i.p,{children:[(0,t.jsx)(i.strong,{children:"Featured images:"})," Pull featured images from posts or pages using dynamic data."]}),"\n",(0,t.jsxs)(i.p,{children:[(0,t.jsx)(i.strong,{children:"Custom fields:"})," Display images stored in ACF or other custom field plugins."]}),"\n",(0,t.jsxs)(i.p,{children:[(0,t.jsx)(i.strong,{children:"External APIs:"})," Use images from external sources through dynamic data connections."]}),"\n",(0,t.jsx)(i.pre,{children:(0,t.jsx)(i.code,{className:"language-html",children:'\x3c!-- Dynamic image example --\x3e\n<img src="[[wp.post.featured_image.file_url]]" \n     alt="[[wp.post.featured_image.alt_text]]" \n     loading="lazy">\n'})}),"\n",(0,t.jsx)(i.h2,{id:"best-practices",children:"Best Practices"}),"\n",(0,t.jsxs)(i.p,{children:[(0,t.jsx)(i.strong,{children:"Optimize before upload:"})," Compress images appropriately before uploading to maintain quality while minimizing file size."]}),"\n",(0,t.jsxs)(i.p,{children:[(0,t.jsx)(i.strong,{children:"Consistent sizing:"})," Use consistent image dimensions within the same content type for visual harmony."]}),"\n",(0,t.jsxs)(i.p,{children:[(0,t.jsx)(i.strong,{children:"Backup text:"})," Always provide meaningful alt text - it's required for accessibility and helps with SEO."]}),"\n",(0,t.jsxs)(i.p,{children:[(0,t.jsx)(i.strong,{children:"Loading strategy:"})," Use lazy loading for most images, but set critical above-fold images to eager loading."]}),"\n",(0,t.jsx)(i.h2,{id:"when-to-use-image-element",children:"When to Use Image Element"}),"\n",(0,t.jsx)(i.p,{children:(0,t.jsx)(i.strong,{children:"Use Image element for:"})}),"\n",(0,t.jsxs)(i.ul,{children:["\n",(0,t.jsx)(i.li,{children:"Photographs and illustrations"}),"\n",(0,t.jsx)(i.li,{children:"User interface graphics"}),"\n",(0,t.jsx)(i.li,{children:"Dynamic content images"}),"\n",(0,t.jsx)(i.li,{children:"Responsive image display"}),"\n"]}),"\n",(0,t.jsx)(i.p,{children:(0,t.jsx)(i.strong,{children:"Consider alternatives for:"})}),"\n",(0,t.jsxs)(i.ul,{children:["\n",(0,t.jsx)(i.li,{children:"Simple icons (use SVG Code element)"}),"\n",(0,t.jsx)(i.li,{children:"Complex graphics with text (might need HTML Code for accessibility)"}

1),"\n",(0,t.jsx)(i.li,{children:"Background images (use CSS backgrounds in styling)"}),"\n"]})]})}function m(e={}){const{wrapper:i}={...(0,a.R)(),...e.components};return i?(0,t.jsx)(i,{...e,children:(0,t.jsx)(d,{...e})}):d(e)}},4903:(e,i,s)=>{s.d(i,{A:()=>n});const n=s.p+"assets/images/elements-24-93d4a630f41d8690f3049e2bd9e5cf30.webp"},5834:(e,i,s)=>{s.d(i,{A:()=>n});const n=s.p+"assets/images/elements-23-9910c5ae4fd3ad40926df2550121b814.webp"},8453:(e,i,s)=>{s.d(i,{R:()=>r,x:()=>l});var n=s(6540);const t={},a=n.createContext(t);function r(e){const i=n.useContext(a);return n.useMemo(function(){return"function"==typeof e?e(i):{...i,...e}},[i,e])}function l(e){let i;return i=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:r(e.components),n.createElement(a.Provider,{value:i},e.children)}}}]);