How to make a high resolution image from low resolution for a banner

A banner is a large piece of cloth seen from far away, and it still needs a count. Make the low-resolution photo larger only up to the distance people will stand.

My cousin builds a one-page site for the bakery he runs on weekends. He wrote how to make a high resolution image from low resolution in the subject line and attached a square. The square is the staff photo from the old shop site: 240 by 240 pixels, 38 KB, a JPEG. He had dropped it into a hero slot measured at 1920 by 640. The page showed a blurry face over a wide gray band, and he thought the fix was a bigger file of the same picture.

I opened both numbers before I opened a model. A banner at 1920 by 640 is about 1.2 million pixels. The avatar is 57,600 pixels. The slot holds roughly twenty-one times more pixels than the file. No tool puts those missing samples back as memory. A tool can guess a continuation of the face. It cannot photograph the counter, the window, and the street that a banner usually wants, because those things were cropped away before the file ever got to 240.

The face inside the square is the part he cares about. I measured it with a box from hairline to chin: about 86 pixels. Eyes are about 8 pixels wide. The glasses, which he does wear, are a dark line about 2 pixels thick at the temple. That is the entire source. Everything I hand back has to be judged against those counts, not against the banner mockup.

TL;DR. A 240 by 240 avatar cannot become a 1920 by 640 banner without inventing most of the pixels. Four times 240 is 960 pixels on a side, which still does not fill that slot, and the face inside the square is only about 86 pixels tall. I upscale the head for a small column, then I build the banner around it with flat color and type. I also check the page source first, because this staff page had a 480 pixel file the download button skipped. Stretching the 240 pixel square in the browser only makes a larger blur.

The file he actually saved

The JPEG is 240 by 240, sRGB, quality roughly in the 60s by the look of the blocks. Flat wall behind him shows 8 by 8 squares, faint but visible at 200 percent. The wall is a pale green. The blocks are greener in some cells and grayer in others. That pattern is compression, and an upscaler will treat it as texture if I do not calm it first.

He saved it from a phone browser with the image's "download" action. Phones often save the image currently displayed, and responsive pages display the small one. The filename was staff-nico.jpg, except his name is not Nico. The old site had reused a filename. I mention that only because filenames lie. Pixel counts do not.

I asked for the address of the staff page. In the page source the img tag pointed at a 240 pixel file, and a srcset attribute listed 240 and 480. The 480 file was 96 KB. Same crop, same glasses, twice the samples on a side. Four times the pixel count. I downloaded that before I did anything else. How to make a high resolution image from low resolution starts with refusing the smallest file if a larger one is sitting in the same folder.

The 480 version still is not a banner. It is a better headshot. His face is about 170 pixels tall there. Temples of the glasses are almost 4 pixels. I can see a small chip in the left lens that the 240 file had turned into a gray dot. That chip is a good test later. If an upscale heals the chip, it is inventing a clean lens he does not have.

What the banner slot is asking for

The mockup is 1920 by 640 because a theme he bought uses that ratio for the first screen. On a laptop the slot is about 8 inches tall in the browser window only if the window is huge. On his actual laptop, 14 inches, the hero is closer to 4 inches tall and the width runs the full window. A face that is 170 pixels tall, placed at about 2.5 inches on that screen, lands near 70 pixels per inch on the display. That is soft if you lean in, and acceptable if the face is not the only thing on the row.

He had set the image width to 100 percent and the height to 100 percent. The square stretched into a wide oval. His head looked like a funhouse mirror, and the browser's scaling added blur on top of the small file. I turned that off in the draft and put the photo in a fixed box, 280 pixels wide on screen, with the bakery name in type to the right. The page looked like a page. The photo looked like a small photo. He was disappointed for about ten minutes and then relieved, because the oval head had been the thing customers were mocking.

