0

Most web sites have images on then but the actual image size is not embedded within the HTML document itself.

I noticed that because I always enter the text I am looking for in the search box and jump directly to the section of the page I want to read, the problem is that always the current position changes by several scroll steps while each image loads independently of the html document.

Heck!... it’s like trying to read the newspaper directly from the printing machine.

I know that the HTML tag has the height and width fields, that are used for the browser to construct the page layout, but most web designers don’t use them.

Why?

closed as off-topic by Izhaki, Graham Herrli, Charles Wesley, Benny Skogberg, Matt Obee Aug 27 '14 at 8:07

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions about Implementation are off-topic because this site is for User Experience design questions, not questions around how to implement these designs. Therefore, questions around the use of programs like Photoshop or languages such as CSS or JavaScript are off topic." – Izhaki, Charles Wesley, Benny Skogberg, Matt Obee
If this question can be reworded to fit the rules in the help center, please edit the question.

  • I don't think this is a UX question - more of an implementation question. Anyhow, I don't really understand the problem... could you provide a reference to a page where this happens? This seems to be a dynamically loading images issue rather than a size issue. But I can't be sure as I'm not really sure how to replicate this issue or where. – Izhaki Aug 26 '14 at 23:52
  • @Izhaki for instance here, you can scroll down a bit, to see how the current position changes suddenly several times, and the scroll bar shrinks several times while all the images are loaded. – rraallvv Aug 27 '14 at 0:16
  • 1
    @rraallvv That has nothing to do with the images. It's a pattern called "infinite scrolling." It's dynamically loading more of the page as you scroll down so that it doesn't slow down loading a large amount when you first land there. – Graham Herrli Aug 27 '14 at 0:17
  • Aye - it's dynamic loading rather than image sizes. – Izhaki Aug 27 '14 at 0:33
  • @3nafish hmm... I didn't realize that, how about this one, the problem is the same, but it seems it's not dynamically loaded, and inspecting the images' properties with the "inspect element" option on safari show that the height and width are missing (like in my previous example). – rraallvv Aug 27 '14 at 0:33
5

The problem with setting the image height & width directly on the image tag is that it makes building a responsive site tricky. Specifying that an image width as 900px on the tag and then trying to get that image to look good on a mobile phone – really you should be loading a new image but thats not my point here – The image will be too large for the device. You gain far more control by setting these sizes in the CSS where you will probably prefer to set the width of most images to 100% which will allow them to scale proportionately at different resolutions.

Of course there are still times where you want an image to have an absolute size and again setting that in the css is still preferable as you can adapt that to suit different resolutions if needed.

So I guess for me the benefit of being able to supply images to the user that make sense to the device they are viewing it on out weights the loading issue you have mentioned above. And you can do a lot to counter that load experience but making sure your images are compressed correctly and that you are only supplying big images to devices that can handle it. Also when you set absolute dimensions in the CSS it behaves the same and should avoid the load effect you are talking about and give flexibility to adapt for different devices. But as I said if you're doing responsive (which you should be) then 'width:100%;' is going to be used a lot.

0

The straight forward answer to the title question is that a properly written web page makes a separation between its content (the HTML markup) and its look/formatting (CSS).

CSS can account for various display properties (screen size, print media, etc.). Without it, web-developers would need to use javascript, which is a massive overkill and overhead compared to CSS.

Not the answer you're looking for? Browse other questions tagged or ask your own question.