I have a 'standard' web masthead logo snippet that I use with an SVG logo by preference, the code goes like this;
<div class="site-branding">
<a id="logo" href="/">
<img src="/pathto/logo.svg">
</a>
</div>
The size of the various components are controlled by CSS.
The issue I have is that, while the page renders, the SVG draws first so that it flashes full width before the CSS for the containers constrain it. It seems as if SVG, as XML without size information, gets rendered before an image and by default is the full width of the viewport. If I use a PNG it has inherent size information so is not affected in the same way.
It's not usually a problem, and certainly not after a page is cached but on a slow connection can be obvious and ugly. Even on a faster connection there is often a flash of a larger image.
What do I need to do to prevent this behaviour? It should be said that hard-coding the size of the img tag is my least favourite option.
Related
So I just created a blog on Blogspot. And I'm currently using a simple free blog template from the internet.
You can refer my blog here - https://hariinisayarasa.blogspot.com
Im using the free template from here - https://www.way2themes.com/2020/08/sylva-blogger-template.html
As you can see, you can compare the slider image on my blog is blurry and pixelated compared to the one on the Demo Page here - https://sylva-way2themes.blogspot.com/
Is there any way I can resize my image or any setting that can be done in my template coding so that the slider images are not blurry anymore?
Please let me know if I can provide any code for you so that you can help me solve this problem.
Or you can download the code here - https://www.way2themes.com/2020/08/sylva-blogger-template.html
One of the simplest ways to resize an image in the HTML is using the height and width attributes on the img tag. These values specify the height and width of the image element.
Resizing img with HTML
<img src="https://ik.imagekit.io/ikmedia/women-dress-2.jpg"
width="400"
height="500" />
Resizing img with CSS
img { width: 400px, height: 300px}
From what I've seen, you're using very small raster images.
notice the 'intrinsic size' property
same goes here
Photographs are always saved as raster images. It means that the data of an image is stored in the form of a pixel map - a matrix of squares. If you try to scale the image up, every pixel is also scaled up. Therefore, you lose quality, and the pictures seem pixelated/blurry.
There's no way to keep both the size and detail. Alternatively, you could try to keep the initial size of an image (or at least scale down) - this would, on the other hand, not fill the entire container space.
now check the intrinsic size of one of the images on the demo page
The more scaled image is, the more blurry it gets. The pictures on the demo page have the scale aspect of 2. However, your photo that is 72 x 72px has been scaled up a lot more.
If those photos have been taken by you in higher quality, you might want to use the raw version.
I have a web slider with an image in it. I've asked my designers for an image of the highest possible dimensions that I'd like to support (1920x1080 browser window).
This looks great at the highest resolution, but as the browser window gets smaller and smaller the image doesn't scale appropriately. I'm not sure what techniques I should be performing to make sure an image like the one in the example above is scaled down appropriately as the window size changes.
Should I ask for various resolutions of the same image from our designer? And swap out the image using media queries in css? Or is there some other way to properly do this in CSS using background image size, etc?
Edit:
So the image was created with text and graphics. The problem may be that there's no way to support this on various device sizes. How do other people/companies handle images with text/graphics as part of the image, and not over on top of it?
Try Applying max-height:100% & max-width:100% to the element you wish to remain scaled.
I.E
<div class ="wrapper">
<div class ="image">
</div>
</div>
CSS
.image{
max-height:100%
max-width:100%
}
<img alt="thumb" src="thumb.jpg">
When the above thumb is clicked the browser will display FullSize.jpg sized to fit the client window of the browser and when the cursor moves over it a '+' will appear to signify that clicking the image will display it full size. What I want to do is display the image full size in the first place, without requiring the user to click it to get full size. How does one do this?
Unfortunately, what you describe is a browser UI feature (or 'bug,' depending on your point of view), and can only be enabled/disabled by the user. Usually via the 'edit preferences' options.
It's only done if the image at its full size is larger than the view-port, so that the user can see the full image without having to scroll around, it's done 'live' so the image itself isn't compressed/resized, just scaled to fit the viewport. It's also immediately, and intuitively, un-doable by the user in just one-click. I'm not sure that, if there were a way around it, I could recommend such a technique, especially since it's a feature that I'm happy with far more often, as a developer and user, than I'm displeased by it.
The only way around it, that I can think of is to find the image's native height/width, wrap it in a div with those dimensions (plus a little padding). I'm not sure that it will work, but it's the only thing that comes to mind now I'm thinking about it.
Just remove the anchor </a> that surrounds your image. If you want to "guarantee" to display it at full size, add width="100%" in your <img /> tag.
Also, to fully display it, it shouldn't be anchored anywhere. Just post your image immediately in a <body> tag.
Display the full image: <img alt="full image" src="FullSize.jpg" />?
Edit
Ah, I now know what you mean. Like David Thomas said, this depends on the browser. If you want the picture to be shown fullsize you can't link to the image directly. With HTML only you can do something like this:
<img alt="thumb" src="thumb.jpg">
This will open a new HTML page, which will display your image:
fullsize.html:
<!DOCTYPE html>
<html>
<head>
<title>Your image title</title>
</head>
<body>
<img src="FullSize.jpg" style="width:100%;height:100%;" alt="" />
</body>
</html>
But in the end this isn't really the way to go. The best thing to do is to give the user the choice of how things are displayed and don't force something on them. If they work on a lower resolution and you display a huge image in full size, there's no way for them to change it. Best to just link to the image and if the user decides he/she wants to view it full screen, they can click the image so the browser resizes it.
create a page FullSize.html with <img src="FullSize.jpg"/> and
display tumb with link to that file
<img alt="thumb" src="thumb.jpg">
This question already has answers here:
Should I specify height and width attributes for my IMGs in HTML?
(5 answers)
Closed 8 years ago.
Is it better coding practice to define an images size in the img tag's width and height attributes?
<img src="images/academia_vs_business.png" width="740" height="382" alt="" />
Or in the CSS style with width/height?
<img src="images/academia_vs_business.png" style="width:740px; height:382px;" alt="" />
Or both?
<img src="images/academia_vs_business.png" width="740" height="382" style="width:740px; height:382px" alt="" />
I'm going to go against the grain here and state that the principle of separating content from layout (which would justify the answers that suggest using CSS) does not always apply to image height and width.
Each image has an innate, original height and width that can be derived from the image data. In the framework of content vs layout, I would say that this derived height and width information is content, not layout, and should therefore be rendered as HTML as element attributes.
This is much like the alt text, which can also be said to be derived from the image. This also supports the idea that an arbitrary user agent (e.g. a speech browser) should have that information in order to relate it to the user. At the least, the aspect ratio could prove useful ("image has a width of 15 and a height of 200"). Such user agents wouldn't necessarily process any CSS.
The spec says that the width and height attributes can also be used to override the height and width conveyed in the actual image file. I am not suggesting they be used for this. To override height and width, I believe CSS (inline, embedded or external) is the best approach.
So depending on what you want to do, you would specify one and/or the other. I think ideally, the original height and width would always be specified as HTML element attributes, while styling information should optionally be conveyed in CSS.
The historical reason to define height/width in tags is so that browsers can size the actual <img> elements in the page even before the CSS and/or image resources are loaded. If you do not supply height and width explicitly the <img> element will be rendered at 0x0 until the browser can size it based on the file. When this happens it causes a visual reflow of the page once the image loads, and is compounded if you have multiple images on the page. Sizing the <img> via height/width creates a physical placeholder in the page flow at the correct size, enabling your content to load asynchronously without disrupting the user experience.
Alternately, if you are doing mobile-responsive design, which is a best practice these days, it's quite common to specify a width (or max-width) only and define the height as auto. That way when you define media queries (e.g. CSS) for different screen widths, you can simply adjust the image width and let the browser deal with keeping the image height / aspect ratio correct. This is sort of a middle ground approach, as you may get some reflow, but it allows you to support a broad range of screen sizes, so the benefit usually outweighs the negative.
Finally, there are times when you may not know the image size ahead of time (image src might be loaded dynamically, or can change during the lifetime of the page via script) in which case using CSS only makes sense.
The bottom line is that you need to understand the trade-offs and decide which strategy makes the most sense for what you're trying to achieve.
While it's ok to use inline styles, your purposes may better be served by including an external CSS file on the page. This way you could define a class of image (i.e. 'Thumbnail', 'Photo', 'Large', etc) and assign it a constant size. This will help when you end up with images requiring the same placement across multiple pages.
Like this:
In your header:
<link type="text/css" rel="stylesheet" href="css/style.css" />
Your HTML:
<img class="thumbnail" src="images/academia_vs_business.png" alt="" />
In css/style.css:
img.thumbnail {
width: 75px;
height: 75px;
}
If you'd like to use inline styles though, it's probably best to set the width and height using the style attribute for the sake of readability.
Definitely not both. Other than that I'd have to say it's a personal preference. I'd use css if I had many images the same size to reduce code.
.my_images img {width: 20px; height:20px}
In the long term CSS may win out due to HTML attribute deprecation and more likely due to the growth of vector image formats like SVG where it can actually make sense to scale images using non-pixel based units like % or em.
<img id="uxcMyImageId" src"myImage" width="100" height="100" />
specifying width and height in the image tag is a good practice..this way when the page loads there is space allocated for the image and the layout does not suffer any jerks even if the image takes a long time to load.
Option a.
Simple straight fwd. What you see is what you get easy to make calculations.
Option b. Too messy to do this inline unless you want to have a site that can stretch. IE if you used the with:86em however modern browsers seem to handle this functionally adequately for my purposes.. . Personally the only time that i would use something like this is if i were to create a thumbnails catalogue.
/*css*/
ul.myThumbs{}
ul.myThumbs li {float:left; width:50px;}
ul.myThumbs li img{width:50px; height:50px;border:0;}
<!--html-->
<ul><li>
<img src="~/img/products/thumbs/productid.jpg" alt="" />
</li></ul>
Option c. Too messy to maintain.
I'm using contentEditable to allow rich text editing in my app. I don't know how it slips through, but when an image is inserted, and then resized (by dragging the anchors on its side), it generates something like this:
<img style="width:55px;height:55px" width="100" height="100" src="pic.gif" border=0/>
(subsequent testing shown that inserted images did not contain this "rogue" style attr+param).
When rendered by the browser (IE7), the width and height in the style overrides the img width/height param (so the image is shown like how I wanted it.. resized to 55px x 55px. So everything went well so it seems.
When I output the page to a ms-word document via setting the mime type application/msword or pasting the browser rendering to msword document, all the images reverted back to its default size. I finally found out that msword is discarding the style and using the img width and height tag (which has the value of the original image size).
Took me a while to found this out. Anyway... I've coded a javascript function to traverse all tags and "transferring" the img style.width and style.height values into the img.width and img.height, then clearing both the values in style, before I proceed saving this piece of html/richtext data into the database.
cheers.
opps.. my answer is.. no. leave both attributes directly under img, rather than style.
If I know the height and width of an image that I'm going to display with an image tag, should I include the height and width attributes, or just put the information in CSS? Or both?
Ex.
<img src="profilepic.jpg" height="64" width="64" />
or
<img src="profilepic.jpg" height="64" width="64" style="height: 64px; width: 64px;" />
or
<img src="profilepic.jpg" style="height: 64px; width: 64px;" />
According to Google Page Speed, you should always define the width and height in the image tag. But, to validate you can't use the style tag.
Also, you should always specify the same height and width as the actual image so the browser doesn't have to do any modifications to it like resizing.
I'd suggest doing it
<img src="..." height="20" width="50">
Edit: Someone suggested in the comments that it would be faster to just not add any attributes. According to Google (not that they are the end all of browser knowledge):
If no dimensions are specified in the containing document, or if the dimensions specified don't match those of the actual images, the browser will require a reflow and repaint once the images are downloaded. To prevent reflows, specify the width and height of all images, either in the HTML tag, or in CSS. - Read More
Given that, you could do the img dimensions in CSS, but to validate you would have to do it in a CSS file, not inline.
BTW, Google Page Speed is a series of tips focused on rendering the page faster.
You should always specify the height and the width of an image if only to help the browser lay the page out even before the image has been downloaded.
See 13.7 Visual presentation of images, objects, and applets in the HTML 4.01 spec:
The height and width attributes give
user agents an idea of the size of an
image or object so that they may
reserve space for it and continue
rendering the document while waiting
for the image data.
They are recommended and not required but you really, really should specify them ;-)
Also, please make sure the dimensions you specify actually match the dimensions of the image.
There is nothing worse than waiting for a page to download just because those 400x300(!) images are in reality more like 4000x3000 at 95% quality.
Yes you should specify the dimensions, so user agents know beforehand the size before the image fully loads so a layout couldn't potentially look broken if it relies on the loaded image's dimensions. In addition, if you're relying on IE6's filter property to insert png's you will need those dimensions.
This answer is now dated and I wouldn't make the same recommendation as I did back in 2009 with modern browsers.
It doesn't really matter which one you use, but I would recommend using only one.
I would recommend the attribute over the css solution as it is more compatible to older browsers and people with styles disabled.
Actually you don't have to specify them. Accordingly to w3c specification you use them only to override default values that are embedded in the image file and are read by the browser. When used will scale the original image to given sizes so putting them is making an extra calculus for the browser.
The height and width attributes give user agents an idea of the size of an image or object so that they may reserve space for it and continue rendering the document while waiting for the image data.
<img src="profilepic.jpg" alt="image" />