Safari iOS does not properly support responsive images when using srcset and sizes

I am facing an issue with the following code snippet:

        <img
            src="/img/footer/logo_white.png?v=2.0"
            srcset="/img/footer/logo_white.png?v=2.0 1x,
                    /img/footer/logo_white2x.png?v=2.0 2x"
        >

This code works perfectly on regular and high DPI screens.

However, when the viewport's width is very small (below 400px), the logo appears distorted. To address this, I created a smaller version of the image based on the actual dimensions. I then attempted the following approach:

            <img
                class="biw-logo"
                sizes="(max-width: 390px) 110px, 175px"
                src="/img/footer/biw_logo.png?v=2.0"
                srcset="/img/footer/biw_logo_small.png?v=2.0 110w,
                        /img/footer/biw_logo.png?v=2.0 175w,
                        /img/footer/biw_logo2x.png?v=2.0 350w"
            >

This solution displays the _small image for viewports narrower than 390 pixels, but it sacrifices the "high resolution" aspect. With this code, I am unable to force the iOS browser on iPhone 5s to display a 220px long image at 110px length using the provided syntax.

Could you please assist me in correcting my syntax?

<img class="biw-logo" sizes="(max-width: 390px) 110px, 175px" src="http://placehold.it/175x75" srcset="http://placehold.it/110x50 110w,
http://placehold.it/175x75 175w, http://placehold.it/350x150 350w">

htmlcssresponsive-imagessrcset

Answer №1

To implement responsive images, you can utilize the srcset and sizes attributes. Firstly, inform the browser about the available image options and their respective widths using the srcset attribute:

<img srcset="
    /img/footer/logo_white.png?v=2.0 300w,
    /img/footer/logo_white2x.png?v=2.0 600w,
    /img/footer/logo_white_small.png?v=2.0 150w
">

The browser will now recognize three images with widths of 150, 300, and 600 pixels (the actual dimensions may vary).

Next, specify how the image should be displayed on the webpage using the sizes attribute:

<img
    sizes="(max-width: 400px) 150px, 300px"
    srcset="..."
>

This informs the browser to display the image at 150px when the viewport is 400px or smaller, and at 300px for larger viewports.

With this information, the browser can intelligently select the appropriate image based on the device and screen resolution. For a standard desktop, the 300w image will be chosen, while a HiDPI desktop will opt for the 600w one. Similarly, smaller screens will display the 150w image or the 300w one for HiDPI displays.

For further details on srcset and sizes, refer to .

Answer №2

If you want to enhance your code, consider incorporating additional source elements for better performance:

<picture>
    <source srcset="img.png"    media="(resolution: 150dpi)" type="image/png" />
    <source srcset="img2x.png"  media="(resolution: 300dpi)" type="image/png" />
    <img src="img.png" alt="alt text" />
</picture>

You can experiment with variations like this - although I haven't tested it myself and would need to delve deeper into the resolution media query to confirm.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the relationship between three.js transforms and CSS3 3D-transforms?

I am developing a unique open-source tool for exploring and visualizing the complexities of human anatomy. At the center of this tool is a dynamic 'chessboard' that occupies the majority of the screen. As you drag the board, various CSS3 3D-tran ...

javascriptcss3dthree.jstransform

moving a simulated element to a new location

Looking for some help with my html/CSS code that creates a unique element at the bottom of a div with an image background. The shape I've created is positioned at the bottom of the div... Below is the HTML: <div style="background-image:url(&apos ...

javascriptjqueryhtmlcss

Chat lines in Chrome displaying double entries - troubleshooting needed

I developed a chat plugin for my website with a simple HTML structure: <div id="div_chat"> <ul id="ul_chat"> </ul> </div> <div id="div_inputchatline"> <input type="text" id="input_chatline" name="input_chatline" val ...

javascriptjqueryhtmlgoogle-chrome

Expanding Vue Tabs with Bootstrap: Manipulating tab-content to perfectly fill parent height

On my webpage, I have implemented a tabs component called b-tabs. This component is enclosed within a parent div with a specific height. I am trying to make the content of the tabs take up the full remaining height of the parent component. https://i.ssta ...

cssvue.jsbootstrap-4bootstrap-vue

Stylized search input inspired by Pinterest with a bubbly design

When it comes to my search bar, I want the user's entered keywords to be displayed within a bubble that has a delete option when they press space to add another keyword. This functionality is similar to what Pinterest does with their search bar, as de ...

javascripthtmlcss