Pro was a separate wish. He wanted the same banner on a foam board, 24 by 8 inches, for the Saturday market. At 150 pixels per inch, which is already a compromise for a board people see from a few feet, that board wants 3600 by 1200 pixels. His best file is 480. The gap is not a slider. I told him to print the name and a flat color field, and to use a new photo for the board. He has a camera. The Saturday light is free. A new photo is a higher resolution image in the only sense that counts.

Two enlargements, judged on the chip in the lens

I ran the 480 file, not the 240, through a 2 times pass on the AI image upscaler. Output: 960 by 960. I did not start at 4 times. A 2 times result is small enough that I can flip between it and the source and see what moved. The chip in the left lens stayed a chip. The wall blocks calmed down. The hair got slightly felted along the part, a patch about 40 pixels wide in the new file where individual strands had never existed. I could live with the hair. I could not live with a healed lens, and I did not get one, so this pass stayed in the folder.

A second 2 times pass, which is 4 times from the 480 and 1920 on a side, felt like a different picture. Pores appeared on the cheek that I cannot find in the 480 file even as noise. The glasses bridge grew a highlight. The chip became a stylish speck with an edge. That is the model finishing a face from other faces it has seen. My cousin is a specific person. I rejected the 4 times file. The 4x upscale path is available, and I use it when the source actually has edges to continue. A temple that is 4 pixels wide does not contain a portrait.

From the 240 file, a single 4 times pass landed at 960, the same dimensions as the careful 2 times from the 480, and it looked worse. The wall blocks had been promoted into mottled plaster. The chip was gone. The eyes were rounder than his. Same tool, worse input, invented face. I kept the output only as a teaching pair so he could see why I had hunted the 480.

Order I will repeat on the next avatar

Denoise the wall a little, or crop the face so the model spends less time explaining JPEG squares. Then 2 times. Then compare at 100 percent on a feature I can name: chip, mole, gap in a tooth, crack in a frame. Then stop. Another 2 times only if that feature survived and the print size still demands it. The banner width is not a demand the face can answer.

Where the extra banner pixels should come from

The hero still needed to be wide. I built it as a layout, not as a photograph. Background: the pale green sampled from the wall, one flat color, hex picked once, not cloned in patches. His photo: the 960 square, masked into a circle he already uses on the staff page, sitting in the left third. Type: the bakery name and the Saturday hours, set in a font I outlined so the printer would not substitute it. A thin rule under the hours. No drop shadow on the face. Shadows on an upscaled head look like dirt.

That layout file is 1920 by 640 and it is sharp, because type and flat color are sharp at any size. The only photographic pixels are the circle. If you zoom the circle you see the limit. If you look at the page you read the hours. He had asked for a photograph the size of the slot. He needed a slot that told the truth about the photograph he had.

I exported two files. hero-screen.jpg at 1920 by 640, quality high, for the website. hero-board was not exported, because I refused the foam board. In its place I sent a one-line spec for a new photo: shoot at the counter, horizontal, at least 3000 pixels on the long side, face at least 800 pixels tall if the face is in the frame. He sent that photo the next Saturday. It is 4032 by 3024. We cropped a banner from it and never opened the upscaler.

Checks before anyone promises a banner

These are the questions I write on the ticket. They keep a 240 pixel square from becoming a weekend of fake detail.

• Measure the file in pixels, not the size it appears on the screen.
• Search the page source or the old camera card for a larger capture of the same frame.
• Measure the face, the eyes, or another small feature in pixels.
• Name one defect you can see, and refuse any result that repairs it away.
• Decide the real display size in inches, then divide feature pixels by inches.
• Fill extra banner space with type and flat color, not with cloned background.
• Stop at 2 times unless a named feature survived and you still need the inches.
• Keep the tiny original in the folder so a later edit does not start from the guess.

The list is short because the mistakes are repetitive. People enlarge first and ask what the file was later. I ask what the file was while the original filename still exists.

Sizes I compared for this one job

The rows are this cousin, this week. Another avatar will not match them, and the method is what I want to keep.

