Preparing images so a bio page stays fast

The background is most of the page

A link-in-bio page is a name, a short line about you and a column of buttons. Written out, that is a couple of kilobytes. Add one full-screen background photo and the page can grow a hundredfold. The background is also the largest element on screen, which means it is what the browser waits for before it decides the page has finished painting.

Card images on individual links come second. Each is small on screen, but a page with ten links can carry ten of them, and ten mediocre files add up faster than one bad one.

What a phone camera actually gives you

A photo straight from a modern phone is commonly three to six megabytes and several thousand pixels wide. The phone displaying your page shows something around a thousand pixels across. Everything beyond that is downloaded, decoded and thrown away.

Uploading the original untouched is the most common mistake on a link page, and it is invisible to the person who made it. The photo was already on their device, so it appears instantly for them. The visitor on a train, on a weak cellular connection, is the one who pays for it.

Resizing is the largest single win, and it is not a compromise: an image displayed at 1080 pixels gains nothing from being 4000. After that, re-encoding matters. AVIF usually produces a much smaller file than the JPEG a camera writes, at the same visual quality, and phone browsers have supported it for years.

Anything uploaded to tapmy.link is re-encoded on the server to AVIF with a width and byte budget for each kind of image — profile photo, card, background — so the size of the original stops mattering. HEIC photos from an iPhone are accepted and converted.

Blur is a compression trick as well as a design one

Compression works by discarding detail the eye is unlikely to miss. A photograph full of fine texture — leaves, gravel, a crowd — resists that and stays large. Blurring a background slightly removes exactly the detail that was costing bytes, and the file gets noticeably smaller at the same quality setting.

The second effect is the useful one. Text over a sharp photograph is hard to read, because the letters compete with the edges behind them. A slight blur, plus a darkening layer, gives the text a calm surface to sit on. Both goals — a smaller file and readable text — happen to want the same treatment.

Contrast is worth checking rather than eyeballing. White text over a pale sky looks fine on a bright laptop screen and disappears on a phone outdoors. If you cannot decide, increase the darkening until the text is obviously readable, then step back once.

What the file carries besides the picture

A phone photo is not only pixels. The EXIF block records the camera, the exact time and, very often, the GPS coordinates of the place the shot was taken. Publishing a picture of your own front door with its coordinates attached is not a theoretical risk.

Stripping EXIF also removes the orientation flag, which is why an image occasionally comes out rotated after processing. A correct pipeline applies the rotation to the pixels first and then discards the tag. Rotation is the one piece of EXIF that has to survive — in the picture, not in the metadata.

Card images: consistency beats resolution

Small pictures on link cards are judged as a set. Ten photos shot at different distances, some square and some tall, read as clutter even when every one of them is sharp. One crop shape, roughly one subject size and similar brightness across all of them do more for the page than any amount of resolution.

• Crop to the same aspect ratio before uploading, not after.
• Keep the subject near the middle; cards are cropped differently on narrow screens.
• Avoid text inside a card image. It is unreadable at that size and cannot be translated.
• Look at the page as a whole, not at each picture. One over-bright card pulls the eye out of order.
• Replace a photo that only works at full size with a plain colour or a simple icon.