How This Site Works & How You Can Make Your Own F1 Breaking Graphics

If you have ever wondered how people make those F1-style breaking news graphics-the ones that look like they belong on the official broadcast-this post lays it out. No gatekeeping, no mystery. Here is how you can do it yourself and how this site does it.

Where the Images Come From

The imagery in most F1 breaking graphics-driver headshots, car reveals, podium shots, livery launches-comes from official sources. The main one is Formula 1’s official website at formula1.com.

The site publishes high-quality photos for every race, test, launch, and press event. They host driver portraits, team profiles, car galleries, and event imagery. That is what makes graphics look professional and consistent. When you see a graphic that feels “official,” it is usually using images from there or from team websites that follow similar standards.

How to Source Images Yourself

You do not need special tools or APIs. Here is a straightforward approach:

Formula1.com

• Go to formula1.com and browse Teams, Drivers, News, or Race sections.
• Most photos are viewable in galleries or article bodies.
• Right-click and use “Save image as” to download what you need.
• Respect their terms of use: they allow personal and editorial use. Do not hotlink their servers; download and host your own copy if you are publishing elsewhere.

Team Websites

Individual teams (Ferrari, Mercedes, McLaren, etc.) publish their own imagery. Team launch pages and media galleries are excellent for livery reveals and driver announcements. The same approach applies: browse, save, and use responsibly.

Attribution and Ethics

Even when using official imagery, it is good practice to credit your source in captions or credits when you can. If you are making fan content or memes, staying within fair use and personal use is generally fine. For commercial or heavily monetized use, you may need to check the specific terms of the source.

What You Need to Create Graphics

To make your own F1-style graphics, you need:

1. An image – A driver photo, car shot, or scene from an event.
2. A layout – A “breaking news” style frame with space for a headline and subtitle.
3. Typography – Bold, condensed fonts similar to what F1 uses. The official broadcast uses a specific F1 Display font family; similar alternatives exist if you do not have the license.
4. Colors – Team colors or F1’s red/black palette help sell the look.
5. Export – A final image at a sensible size (e.g. 1080×1350 for Instagram).

You can do all of this in Photoshop, Figma, Canva, or even presentation tools. The core idea is: strong photo, clear typography, team-inspired colors, and a simple layout.

How This Website Does It

This site is built to automate that process in the browser. Here is how it works, in plain terms:

The Create Page

When you go to /create, you get a live editor. You can:

• Upload an image – Any photo you provide. The tool does not pull from F1 automatically; you bring your own. Most users upload images they have saved from formula1.com or team sites.
• Pick a team preset – Presets apply official team colors (e.g. Ferrari red, Mercedes teal) and optionally a team logo. The colors come from publicly known brand guidelines.
• Edit text – Headline and subtitle fields map directly onto the graphic. The layout auto-adjusts font size based on length.
• Position and zoom – You can drag the image and zoom in/out so the best part of the photo is visible.
• Export – Click “Export Image” and the page converts the visible preview into a PNG. It uses a library called html-to-image to capture the DOM as an image, with the F1-style fonts embedded so the export matches what you see.

What Happens Under the Hood

The layout is a fixed 1080×1350 pixel canvas (optimised for Instagram). It uses CSS for the gradient background, a geometric pattern overlay, and absolute positioning for the F1 logo, team logo, and text. When you export:

1. The current state of that canvas is rendered at full resolution.
2. Fonts are embedded as base64 so they render correctly in the export.
3. The result is offered as a download (e.g. f1-breaking-your-headline.png).

No server-side image processing. No AI. No secret sauce. It is a client-side tool that takes what you put in and outputs a PNG.

Images Are Yours

The site never stores or processes your images on a server. Uploads are handled in the browser. The only network calls related to creation are analytics (e.g. PostHog, Google Analytics) to understand usage. Your graphics stay on your device until you choose to share them.

Team Logos and Fonts

Team logos in the presets are from publicly available 2026 branding. The F1 Display fonts used in the template are the same ones used in broadcast graphics; they are loaded from local font files to ensure consistent rendering. If you inspect the page, you can see how the layout and assets are structured-everything is visible in the client.

You Can Recreate This

If you want to build something similar:

• Use any layout tool (React, vanilla HTML/CSS, or a design app).
• Define a canvas with the same proportions and layer: background, image, pattern, logos, text.
• Use html-to-image or similar to export the DOM to PNG.
• Let users upload images, pick colors, and edit text. No backend is required for the core flow.

The value of this site is convenience: team presets, drag-and-drop positioning, and one-click export. The underlying idea-combine an official-style image with a broadcast-style frame-is something anyone can replicate with a bit of time and the right assets.

Getting Started

To make your first graphic:

1. Visit formula1.com and save a photo you like.
2. Go to this site’s create page.
3. Upload the image, choose a team or custom colors, and add your headline and subtitle.
4. Adjust position and zoom, then export.

No account, no payment, no limits. The tool is built to stay simple and transparent. If you have questions or want to dig into the code, the project is open-you can inspect how it works and adapt it for your own use.

---

Ready to try it? Create your first F1 breaking graphic →