Manage several images and set specific width and height to prevent any visual stuttering (Image elements lack defined width and height)

When it comes to using different pictures of varying sizes based on screen breakpoints, what is the most effective approach?

For example

<picture class="image-wrapper">
    <source srcset="images/image-product-desktop.jpg" media="(min-width: 800px)"/>
    <img class="image" src="images/image-product-mobile.jpg" alt="chanel perfume bottle lying down with leaves draped around">
</picture>

The challenge here lies in providing specific height and width for the mobile image, and not knowing how to handle fixed width for desktop users. It's worth noting that both images will have distinct art directions and won't share the same intrinsic dimensions.

I came across a helpful Stack Overflow post related to this topic, but it didn't address this exact scenario. You can check it out for reference here.

htmlcsslighthouse

Answer №1

In my approach, I decided to move away from using srcsets and instead opted for a div with a background image in CSS.

To tackle any performance issues, I first determined the dimensions of the images:

For the mobile image: Height = 240, Width = 343

For the desktop image: Height = 450, Width = 300

I then defined these dimensions as variables in the root using calc():

:root {
/* height / width * 100% (not width / height) */
  --mobile-aspect: calc(240 / 343 * 100%);
  --desktop-aspect: calc(450 / 300 * 100%)
}

After adding padding-top to the parent divs containing the images, I implemented a media query:

.image-wrapper {
  padding-top: var(--mobile-aspect);
  position: relative;
  background-image: url("../images/image-product-mobile.jpg");
  background-repeat: no-repeat;
  background-size: contain;
}

@media screen and (min-width: 800px) {
  .image-wrapper {
    padding-top: var(--desktop-aspect);
    background-image: url("../images/image-product-desktop.jpg");
  }
}

By following this method, I was able to eliminate jankiness and received positive feedback from Light house. I hope this solution proves helpful to others.

Additional resources:
Informative Video Description
Detailed CSS Tricks Article

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 are the reasons behind the issues encountered when enabling "Optimization" feature in Angular that affect the proper rendering of PrimeNg elements?

Angular Version : 9.x Primeng Version : 9.x We've encountered an issue with PrimeNg elements not rendering correctly in our dev/prod environments, although they work fine in the local environment. After some investigation, we found that the culprit ...

javascriptcssangulartypescriptprimeng

The CSS3 @font-face feature is not functioning properly for custom fonts

I'm curious about something - when using custom fonts linked with @font-face, do they require local installation to function properly? Here is the code I have: @font-face {font-family:"3dumb";src:url(‘http://static.tumblr.com/wi49tax/8Vmlzz5ja/3du ...

cssfontsfont-facetumblr

Obtaining information from HTML through regular expressions

Below is the HTML code snippet I am dealing with <table class="profile-stats"> <tr> <td class="stat"> <div class="statnum">8</div> <div class="statlabel"> Tweets </div> </td> <td ...

phphtmlregexhtml-parsing

JQuery UI Dialog not functioning properly as intended, failing to display

Issue: The dialog box is appearing without the buttons being pressed and it does not function as an overlay when activated. Any help would be greatly appreciated. Code: Includes: <script src="js/jquery-1.5.1.min.js"></script> <script src ...

javascriptjqueryhtmljquery-uijquery-ui-dialog

Ensure that the nested div maintains its height consistently across all three columns

In my layout, I am trying to achieve uniform height for three columns, each containing the same sections like title and address. Not only do I want the cards to have the same height, but also the nested sections should maintain equal heights. For instance, ...

javascripthtmlcssflexboxcss-grid

Bizarre Incident Management

My latest project involves a simplistic website featuring arrow images (png) positioned on the left and right sides with fixed placement, allowing users to navigate to the next page. However, an issue arises where the cursor seems unable to select the an ...

htmlcssweb

Challenging substitution process within text fields on MS SQL

I have a large MS SQL TEXT field. My task is to clean it up, which includes identifying and removing chunks of HTML content intentionally stored within the text. This process involves modifying links, words, and formatting in these blocks of text across t ...

htmlsql

How can I speed up the loading time of my background image?

I have noticed that my background image is loading slowly on my website. I expected it to be cached so that subsequent pages using the same background would load instantly. However, the background image is only loading once the entire page is drawn. My CS ...

htmlcssbackground-image

Switch ng-model in Angular to something different

I am looking to transform my own tag into a template <div><input .../><strong>text</strong></div> My goal is to have the same values in both inputs. Check out the plunker here If I change the scope from scope: {value:' ...

javascripthtmlangularjs

Unequal spacing between the edges of two background images

I am attempting to create two distinct "layers" of background on my webpage by encapsulating the content within a div element. Strangely, the background set for the div is being clipped before it reaches the edge of the screen, while the one designated as ...

htmlcss

Ways to ensure a div is positioned beneath another div

I am facing an issue with two divs; one on the right and the other on the left. When I try to add a third div below the right div, it ends up appearing under the left div or at the left side of the left div. Here is my current setup: https://i.sstatic.n ...

htmlcss

What is the most effective way to obtain a customer's latitude and location by prompting them to drop a pin on Google Maps?

My Android app has an API, but on my website I'm wondering how I can retrieve a person's location by having them place a marker on a Google Map. Is there a standard method for this? I need to obtain the latitude and longitude coordinates and send ...

javascriptjqueryhtmlgoogle-mapsgoogle-maps-api-3

Struggling to repair the unresponsive on-click event even after thorough debugging efforts

i am working on a project where i have to create a datatable, but I am facing an issue with the edit event not firing on click. Even after debugging, it is not pointing towards any error. function GetLoginData() { $.ajax({ url: '/LoginMas ...

javascriptjqueryhtmlajaxdatatables

Display temporary image if image is not located

I attempted to utilize the onerror attribute to display a placeholder image when the desired image is not found in the folder. The image path is dynamically generated from the backend. The code snippet below shows how I implemented this: <img class=&quo ...

javascripthtmlangular

Employ the JQuery Datepicker functionality to enhance the user experience

Is it possible to integrate jQuery Datepicker into a web page that includes an iframe? And where is the optimal placement for linking the CSS and script references? ...

jqueryhtmljquery-ui

Creating two captivating HTML slideshows

I have successfully created a slideshow in HTML, but I am now attempting to create two and it doesn't seem to be working. Here is my code: <script type="text/javascript"> var image1 = new Image() image1.src = "img/home/residential.gif" var imag ...

javascripthtml

Material selection through span in three.js is not functional

Initially, the span element was functioning properly for me. However, after setting up materialsLib and initMaterialSelectionMenus based on the documentation and examples, the span stopped working and now the model is not visible. Any assistance would be g ...

javascripthtmlthree.js

Using Javascript, ensure that the drop-down menu remains on the currently selected item

Can someone assist me with my issue regarding the drop-down menu not staying on the selected value after submitting? I believe the problem lies within the javascript code. I appreciate any help as I am trying to learn this on my own. function GetSelect ...

javascripthtml

Attempting to adjust the width upon hovering with CSS

I have attempted this previously and cannot figure out why it is not functioning properly. I am attempting to do the following: http://jsfiddle.net/geometron/u3M6r/1/ <ul> <li><a href="content1.html"> Demo 1 </a></li> ...

cssanimation

Ways to add space around the td element and properly align the content within it

I've recently delved into the realm of web development, and I'm encountering some challenges with HTML alignment. Despite exploring various resources and attempting to utilize align="left"/right/center attributes, I'm still struggling to ach ...

htmlcss