Picture Frame Size Calculator and Visualizer
<body>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Photo Frame Sizes – Free Calculator & Visualizer</title>
<meta name="description" content="Find the right photo frame and mat size in inches or centimeters. Use our free picture frame size calculator and see accurate proportions, then browse common frame sizes and expert tips.">
<style>
:root{
--brand:#4CAF50;
--text:#1f2937;
--muted:#6b7280;
--bg:#ffffff;
--accent:#f9fafb;
--table-stripe:#f6f7f9;
}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif;line-height:1.6}
.wrap{max-width:1100px;margin:0 auto;padding:24px}
h1{font-size:28px;margin:0 0 8px}
h2{font-size:22px;margin:24px 0 8px;color:var(--brand)}
h3{font-size:18px;margin:20px 0 8px}
p{margin:12px 0}
.lede{color:var(--muted)}
/* Calculator layout */
.tool{background:var(--accent);border:1px solid #e5e7eb;border-radius:10px;padding:18px;margin:18px 0}
.container{display:flex;gap:24px;flex-wrap:wrap}
.calculator,.frame-display{flex:1 1 420px}
input,select{width:100%;padding:10px;margin:5px 0;border:1px solid #d1d5db;border-radius:6px;box-sizing:border-box}
button{padding:10px;width:100%;background-color:var(--brand);color:#fff;border:none;border-radius:6px;cursor:pointer}
button:hover{filter:brightness(0.95)}
.result{margin-top:12px}
.frame-display{text-align:center}
.annotation{fill:red;font-size:12px}
.dimension-line{stroke:red;stroke-width:0.5;marker-end:url(#arrow);marker-start:url(#arrow)}
/* Table */
.table-wrap{overflow:auto;border:1px solid #e5e7eb;border-radius:10px;margin:24px 0}
table{width:100%;border-collapse:collapse;font-size:14px}
thead th{background:#eef7f0;color:#0f5132;text-align:left;padding:10px;border-bottom:1px solid #dbe7df}
tbody td{padding:10px;border-bottom:1px solid #eef2f7}
tbody tr:nth-child(odd){background:var(--table-stripe)}
.note{font-size:12px;color:var(--muted)}
.toc{display:flex;flex-wrap:wrap;gap:8px;font-size:14px;margin:12px 0}
.toc a{color:var(--brand);text-decoration:none;border:1px solid #d1e7dd;border-radius:999px;padding:6px 10px;background:#eef7f0}
.toc a:hover{text-decoration:underline}
</style>
<div class="wrap">
<p class="lede">Use the tool below to calculate the correct picture frame size, mat size, and outer dimensions. Then browse our quick-size tables and tips to pick the perfect frame.</p>
<!-- TOOL: on top -->
<div class="tool" id="calculator-tool">
<p>Our picture frame calculator is designed to help you <span style="text-decoration: underline;"><strong>find the perfect frame size</strong></span> for your favorite photos. It also calculates the mat size and the inner and outer dimensions of the frame, ensuring you create the ideal custom picture frames. With our calculator, you can easily determine the best frame sizes for your treasured photo collection.</p>
<h2>How to use:</h2>
<p>Once you input your values, you'll be able to see the picture frames digitally represented in accurate proportions, allowing you to visualize how they'll complement your wedding photos or that unforgettable family vacation shot where everyone blinked at just the right moment.</p>
<div class="container">
<div class="calculator">
<h2>Picture Frame Size Calculator</h2>
<label for="unit">Select Unit:</label>
<select id="unit" onchange="updatePlaceholders()">
<option value="inches">Inches</option>
<option value="centimeters">Centimeters</option>
</select>
<label for="artworkWidth">Artwork Width:</label>
<input type="number" id="artworkWidth" placeholder="Enter artwork width" value="8">
<label for="artworkHeight">Artwork Height:</label>
<input type="number" id="artworkHeight" placeholder="Enter artwork height" value="10">
<label for="frameWidth">Frame Width:</label>
<input type="number" id="frameWidth" placeholder="Enter frame width" value="2">
<label for="matWidth">Mat Width:</label>
<input type="number" id="matWidth" placeholder="Enter mat width" value="1">
<button onclick="calculateFrameSize()">Calculate Frame Size</button>
<div class="result" id="result"></div>
</div>
<div class="frame-display" id="frameDisplay"></div>
</div>
</div>
<!-- QUICK LINKS -->
<div class="toc">
<a href="#size-table">Common Sizes</a>
<a href="#understanding">Understanding Frame Sizes</a>
<a href="#ranges">Small / Medium / Large</a>
<a href="#choosing">How to Choose</a>
<a href="#matting">Matting & Frame Size</a>
</div>
<!-- TABLE on top under tool -->
<h2 id="size-table">Common Photo Frame Sizes (Inches & Centimeters)</h2>
<div class="table-wrap">
<table aria-describedby="size-note">
<thead>
<tr>
<th>Print Size (in)</th>
<th>Print Size (cm)</th>
<th>Frame (No Mat)</th>
<th>Frame (With Mat)</th>
<th>Typical Uses</th>
</tr>
</thead>
<tbody>
<tr>
<td>4 × 6</td>
<td>10 × 15</td>
<td>4 × 6</td>
<td>5 × 7 or 8 × 10</td>
<td>Snapshots, desk photos</td>
</tr>
<tr>
<td>5 × 7</td>
<td>13 × 18</td>
<td>5 × 7</td>
<td>8 × 10 or 11 × 14</td>
<td>Portraits, framed gifts</td>
</tr>
<tr>
<td>8 × 10</td>
<td>20 × 25</td>
<td>8 × 10</td>
<td>11 × 14 or 16 × 20</td>
<td>Family photos, art prints</td>
</tr>
<tr>
<td>8.3 × 11.7 (A4)</td>
<td>21 × 29.7</td>
<td>A4</td>
<td>11 × 14 or 16 × 20</td>
<td>Certificates, documents</td>
</tr>
<tr>
<td>11 × 14</td>
<td>28 × 35</td>
<td>11 × 14</td>
<td>16 × 20</td>
<td>Large portraits, diplomas</td>
</tr>
<tr>
<td>12 × 16</td>
<td>30 × 40</td>
<td>12 × 16</td>
<td>16 × 20 or 18 × 24</td>
<td>Medium wall art</td>
</tr>
<tr>
<td>16 × 20</td>
<td>40 × 50</td>
<td>16 × 20</td>
<td>20 × 24 or 20 × 26</td>
<td>Large portraits, wall displays</td>
</tr>
<tr>
<td>18 × 24</td>
<td>46 × 61</td>
<td>18 × 24</td>
<td>24 × 30</td>
<td>Posters, art prints</td>
</tr>
<tr>
<td>20 × 30</td>
<td>50 × 76</td>
<td>20 × 30</td>
<td>24 × 36</td>
<td>Posters, panoramic photos</td>
</tr>
<tr>
<td>24 × 36</td>
<td>61 × 91</td>
<td>24 × 36</td>
<td>30 × 40</td>
<td>Movie posters, statement art</td>
</tr>
</tbody>
</table>
</div>
<p id="size-note" class="note">Note: cm values are rounded for readability. If your print is a non‑standard size, use the calculator above for exact frame/mat suggestions.</p>
<!-- CONTENT SECTIONS -->
<h2 id="understanding">Understanding Frame Sizes</h2>
<p>Frame sizes are labeled by the size of the print or glass they hold, not the outside frame. For example, an “8×10 frame” fits an 8×10 inch photo (the outer frame will be larger depending on style). The most common sizes are 4×6, 5×7, and 8×10 for small to medium photos, with larger formats like 16×20 and 24×36 used for statement wall art.</p>
<h2 id="ranges">Small, Medium, Large & Extra‑Large Frames</h2>
<h3>Small (4×6, 5×7)</h3>
<p>Great for desks, shelves, and tight wall spaces. Perfect for portraits, travel photos, and small gifts.</p>
<h3>Medium (8×10, 11×14, 12×16)</h3>
<p>Ideal for family portraits, wedding photos, and certificates. Works on tabletops or walls.</p>
<h3>Large (16×20, 18×24, 20×30)</h3>
<p>Best for big portraits, art prints, and professional photography. Designed for wall display.</p>
<h3>Extra‑Large (24×36, 30×40)</h3>
<p>For posters, panoramic prints, and oversized art. Always wall‑mounted and a strong focal point.</p>
<h2 id="choosing">How to Choose the Right Frame Size</h2>
<ul>
<li>
<strong>Photo resolution:</strong> Bigger prints need higher resolution for sharp results.</li>
<li>
<strong>Display space:</strong> Balance frame size with your wall or shelf area.</li>
<li>
<strong>Matting:</strong> Mats elevate presentation but require the next frame size up.</li>
<li>
<strong>Number of subjects:</strong> Group photos usually look better larger.</li>
<li>
<strong>Style:</strong> Slim frames keep things minimal; thicker frames add presence.</li>
</ul>
<h2 id="matting">Matting & Frame Size</h2>
<p>No mat? Match frame to print size. Using a mat? Size up the frame. Common pairings:</p>
<ul>
<li>5×7 photo → 8×10 frame (with mat)</li>
<li>8×10 photo → 11×14 frame (with mat)</li>
<li>11×14 photo → 16×20 frame (with mat)</li>
<li>16×20 photo → 20×24 frame (with mat)</li>
</ul>
<p>For custom mat widths or non‑standard prints, use the calculator at the top to get precise outer dimensions and a scaled preview.</p>
</div>
<script>
function updatePlaceholders() {
const unit = document.getElementById('unit').value;
const placeholders = {
inches: {
artworkWidth: 'Enter artwork width in inches',
artworkHeight: 'Enter artwork height in inches',
frameWidth: 'Enter frame width in inches',
matWidth: 'Enter mat width in inches'
},
centimeters: {
artworkWidth: 'Enter artwork width in centimeters',
artworkHeight: 'Enter artwork height in centimeters',
frameWidth: 'Enter frame width in centimeters',
matWidth: 'Enter mat width in centimeters'
}
};
document.getElementById('artworkWidth').placeholder = placeholders[unit].artworkWidth;
document.getElementById('artworkHeight').placeholder = placeholders[unit].artworkHeight;
document.getElementById('frameWidth').placeholder = placeholders[unit].frameWidth;
document.getElementById('matWidth').placeholder = placeholders[unit].matWidth;
}
function convertToInches(value, unit) {
return unit === 'centimeters' ? value / 2.54 : value;
}
function convertToDisplay(value, unit) {
return unit === 'centimeters' ? value * 2.54 : value;
}
function calculateFrameSize() {
const unit = document.getElementById('unit').value;
const artworkWidth = convertToInches(parseFloat(document.getElementById('artworkWidth').value), unit);
const artworkHeight = convertToInches(parseFloat(document.getElementById('artworkHeight').value), unit);
const frameWidth = convertToInches(parseFloat(document.getElementById('frameWidth').value), unit);
const matWidth = convertToInches(parseFloat(document.getElementById('matWidth').value), unit);
if (isNaN(artworkWidth) || isNaN(artworkHeight) || isNaN(frameWidth) || isNaN(matWidth)) {
document.getElementById('result').innerHTML = "Please enter valid numbers.";
return;
}
const totalWidth = artworkWidth + 2 * (frameWidth + matWidth);
const totalHeight = artworkHeight + 2 * (frameWidth + matWidth);
document.getElementById('result').innerHTML = `
<h3>Frame Outer Dimensions:</h3>
<p>Width: ${convertToDisplay(totalWidth, unit).toFixed(2)} ${unit}</p>
<p>Height: ${convertToDisplay(totalHeight, unit).toFixed(2)} ${unit}</p>
`;
displayFrame(artworkWidth, artworkHeight, frameWidth, matWidth);
}
function displayFrame(artworkWidth, artworkHeight, frameWidth, matWidth) {
const svgMaxWidth = 500;
const svgMaxHeight = 500;
const totalFrameWidth = artworkWidth + 2 * (frameWidth + matWidth);
const totalFrameHeight = artworkHeight + 2 * (frameWidth + matWidth);
const horizontalScale = svgMaxWidth / totalFrameWidth;
const verticalScale = svgMaxHeight / totalFrameHeight;
const scale = Math.min(horizontalScale, verticalScale);
const svgWidth = totalFrameWidth * scale;
const svgHeight = totalFrameHeight * scale;
const artworkScaledWidth = artworkWidth * scale;
const artworkScaledHeight = artworkHeight * scale;
const matScaledWidth = matWidth * scale;
const frameScaledWidth = frameWidth * scale;
document.getElementById('frameDisplay').innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" width="${svgWidth}" height="${svgHeight + 100}" viewBox="0 0 ${svgWidth} ${svgHeight + 100}" style="overflow: visible;">
<defs>
<linearGradient id="aware" x1="0%" y1="0%" x2="100%">
<stop offset="0%" style="stop-color:#ffffb3;stop-opacity:1"></stop>
<stop offset="100%" style="stop-color:#fccde5;stop-opacity:1"></stop>
</linearGradient>
<marker id="arrow" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto" markerUnits="strokeWidth">
<path d="M0,0 L0,6 L6,3 z" fill="red"/>
</marker>
<clipPath id="clipPath">
<rect x="0" y="0" width="${svgWidth}" height="${svgHeight}"></rect>
</clipPath>
</defs>
<!-- Frame -->
<rect x="0" y="0" width="${svgWidth}" height="${svgHeight}" style="fill:black; opacity:0.65; clip-path: url(#clipPath);"></rect>
<!-- Mat -->
<rect x="${frameScaledWidth}" y="${frameScaledWidth}" width="${artworkScaledWidth + 2 * matScaledWidth}" height="${artworkScaledHeight + 2 * matScaledWidth}" style="fill:white; stroke-width:0;"></rect>
<!-- Artwork -->
<rect x="${frameScaledWidth + matScaledWidth}" y="${frameScaledWidth + matScaledWidth}" width="${artworkScaledWidth}" height="${artworkScaledHeight}" style="fill:url(#aware); stroke-width:0;"></rect>
<!-- Outer Frame Width -->
<line x1="0" y1="${svgHeight + 10}" x2="${svgWidth}" y2="${svgHeight + 10}" class="dimension-line"/>
<text x="${svgWidth / 2}" y="${svgHeight + 25}" text-anchor="middle" class="annotation">Outer Frame Width: ${convertToDisplay(totalFrameWidth, document.getElementById('unit').value).toFixed(2)} ${document.getElementById('unit').value}</text>
<!-- Inner Frame Width -->
<line x1="${frameScaledWidth}" y1="${svgHeight + 35}" x2="${svgWidth - frameScaledWidth}" y2="${svgHeight + 35}" class="dimension-line"/>
<text x="${svgWidth / 2}" y="${svgHeight + 50}" text-anchor="middle" class="annotation">Inner Frame Width: ${convertToDisplay(artworkWidth + 2 * matWidth, document.getElementById('unit').value).toFixed(2)} ${document.getElementById('unit').value}</text>
<!-- Artwork Width -->
<line x1="${frameScaledWidth + matScaledWidth}" y1="${svgHeight + 60}" x2="${svgWidth - frameScaledWidth - matScaledWidth}" y2="${svgHeight + 60}" class="dimension-line"/>
<text x="${svgWidth / 2}" y="${svgHeight + 75}" text-anchor="middle" class="annotation">Artwork Width: ${convertToDisplay(artworkWidth, document.getElementById('unit').value).toFixed(2)} ${document.getElementById('unit').value}</text>
</svg>
`;
}
window.onload = () => {
updatePlaceholders();
calculateFrameSize();
};
</script>
<h1>Looking for unique framed artwork for home decoration?</h1>
<p>
<br data-start="1001" data-end="1004">Explore <a href="https://driedpetalsgallery.com/collections/wall-art-pressed-flowers-frames" title="pressed flower art"><strong data-start="1016" data-end="1078">pressed flower frame art featuring real pressed flower petals</strong></a>, carefully arranged to preserve its delicate charm and symbolic beauty forever.</p>
<p><img src="https://cdn.shopify.com/s/files/1/0858/4328/0160/files/20250803-125421.jpg?v=1754251154" alt="" width="414" height="414" style="display: block; margin-left: auto; margin-right: auto;"></p>
<p> </p>
</body>