Image Optimization Best Practices for Device Breakpoints - Part 2

4 Tips for Getting Image Breakpoints Right
Ari Weil

An effective breakpoint strategy helps deliver sharp, properly sized images, which are some of the most compelling pieces of content on a web page. In this blog, we will explore some important factors to consider in image breakpoint decisions to deliver the optimally-sized web image every time.

Start with Image Optimization Best Practices for Device Breakpoints - Part 1

The following are 4 tips for getting image breakpoints right:

1. Know the Screen Resolution Market Share

The first factor to consider is screen resolution market share. Statcounter is a great resource to obtain this information. For example, here are the screen resolution market shares for mobile, desktop and tablet devices on a global level:






Evaluating all three types of devices is necessary to create a comprehensive breakpoint strategy, as they each have a unique screen resolution market share. None of us want to spend development or design cycles on the least important screen resolutions. Knowing market share can help you focus efforts on the most popular and critical ones.

2. Know Your User Base's Screen Resolution Breakdown

While an overview of the global screen resolution market share is key, it is important that developers not rely only on general data. It is also important for developers and designers to be able to see the breakdown in screen resolutions across their own user base.

An individual organization's resolution size distribution may be quite different than the market breakdown due to factors such as specific technical requirements, targeted user groups or other demographics, and RUM data is critical to gathering this information.

Focusing on real user monitoring (RUM) and data can help developers automatically capture screen resolutions and filter on other dimensions such as browser, device, location, and connection type. This allows developers to hone in on their own specific use cases, and prioritize devices and breakpoints accordingly.

3. Understand the Target Device

It is critical that developers have a keen understanding of the devices a company's web site is targeting when delivering an image. In some cases, they may be targeting very specific devices; other times, they may want to support a broad device range.

For example, a company may be creating a campaign to drive users to their mobile application. In this case, strictly focusing on mobile devices at the exclusion of desktop and tablet devices would be the best course of action.

Once the developers identify the target devices, there are many resources to determine relevant parameters, including resolution and width. For global businesses, a key factor at play is the target users' geolocation, as device breakdown varies greatly across countries and regions.

For instance, if we plan to target users in the United States, we will want to ensure that, at a minimum, we optimize for a 750 X 1334 px screen resolution (largest market share in the US). If we're targeting users in Singapore, we need to change our focus to devices with a 1080 X 1920 px screen resolution (largest market share in Singapore).

4. Pixel density

Devices with 2+ pixel density values are now commonplace. As such, web developers should also incorporate pixel density in the breakpoint analysis, as this is critical in determining which derivative to serve on higher pixel density devices. Consider the Samsung Galaxy S family, in which all models starting with the Galaxy S6 have at least a 4X pixel density.

As an example, you can see that taking a 414 px wide image and optimizing it for the Galaxy S6's 4X pixel density results in not a 4X increase, but a 16X overall pixel increase (4X for both height and width dimensions):


With pixel densities reaching 4X on a regular basis (and only increasing), you can see that getting this wrong only further exacerbates the issue of delivering wasted bytes. If pixel density is ignored, image sharpness and fidelity when viewed on an advanced display is diminished, resulting in a poor user experience.

By having a better understanding of screen resolution market share, the specific user bases' screen resolution breakdown, pixel densities, and other device characteristics, organizations are in a better position to deliver the right images at the right breakpoints, every time.

Related Links

Hot Topics

The Latest

When the Database Is the Problem, Is APM Enough?

Production incidents rarely announce themselves as database problems. They appear as slow transactions, timeouts, rising response times, or an application struggling under a workload it previously handled. APM provides an essential starting point. It can identify a slow transaction path, highlight an affected service, and show that a database dependency is consuming more time than expected. But identifying the database as part of the problem is not the same as explaining what is happening inside it ...

From Cleanup to Prevention: The Future of Cloud-Native Cost Optimization

Cloud teams are under constant pressure to reduce spend without slowing development or increasing operational risk. They are deploying autoscalers, rightsizing workloads, enforcing resource requests, reviewing utilization dashboards, and building FinOps processes around cloud-native environments. Yet the results often disappoint ...

The Real Enterprise AI Risk Isn't Hallucinations

Ask most IT leaders about their biggest concern with AI and you'll hear the same answer: hallucinations ... Today, however, the conversation has shifted ... As organizations move beyond chatbots and experiments, they are increasingly deploying AI agents that perform multi-step tasks. These systems retrieve documents, query databases, call APIs, generate reports, write code, and make recommendations. The issue is not whether the model can reason. The issue is whether the organization can see, verify, and govern the decisions being made along the way ...

Beyond Buy vs. Build: The New Playbook for Data Pipelines

While organizations want to take control of their telemetry, building telemetry pipelines from scratch can be a very daunting, complicated task, even when leveraging open-source standards like OpenTelemetry. It requires specialized knowledge across distributed systems, data engineering, and security. This fragmented approach across systems causes higher operational costs; it puts a strain on resources and reduces efficiency as teams have to work with different interfaces and processes ...

The Corporate Network Is Fading - Here's What Replaces It

For decades, enterprise networks were designed around a simple assumption: work happened inside the office. Applications lived in centralized data centers, employees connected through internal infrastructure, and security focused on protecting the perimeter that surrounded everything ... But the way organizations operate today bears little resemblance to that environment. Cloud platforms host critical applications, employees connect from homes and airports as often as they do from offices, and partners collaborate through shared systems that exist far beyond corporate walls. In short, the corporate network no longer resembles the environment it was designed to protect ...