File or target	Pixel size	Face height	Decision
Downloaded avatar	240 by 240	about 86 px	Do not upscale if a larger file exists
Srcset file	480 by 480	about 170 px	Source for a modest 2 times pass
2 times from 480	960 by 960	about 340 px	Kept for the on-screen circle
4 times from 480	1920 by 1920	about 680 px	Rejected, chip and pores invented
Banner slot	1920 by 640	layout, not a crop	Type and flat color around the circle
Market board	3600 by 1200 at 150 ppi	needs a new photo	Shot the next Saturday

The board row is the one that changes the plan. Once the inches are real, the avatar is obviously the wrong object. On a screen, the same avatar can feel "almost enough" because screens are small and CSS makes every image fit the box.

A drawing, so the lesson is not his face

I do not paste a relative's face into a public note. When I need to point at enlargement itself, I use a generated drawing: a round head, a teal body, a panel with a yellow circle and a few bars, a small green shape on a brown floor. No customer, no cousin, no bakery.

The drawing is simple on purpose. Edges are hard. Colors are flat. If I shrink it to a tiny grid and enlarge it by repeating pixels, the steps are the process, not a hidden photograph. His avatar is the opposite kind of file. The pixels inside the 86-pixel face are already a compromise of skin, JPEG blocks, and glasses. Repeating them makes bigger blocks. Guessing between them makes a new face. The drawing lets me show that difference without putting his chip, or his eyes, on this page.

I keep the drawing in the same folder as the job notes. When a later request says "just do what you did for the bakery," I can open the drawing and the table, not his rejected 4 times file.

JPEG blocks, hair, and the color of the wall

The pale green wall is where upscales go to misbehave. In the 240 file the green is unstable from block to block, a swing I would call several steps on a 0 to 255 scale, enough to see at a glance. The 480 file swings less. A denoise aimed only at the wall, masked so it does not touch the hair, made the 2 times result cleaner. I used a soft mask, about 20 pixels of fade along the shoulder in the 480 file. The shoulder line stayed where it was.

Hair is not wall. The part is a dark line. In the 480 file it is broken by compression into dashes. The 2 times pass connected some dashes. I allowed that, because a part is a soft human edge and the connection did not move the line sideways. I would not allow the same connection on a logo or on lettering. There was no lettering in the photo. The bakery name was added as real type later, from a font, which is the correct way to get sharp letters.

Color of skin shifted warmer on the rejected 4 times file, a small push toward orange in the cheeks. The 2 times file stayed closer to the 480. I checked by sampling the same spot on the forehead, away from the glasses shadow. If I cannot sample a match, I do not ship the file, even when the face looks "better" at a glance. Better often means a different person under warmer light.

Glasses frames picked up a thin white edge on the 4 times file, a halo about 1 pixel in the 1920 image, which is the upscaler outlining a dark line against the green wall. The 2 times file did not show that halo at 100 percent. Halo on eyewear is one of my stop signs. It reads as cut-out, and a cut-out head on a bakery banner looks like a sticker.

What I told him to stop doing

He had run the avatar through a phone app that promised a 4K export. The app delivered 3840 by 3840, which is 16 times the 240 side. The file was 4.8 MB and looked like clay. Pores were regular, almost tiled. The chip was a sparkle. The ears, which are partly cropped in the square, grew little rims of ear that changed the crop. I did not try to repair that file. Repairing an invention stacks guesses. We deleted it and went back to the 480.

He also asked if a screenshot of the banner, taken after the browser had stretched it, could be the new source. The screenshot was 1440 pixels wide on his laptop and contained the oval head plus the browser chrome. I cropped the chrome to show him, and the head was still the 240 pixel photo, resampled by the screen. A screenshot of a small photo is a photograph of a display, not a higher resolution capture. I have written that sentence so often I keep it in the notes template.

If the old shop had a printed menu with his photo, a scan of that print could beat the avatar. We looked. The menu used a different picture, a group shot, and his face there was about a centimeter tall. Scanned at a true 600 pixels per inch that centimeter is only about 240 pixels again. Same trap, paper edition. I scanned it anyway, confirmed the face height, and set the scan aside. It is in the folder as menu-scan.tif so nobody tries it during a rush.

