{imageName}
{#if ratio >= 1.3}
The image loaded is {ratio}x larger than it appears in the browser. {#if $fileSize.weight > 450} Try using a smaller image or reduce the file size by compressing it. {/if}
{:else if ratio === 1}
The image is exactly the correct size for this screen.
{:else if ratio >= 0.99 && ratio < 1.3}
The image size is very close to the size it appears in the browser. {#if ratio > 1} Because there are various screen sizes, it's okay for the image to be {ratio}x than it appears on the page. {/if}
{:else} {@const stretchedBy = maybeDecimals( 1 / $oversizedRatio ) }
The image file is {stretchedBy}x smaller than expected on this screen. This might be fine, but you may want to check if the image appears blurry.
{/if}
{#if $imageURL} {imageName} {/if}
Image File Dimensions
{#if $fileSize.width > 0 && $fileSize.height > 0}
{$fileSize.width} x {$fileSize.height}
{:else}
{#if $isLoading} Loading... {:else} Unknown {/if}
{/if}
Expected Dimensions
{$expectedSize.width} x {$expectedSize.height}
Size on screen
{$sizeOnPage.width} x {$sizeOnPage.height}
Image Size
{#if $fileSize.weight > 0} {Math.round( $fileSize.weight )} KB {:else if $isLoading} Loading... {:else} Unknown {/if}
Potential savings
{#if $potentialSavings > 0} {$potentialSavings} KB {:else if $isLoading} Loading... {:else} N/A {/if}
Learn how to improve site speed by optimizing images