Skip to content

Advanced Links & Media Assets

Links and images are the heaviest and most interactive parts of a standard webpage. A senior developer must know how to handle them securely and optimally.

Advanced Anchor Tag (<a>) Attributes

Beyond the standard href and target="_blank", anchor tags have powerful attributes that control security and behavior.

Security: rel="noopener noreferrer"

When you link to an external website using target="_blank", you are potentially opening a major security vulnerability. The newly opened tab has partial access to the original tab's window object via window.opener. A malicious external site could redirect your original tab to a phishing page.

Always add rel="noopener noreferrer" when linking to external sites. 

<a href="https://untrusted-site.com" target="_blank" rel="noopener noreferrer">Visit Untrusted Site</a>

The download Attribute

You can force the browser to download a file instead of navigating to it. You can even suggest a filename.

<a href="/assets/report-v2.pdf" download="Q3-Financial-Report.pdf">Download Report</a>

Deep Linking Protocols

You can trigger native device applications directly from an anchor tag. 

<a href="mailto:support@example.com?subject=Help Request&body=Please help me with...">Send Email</a>
<a href="tel:+18005550199">Call Customer Support</a>
<a href="sms:+18005550199?body=Hello">Send a Text</a>

Advanced Image Optimization

Images account for over 60% of the bytes downloaded on an average webpage. Unoptimized images destroy performance and SEO.

Lazy Loading and Decoding

You can drastically improve initial page load times by delaying the loading of images that are off-screen.

  • loading="lazy": Tells the browser not to request the image until the user scrolls near it.
  • decoding="async": Tells the browser to decode the image off the main thread, preventing the UI from freezing while rendering massive JPEGs.
<img src="massive-hero.jpg" alt="Hero landscape" loading="lazy" decoding="async">

Resolution Switching with srcset

Serving a 4K image to a mobile phone is a massive waste of bandwidth. The srcset attribute allows you to provide multiple resolutions of the same image. The browser calculates the device's screen width and pixel density, and automatically downloads the optimal file.

<img src="small.jpg" 
 srcset="small.jpg 400w, 
 medium.jpg 800w, 
 large.jpg 1200w" 
 sizes="(max-width: 600px) 400px, 
 (max-width: 900px) 800px, 
 1200px" 
 alt="A responsive landscape">
The sizes attribute tells the browser exactly how wide the image will be rendered on the screen at different breakpoints, allowing it to make the calculation before the CSS even loads.

Art Direction with <picture>

Sometimes, simply scaling down an image ruins the composition (the main subject becomes too small to see). The <picture> element allows "Art Direction"—serving completely different, cropped images based on screen size.

<picture>
 <!-- Serve a tightly cropped square image on mobile -->
 <source media="(max-width: 599px)" srcset="mobile-crop.jpg">

 <!-- Serve a wide panoramic image on desktop -->
 <source media="(min-width: 600px)" srcset="desktop-panorama.jpg">

 <!-- Fallback for older browsers -->
 <img src="desktop-panorama.jpg" alt="Company Team">
</picture>
Using <picture> and srcset ensures your application is blazingly fast on mobile networks while remaining crisp on high-end desktop displays.