Screen pixels and print pixels, said once for this job

A website image does not have a physical size until a screen shows it. The 1920 by 640 hero is "high resolution" only relative to the window. On a phone the theme shrinks it to the phone width, around 390 pixels, and the 960 circle is reduced again. The upscale is invisible on that phone. It exists for the laptop and for the day someone views the source. I still do the 2 times pass carefully, because he will reuse the circle in other layouts, but I do not call the result a high resolution photograph.

A print has inches. Inches times pixels per inch is a budget. I write the budget on the ticket: board, 24 by 8, even a lenient 100 pixels per inch wants 2400 by 800. We did not have 2400 pixels of face across anything. The new Saturday photo does. Its long side is 4032. Cropped to the banner ratio it still has detail in the tiles behind the counter, which I can count. I counted eight tiles across a region that was mush in the avatar.

That is the whole difference. In the new photo I can count tiles. In the avatar I can barely count eyes. How to make a high resolution image from low resolution, when someone is standing in the shop with a camera, is sometimes "make a new image."

The folder and the names

bakery-avatar-240.jpg, bakery-srcset-480.jpg, bakery-2x-960.jpg, bakery-4x-rejected.jpg, bakery-hero-1920x640.jpg, bakery-saturday-original.jpg, bakery-saturday-banner.jpg. Plus a text file with the face heights and the chip test. The rejected file is named rejected so it is hard to upload by accident. I have seen the wrong export go live because it was the largest file in the folder and the largest file felt like the finished one.

The hero JPEG is quality 90, about 420 KB. Flat color compresses well. The circle is the expensive part. I did not export a PNG of the full banner. It would have been several megabytes of flat green, and the host he uses fusses about large uploads. If I had needed a transparent circle for another layout, that would be a PNG of the circle alone, not of the whole banner.

He uploaded hero-screen.jpg the same night. I checked the live page in a browser, viewed the image in a new tab, and confirmed the intrinsic size was 1920 by 640 and not a theme-shrunk substitute. Themes sometimes regenerate uploads. This one kept the file. I wrote that down too, because the next theme might not.

What this does not generalize into

A 240 pixel file of a simple logo can be redrawn as vectors and then it is sharp at any banner size. His face is not a logo. I did not trace it. Tracing a face by hand is illustration, and if he wants an illustrated mark we can talk about that as a drawing, labeled as a drawing. The circle on the site is a photograph with a known limit, which is a different honest object.

A 240 pixel file that is a downsample of a sharp original, with no JPEG rubble, upscales more cleanly than this one did. The staff photo had rubble. The Saturday photo made the question moot. If you are in the unhappy middle, where the small file is truly all that exists and the face must be larger, stay at 2 times, judge a named feature, and design the layout so the face is not 24 inches wide.

I wrote the neighboring notes for the cases that are not this case. How to make a low quality image high quality is the wider repair, when the problem is dirt and softness and not only the pixel count. AI image upscale is what the model is doing when I do press the button. Can you increase the resolution of a photo is the shorter answer I send when someone wants a yes or no. This bakery job is the long version of the no, followed by the layout that made the no acceptable, followed by the new photo that made the no irrelevant.

The sentence I sent him

You cannot make a high resolution image of a face from 86 pixels of face. You can make a respectable small circle from 170 pixels of face, at 2 times, if the chip in the lens is still a chip. You can make a banner by putting that circle next to type. You can make a market board by taking a new picture. He did the last thing. The 960 circle remains on the site for the days when the Saturday photo is the wrong crop, and it is labeled in the folder with the size it really is.

That is as much as I will promise the next person who attaches a square and a wide mockup. I will look for the larger file first. I will measure the face. I will refuse the foam board if the pixels are not there. I will not stretch a head into an oval to fill a theme.