Using JavaScript, aim for a specific element by its anchor headline

I'm looking to make some changes to my navigation menu, specifically hiding the home menu item unless the mobile navigation menu is toggled. Is there a way for me to target the "home" anchor title and apply the active class to it when toggled, similar ...

javascriptjquerycss

Phonegap application functioning smoothly on computer, encountering issues on mobile device

Hey there! I recently developed a phonegap app that retrieves JSON data from a YQL link and presents it to the user. It works perfectly on Google Chrome desktop, but my client mentioned that it doesn't work on his Android 2.3 device. Could you help me ...

javascriptandroidhtmlcordova

How is it possible for a JavaScript variable sharing the same name as a div Id to automatically pass the div?

This is just ridiculous. Provided HTML <p id = "sampleText"></p> Javascript var sampleText = "Hello World!"; Execution console.log(sampleText); // prints <p id = "sampleText"></p> How is this even possible? I ...

javascripthtmlcss

utilizing AJAX to send a POST request and display the response in HTML using Django

I am looking to input a number into a text box and retrieve all the even numbers using ajax with Django. Here is my view: load_template @csrf_exempt def load_template(request): if request.method == 'POST': num1 = request.POST[&a ...

javascriptjqueryhtmlajaxdjango

Creating a visually appealing layout by dividing HTML content into two columns within a WebView

Utilizing WebView in my application to display html content for reading ebooks presented a challenge during development. After parsing the ebook and converting it into an html string, I load this string into the WebView component. myView.setVerticalScro ...

androidhtmlcsswebview

Unable to display image between two inline-table divs while using Bootstrap

I'm currently developing a website for trading in-game items, but that's not important right now. The code snippet I am working with is: <div class="trade"> <h6><strong>RaiZeN</strong> wants to trade: (5 minutes ...

htmlcssstatistics-bootstrap

The Bootstrap DateTimePicker is displaying on the screen in an inaccurate

I'm having an issue with the datetimepicker on my project. The calendar appears incorrectly in Chrome, but looks fine in Edge. Here's a screenshot from Chrome: https://i.stack.imgur.com/Hi0j4.png And here is how it looks in Edge: https://i.stac ...

c#htmlcsstwitter-bootstrapasp.net-core-mvc

The unhandled type error rises with each scroll I make

Having been diligently working on my current website project, I encountered a puzzling issue. Upon writing code to implement smooth scrolling throughout the site, I found myself facing a persistent error that continues to escalate with each scroll up or do ...

javascripthtmljqueryscrolltypeerror

use jquery to highlight a table row based on the current hour

Within my HTML structure, there is a table element with the class <table class="model">, and it contains several table data cells with the class class="model-date". The date format within these cells is as follows: DD-MM HH:MM For example, <td ...

jqueryhtmlcss

unique close button design for pop-up video player on YouTube

Struggling to add a custom close button to my Youtube video pop up. After unsuccessful research attempts, I'm turning to my fellow stack buddies for help. Any suggestions? ...

htmlcssyoutubepopup

When the down key is pressed in a textarea, choose the list item

I have HTML similar to the following <div class="row"> <textarea id="txtArea" ng-model="input" ng-change="handleOnChange(input);getSearchField(input);" ng-click="search(input)" ng-focus="search(input);" ...

javascriptjqueryhtmlangularjs

Tips on relocating the input position to the top

Currently, I have a text input that is centered horizontally when typing text. However, I want it to be positioned at the top instead. See the following code: height: 143px; width: 782px; font-family: 'Roboto Mono'; background: #FFFFFF; border ...

htmlcss

Text is not visible when hovering over it

I am facing an issue with the hover effect on my menu element. When I hover over the element, the text does not appear as expected. Even after using z-index to position the text on top, it still doesn't work. Here is a snippet of my code: HTML: < ...

css

Looking to create circular text using HTML, CSS, or JavaScript?

https://i.sstatic.net/pnu0R.png Is there a way to generate curved text in HTML5, CSS3, or JavaScript similar to the image linked above? I've experimented with transform: rotate(45deg); but that just rotates the text without curving it. Additionally, ...

javascriptcsstext

The issue of the responsive navigation bar overlapping the header and navigation links not functioning properly

Hello everyone, I need some help with my website! I can't seem to find the answer on my own. I'm currently working on making my website responsive, but I've run into an issue with the mobile navigation on phones. The navigation links are ov ...

htmlcssresponsive-designjquery-mobile-navbar