sitechecker.pro logo mobile

How to Properly Size Images on a Site?

How to Properly Size Images on a Site?

Free Complete Site Audit

Access a full website audit with over 300 technical insights.

Something went wrong. Please, try again later.
Trusted by
Sitechecker trusted company

Free Website SEO Checker & Audit Tool

  • Scan the site for 300+ technical issues
  • Monitor your site health 24/7
  • Track website rankings in any geo

Images account for more than 60% of the bytes on average needed to load a web page. You need to pay special attention to this when working with your site.

What Does “Mismatches in Size of Images on a Site” Mean?

This means that the page contains images that are larger than the size they are displayed at. Why? On different smartphones and tablets, images can render at different sizes, depending on the viewport size. And the browser wastes time resizing the images down to fit. Moreover, users should download useless data, which increases the duration of loading.

You can read more about using images on your websites:

What Triggers This Issue?

You have a site that works well on the web, and there you have no problem with image sizes. But things can be completely different in the mobile version of your project since you did not foresee this question in the HTML document of the pages. Then the images cannot adapt to different screen sizes of portable devices. And you have a “Mismatches in size images on a site” issue.

How to Check the Issue?

You need to crawl the site using a special desktop or online tools. For example, the Lighthouse app can collect all the images on a page and then compare the size of the rendered image to the size of the actual picture. You get a warning that the image fails validation if the rendered size is at least 4KB smaller than the actual size. Next, you need to check the other pages on your site.

Also, you can check your site for other problems with images. In this screenshot from the Sitechecker SEO tool, we are focused on identifying and addressing issues related to “images” on your website. Specifically, this tool can help you pinpoint where your site may be using images that are either too large, improperly formatted, or not optimized for faster page loading. Each listed issue, such as “Image size over 100 KB”, “Defer offscreen images”, and “Serve images in next-gen formats”, represents a specific problem that could be slowing down your site and affecting user experience.

Image-related Issues

By clicking on “View issue”, you gain access to a detailed list of pages where these image-related problems occur, alongside actionable recommendations.

Boost Your Page Speed with Optimized Images!

Utilize our Site Audit Tool to detect oversized and unoptimized images that are dragging down your site speed.

Something went wrong. Please, try again later.

Why is This Important?

Users value speed and want to work with pages that load quickly. Therefore, you need to keep track of the correspondence between the rendered size and the actual size of the images on your site.

How to Fix the Issue?

Properly sizing images on a website is crucial for optimizing load times, improving user experience, and ensuring that your site looks good on all devices. Here are steps and tips to help you properly size pictures on your site:

1. Understand Image Requirements

Identify where the image will be used (e.g., banners, thumbnails, product pictures) and what dimensions it should have for different screen sizes. Maintain the aspect ratio to avoid distortion.

2. Use Responsive Images

HTML5 picture element: Use the <picture> element to provide different versions of an image for different device sizes.


<picture>
<source srcset="image-large.jpg" media="(min-width: 1200px)">
<source srcset="image-medium.jpg" media="(min-width: 768px)">
<img src="image-small.jpg" alt="Description">
</picture>

srcset attribute: Use srcset and sizes attributes on the <img> tag to specify multiple image sources.


<img src="image-small.jpg"
srcset="image-small.jpg 500w, image-medium.jpg 1000w, image-large.jpg 1500w"
sizes="(max-width: 600px) 480px, (max-width: 1200px) 800px, 1000px"
alt="Description">

3. Optimize Image Files

  • Compress images: Use tools like TinyPNG, ImageOptim, or online services to compress pictures without losing quality.
  • Choose the right format: Use JPEG for photographs, PNG for pictures with transparency, and SVG for icons and logos.

4. Use CSS for Scaling

Max-width and height: Use CSS to ensure pictures resize properly within their containers.


img {
max-width: 100%;
height: auto;
}

5. Lazy Load Images

Lazy loading: Load pictures only when they are about to enter the viewport to improve initial load time.


<img src="placeholder.jpg" data-src="image.jpg" alt="Description" class="lazyload">

document.addEventListener("DOMContentLoaded", function() {
let lazyImages = [].slice.call(document.querySelectorAll("img.lazyload"));
if ("IntersectionObserver" in window) {
let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
let lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.src;
lazyImage.classList.remove("lazyload");
lazyImageObserver.unobserve(lazyImage);
}
});
});
lazyImages.forEach(function(lazyImage) {
lazyImageObserver.observe(lazyImage);
});
} else {
// Fallback for older browsers
let lazyLoadThrottleTimeout;
function lazyLoad() {
if (lazyLoadThrottleTimeout) {
clearTimeout(lazyLoadThrottleTimeout);
}
lazyLoadThrottleTimeout = setTimeout(function() {
let scrollTop = window.pageYOffset;
lazyImages.forEach(function(img) {
if (img.offsetTop < (window.innerHeight + scrollTop)) {
img.src = img.dataset.src;
img.classList.remove('lazyload');
}
});
if (lazyImages.length == 0) {
document.removeEventListener("scroll", lazyLoad);
window.removeEventListener("resize", lazyLoad);
window.removeEventListener("orientationchange", lazyLoad);
}
}, 20);
}
document.addEventListener("scroll", lazyLoad);
window.addEventListener("resize", lazyLoad);
window.addEventListener("orientationchange", lazyLoad);
}
});

6. Test on Various Devices

Ensure your pictures load and display correctly on different browsers and devices.

Use tools like BrowserStack or Responsinator to see how your images look on various screen sizes.

7. Use a Content Delivery Network (CDN)

Serve your pictures from a CDN to reduce load times by delivering images from servers closest to your users.

By following these steps, you can ensure that your pictures are properly sized, optimized, and delivered efficiently, enhancing the overall performance and appearance of your website.

You can also watch a video by Pete LePage from Google Developers about using secret for responsive images.

FAQ
You can maintain an image's aspect ratio by setting the max-width to 100% and the height to auto in CSS.
Lazy loading is a technique where pictures are loaded only when they are about to enter the viewport. This improves the initial load time of the webpage and reduces bandwidth usage.
Use the <picture> element or the srcset and sizes attributes on the <img> tag to provide different versions of an image for different device sizes.
Fast Links

You may also like

View More Posts
Multiple Canonical Tags Found Issue
Site Audit Issues
Multiple Canonical Tags Found Issue
Roman Rohoza
Aug 5, 2024
The Viewport <meta> Tag is Missing an Initial-Scale
Site Audit Issues
The Viewport <meta> Tag is Missing an Initial-Scale
Ivan Palii
Jul 29, 2024
How to fix the issue when page has outgoing hreflang annotations using relative URLs
Site Audit Issues
How to fix the issue when page has outgoing hreflang annotations using relative URLs
Ivan Palii
Oct 28, 2022

So, soon? Well, before you go…

Get instant on-page SEO analysis of your home page

  • Detect broken links
  • Detect issues with content optimization
  • Check PageSpeed for mobile and desktop
Something went wrong. Please, try again later.
You’ll get the report in 2 seconds without required signup
exit-popup-image
close