Member Avatar for naniavss

Inline Code Example Here

  • 4 Contributors
  • 3 Replies
  • 68 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by stultuske

Dani AI

Generated

Short practical guide: decide semantics, file type, and responsive delivery up front. As hinted, an actual HTML image or inline SVG is appropriate when the graphic is site identity (so it remains linkable and accessible). As asked about sizes, use vector SVG for logos when possible (crisp at any size). For raster logos serve a base size that fits your header (commonly 120–400 px wide; height 24–120 px depending on layout) and include a 2x version for retina displays. For full-width hero banners target a largest source around 1600–2500 px wide and provide smaller variants so phones aren't sent desktop-sized files.

Accessibility and semantics: logos that convey identity should include descriptive alternative text and be reachable by keyboard (wrap in a link to the home page). Decorative banners that add no informational value can be implemented as CSS backgrounds so they are hidden from assistive tech; if a banner contains readable text or CTAs keep the text in HTML rather than baked into an image.

Performance and troubleshooting tips: optimize and compress (WebP where supported, with fallbacks), serve responsive sizes (avoid sending a 2500 px file to a 360 px phone), use lazy loading for below-fold images, and test for blurry results (use SVG or higher-density raster). If a banner is cropping oddly, check aspect ratio and use center-focused cropping or responsive-cover strategies. For implementation details and responsive-image techniques see MDN on responsive images (https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) and WCAG guidance on non-text content (https://www.w3.org/WAI/standards-guidelines/wcag/).

Recommended Answers

All 3 Replies

Member Avatar for JorgeM

What problem are you having that you need help with?

Member Avatar for bestwsd

what your logo size / Banner size ?
where you need both objects.

Member Avatar for stultuske

the classical way would be by using the <img > tag, but you can always do it in css as well.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.