Not understanding why images are scaling as they are

So, I turn to you once again to help me make my site responsive.

I didn’t concern myself with making my site responsive when I first built it years ago. Consequently, I’d assign my thumbnails their height with something like

height = "150"

As I became aware of the importance of responsiveness I began to use relative values, and found that 11em produced almost exactly the same size thumbnails on my laptop as 150px (my thumbnails are 150px high, except when width is greater than height). I have been assigning thumbnail height as follows

style = "height:11em; width:auto;"

Today I added some thumbnails to one of my pages with the style attribute. These rendered fine on my laptop, but when I checked with my mobile device found that they scaled down quite poorly. What’s more, the thumbnails that still had the height attribute scaled down much better.

What’s going on?

Are you setting the following meta link?

<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

Can you supply a URL which demonstrates the relevant iamges?

When you are dealing with something which is of fixed dimensions, such as an image, it is OK to specify the dimensions in px. You should still use width="150" height="200" (or whatever the dimension are) in the HTML, even if you then use CSS to resize the images. This tells the browser how much space to reserve for the images when they load, if they are full size, or what the starting dimensions are to scale from, if resized in CSS.

If you need to display images smaller than their actual size at smaller screen sizes, you can use media queries to set the new dimensions.

2 Likes

If we are simply talking about the ‘quality’ of the image when scaled on mobile then what is the pixel density of your mobile device?

For retina ready images you need higher quality images to start with or they will look poor on mobile devices with pixel densities greater than 1.

There will always be some degradation when you scale an image in the browser and some pixel sizes may look worse than others.

If you can create svg images instead then you won’t suffer from this problem as svg can scale without loss of quality.

My viewport is set a bit different:

<meta name="viewport" content="width=device-width, initial-scale=1">

After my initial post I reverted to the height attribute but have now reassigned the style attribute to the ‘before’ pictures and left the ‘after’ thumbnails below them with the height attribute.

The ‘before’ thumbnails are in a <div> beginning on line 1124 and the ‘after’ in line 1171.

I did not know that TB. I should have just stayed old-school.

No, the problems is with size, but that’s really good to know. Thank you.

I checked and validated the source and I would have made the following changes:

  1. Use <!DOCTYPE HTML>
  2. Remove all CSS @media tags
  3. Remove all inline image styles
  4. Use the CSS class “leadingPlate” for the thumbnails
  5. Add max-width and max-height to “leadingPlate” thumbnail tag.
  6. Use Validator.w3.org to remove as many errors and warnings as possible.
  7. Move all JavaScript to just above </body>;
  8. Test on available desktop, laptop and mobile devices and modify until satisified.

That’s a lot of homework JB! Let me do a little at a time and see if I can grasp what’s going on.

Are you suggesting I go with HTML5, possibly because HTML4 doesn’t support some of what I’m trying to do?

Why not use the “trailingPlate” here and there?

According to your doctype, you are not using HTML 4, you are using XHTML 1 (Strict). Most flagrantly, the closing slash on empty elements (<img.../>, <meta ... />, and others) is invalid in any version of HTML. However, it is tolerated in HTML5. I do not see anywhere in your code where XHTML constructs are needed. It just looks like outdated sophisticated eyewash to me.

Supplementing John’s list:
You’ll need to remove or revise some of the meta tag statements.
The viewport meta tag is good as is.
Search engines don’t care about “keywords” nowadays.

Definitely not. There is some learning ahead, but it’s overdue.

1 Like

Just trying to help with solving your problem :slight_smile:

HTML5 is the latest version, more forgiving, etc.
See @ronpat’s post.

The basic idea was to remove the inline image styles. Were the inline styles also used with the tailingPlate class?


Also run the css files through the following validator because there are errors which will create layout problems.

https://jigsaw.w3.org/css-validator/

1 Like

OK Good People,

I really appreciate the help. I’m going to look into each suggestion and see what I can do. Maintaining this site is important because it brings in the clients, but doesn’t directly pay the bills so I get to it as time permits. It may take a few days, but I’ll report back and probably have additional questions.

Try creating a copy of the files used including the CSS files because you can then test the web-page without affecting the online version.

Make sure you have a good editor that has search and replace.

The changes should take no more than an hour :slight_smile:

I’ve been looking into doctypes and wonder why you suggest HTML5. Is it the most compatible with the HTML I now have so less work will be needed? Is it just the best practice? From what I’ve managed to gleen from my research, I’m tempted to stick with XHTML strict and just labor through the process of separating my presentation from the content.

I don’t like this idea JB. It will affect everything, not just the thumbnails.

I downloaded and verified the page and found html5 more lenient. I then remmed the @media queries, removed some more errors and warnings until the page completely validated. I then resized the page by shrinking the width and discovered the page was responsive apart from the left-hand menu. I also added a margin-right to the thumbnails which I preferred because the page looked more aesthetic, just a personal preference. I then posted my suggestions.

Please feel free to use the strict type and the @media type. I just think they are an unnecessary complication.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.