A Andres Hernandez

Filtered Posts (Clear all)

From Heavy to Hyper-Fast: Optimizing Hero Images with AVIF in Astro

In our rifasvelez-web project, we're constantly looking for ways to enhance user experience, and a critical component of that is page load speed. The initial focus often goes to JavaScript bundles or server-side rendering, but sometimes the biggest wins come from simpler changes.

The Situation

Our rifasvelez-web site, built with Astro, featured a prominent hero section designed to captivate visitors immediately. While visually appealing, the hero image was a large PNG file.

Read more

From PNG to AVIF: Supercharging Web Performance in Astro

First impressions matter, especially on the web. A stunning hero image can captivate users, but a slow-loading one can drive them away. In the rifasvelez-web project, we recently tackled this challenge head-on by migrating our hero images from PNG to the more efficient AVIF format, a crucial step in optimizing site performance.

The Performance Bottleneck

Traditional image formats like PNG and JPEG have served the web well for decades. However, as web content grows richer and user

Read more

Mastering Your Social Presence: The Impact of an Optimized og:image

The internet is a vast place, and in the blink of an eye, your content can be shared across countless social platforms. But what makes it stand out? Often, it's the og:image – the visual ambassador of your page. A blurry, slow-loading, or incorrectly sized og:image is a missed opportunity, potentially leaving your content lost in the endless scroll.

The Invisible Problem: Unoptimized Open Graph Images

For the rifasvelez-web project, we recently tackled a crucial detail often

Read more

Boosting Web Performance: Optimizing Images for Superior LCP

The rifasvelez-web project is constantly striving for optimal user experience, and a crucial part of that is lightning-fast page loads. Recently, we tackled a significant refactor focused on image optimization and preloading to achieve a better Largest Contentful Paint (LCP) score.The LCP metric, a core component of Google's Core Web Vitals, measures the time it takes for the largest content element visible within the viewport to fully render. Often, this largest element is an image.

Read more
Andres Hernandez

Andres Hernandez

Product-focused Software Developer specializing in the React ecosystem (Next.js, TypeScript). Proven experience contributing to high-impact open source projects and building scalable web applications. Committed to clean code, UI/UX design principles, and SOLID architecture to solve complex problems.