Add new article on image optimization for the web

[matiasperz]

• Introduced a comprehensive guide on how browsers handle images, covering intrinsic vs rendered size, srcset, and weight.
• Explained the importance of image optimization and provided best practices for using different image formats and attributes.
• Included examples of srcset and sizes to demonstrate how to improve loading efficiency across devices.

Greptile Summary

This PR adds log #13, a comprehensive guide on how browsers handle images — intrinsic vs rendered size, weight/bitmap vs container, srcset/sizes, decoding, and the 2× retina rule. The article follows the same frontmatter structure as existing log entries and no meta.json changes are needed since the logs section auto-discovers files.

Confidence Score: 5/5

Safe to merge — content-only addition with no code changes.

Single documentation file, technically accurate, and consistent with existing log structure. The one finding is a P2 style suggestion (missing fetchpriority in an example snippet) that does not block merge.

No files require special attention.

Important Files Changed

Filename	Overview
content/logs/13-images-on-the-web.mdx	New log article on image optimization; well-structured and technically accurate. Minor: fetchpriority="high" omitted from the above-fold hero image example.

Prompt To Fix All With AI

This is a comment left during a code review.
Path: content/logs/13-images-on-the-web.mdx
Line: 217-220

Comment:
**Missing `fetchpriority` on above-fold image example**

The above-the-fold image example omits `fetchpriority="high"`, which the team's own engineering guidelines recommend for critical above-fold images. Since this article teaches image optimization best practices, including it would make the example complete and aligned with the project's standards.

```suggestion
<!-- Above the fold: load eagerly, decode synchronously, high fetch priority -->
<img src="/hero.jpg" loading="eager" decoding="sync" fetchpriority="high" alt="Hero" />
```

**Context Used:** public/AGENTS.md ([source](https://app.greptile.com/review/custom-context?memory=bd6e51dd-d00f-4964-8514-35f52767b2de))

How can I resolve this? If you propose a fix, please make it concise.

_{Reviews (1): Last reviewed commit: "Add new article on image optimization fo..." | Re-trigger Greptile}

Greptile also left 1 inline comment on this PR.

Context used:

• Context used - public/AGENTS.md (source)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
joyco-hub	Ready	Preview, Comment	Apr 6, 2026 2:36pm

[greptile-apps]

Missing fetchpriority on above-fold image example

The above-the-fold image example omits fetchpriority="high", which the team's own engineering guidelines recommend for critical above-fold images. Since this article teaches image optimization best practices, including it would make the example complete and aligned with the project's standards.

Suggested change

	```html
	<!-- Above the fold: load eagerly, decode synchronously -->
	<img src="/hero.jpg" loading="eager" decoding="sync" alt="Hero" />
	<!-- Above the fold: load eagerly, decode synchronously, high fetch priority -->
	<img src="/hero.jpg" loading="eager" decoding="sync" fetchpriority="high" alt="Hero" />

Context Used: public/AGENTS.md (source)

Prompt To Fix With AI

This is a comment left during a code review.
Path: content/logs/13-images-on-the-web.mdx
Line: 217-220

Comment:
**Missing `fetchpriority` on above-fold image example**

The above-the-fold image example omits `fetchpriority="high"`, which the team's own engineering guidelines recommend for critical above-fold images. Since this article teaches image optimization best practices, including it would make the example complete and aligned with the project's standards.

```suggestion
<!-- Above the fold: load eagerly, decode synchronously, high fetch priority -->
<img src="/hero.jpg" loading="eager" decoding="sync" fetchpriority="high" alt="Hero" />
```

**Context Used:** public/AGENTS.md ([source](https://app.greptile.com/review/custom-context?memory=bd6e51dd-d00f-4964-8514-35f52767b2de))

How can I resolve this? If you propose a fix, please make it concise.

_{Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!}