Image Optimization Best Practices for Device Breakpoints - Part 2

4 Tips for Getting Image Breakpoints Right
Ari Weil

An effective breakpoint strategy helps deliver sharp, properly sized images, which are some of the most compelling pieces of content on a web page. In this blog, we will explore some important factors to consider in image breakpoint decisions to deliver the optimally-sized web image every time.

Start with Image Optimization Best Practices for Device Breakpoints - Part 1

The following are 4 tips for getting image breakpoints right:

1. Know the Screen Resolution Market Share

The first factor to consider is screen resolution market share. Statcounter is a great resource to obtain this information. For example, here are the screen resolution market shares for mobile, desktop and tablet devices on a global level:






Evaluating all three types of devices is necessary to create a comprehensive breakpoint strategy, as they each have a unique screen resolution market share. None of us want to spend development or design cycles on the least important screen resolutions. Knowing market share can help you focus efforts on the most popular and critical ones.

2. Know Your User Base's Screen Resolution Breakdown

While an overview of the global screen resolution market share is key, it is important that developers not rely only on general data. It is also important for developers and designers to be able to see the breakdown in screen resolutions across their own user base.

An individual organization's resolution size distribution may be quite different than the market breakdown due to factors such as specific technical requirements, targeted user groups or other demographics, and RUM data is critical to gathering this information.

Focusing on real user monitoring (RUM) and data can help developers automatically capture screen resolutions and filter on other dimensions such as browser, device, location, and connection type. This allows developers to hone in on their own specific use cases, and prioritize devices and breakpoints accordingly.

3. Understand the Target Device

It is critical that developers have a keen understanding of the devices a company's web site is targeting when delivering an image. In some cases, they may be targeting very specific devices; other times, they may want to support a broad device range.

For example, a company may be creating a campaign to drive users to their mobile application. In this case, strictly focusing on mobile devices at the exclusion of desktop and tablet devices would be the best course of action.

Once the developers identify the target devices, there are many resources to determine relevant parameters, including resolution and width. For global businesses, a key factor at play is the target users' geolocation, as device breakdown varies greatly across countries and regions.

For instance, if we plan to target users in the United States, we will want to ensure that, at a minimum, we optimize for a 750 X 1334 px screen resolution (largest market share in the US). If we're targeting users in Singapore, we need to change our focus to devices with a 1080 X 1920 px screen resolution (largest market share in Singapore).

4. Pixel density

Devices with 2+ pixel density values are now commonplace. As such, web developers should also incorporate pixel density in the breakpoint analysis, as this is critical in determining which derivative to serve on higher pixel density devices. Consider the Samsung Galaxy S family, in which all models starting with the Galaxy S6 have at least a 4X pixel density.

As an example, you can see that taking a 414 px wide image and optimizing it for the Galaxy S6's 4X pixel density results in not a 4X increase, but a 16X overall pixel increase (4X for both height and width dimensions):


With pixel densities reaching 4X on a regular basis (and only increasing), you can see that getting this wrong only further exacerbates the issue of delivering wasted bytes. If pixel density is ignored, image sharpness and fidelity when viewed on an advanced display is diminished, resulting in a poor user experience.

By having a better understanding of screen resolution market share, the specific user bases' screen resolution breakdown, pixel densities, and other device characteristics, organizations are in a better position to deliver the right images at the right breakpoints, every time.

Related Links

Hot Topics

The Latest

When the Database Is the Problem, Is APM Enough?

Production incidents rarely announce themselves as database problems. They appear as slow transactions, timeouts, rising response times, or an application struggling under a workload it previously handled. APM provides an essential starting point. It can identify a slow transaction path, highlight an affected service, and show that a database dependency is consuming more time than expected. But identifying the database as part of the problem is not the same as explaining what is happening inside it ...

From Cleanup to Prevention: The Future of Cloud-Native Cost Optimization

Cloud teams are under constant pressure to reduce spend without slowing development or increasing operational risk. They are deploying autoscalers, rightsizing workloads, enforcing resource requests, reviewing utilization dashboards, and building FinOps processes around cloud-native environments. Yet the results often disappoint ...

The Real Enterprise AI Risk Isn't Hallucinations

Ask most IT leaders about their biggest concern with AI and you'll hear the same answer: hallucinations ... Today, however, the conversation has shifted ... As organizations move beyond chatbots and experiments, they are increasingly deploying AI agents that perform multi-step tasks. These systems retrieve documents, query databases, call APIs, generate reports, write code, and make recommendations. The issue is not whether the model can reason. The issue is whether the organization can see, verify, and govern the decisions being made along the way ...

Beyond Buy vs. Build: The New Playbook for Data Pipelines

While organizations want to take control of their telemetry, building telemetry pipelines from scratch can be a very daunting, complicated task, even when leveraging open-source standards like OpenTelemetry. It requires specialized knowledge across distributed systems, data engineering, and security. This fragmented approach across systems causes higher operational costs; it puts a strain on resources and reduces efficiency as teams have to work with different interfaces and processes ...

The Corporate Network Is Fading - Here's What Replaces It

For decades, enterprise networks were designed around a simple assumption: work happened inside the office. Applications lived in centralized data centers, employees connected through internal infrastructure, and security focused on protecting the perimeter that surrounded everything ... But the way organizations operate today bears little resemblance to that environment. Cloud platforms host critical applications, employees connect from homes and airports as often as they do from offices, and partners collaborate through shared systems that exist far beyond corporate walls. In short, the corporate network no longer resembles the environment it was designed to protect ...