Tools being used:
Knockout 3.1
MVC 5
I have a list of documents to view. My image placeholder is like this:
<img src="" data-bind="attr: { src: '#Url.HttpRouteUrl("DefaultApi", New With {.controller = "document"})?documentID=' + DocumentID(), title: FileName}" />
I cache the image with my controller, so only on the first load do I have an issue.
But basically, when the image is loaded, the page doesn't know what size the image will be and shrinks down, then when the image is loaded it expands to its regular size.
Any thoughts?
To fix this, add a containing div around the image. Give it a min-height and min-width that doesn't break your layout. This way, while the image is loading, your end users don't see a broken layout, or a "stutter" as your image is bound as the source for the element.
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 the following html:
...
<td>
<img src="/img/myimage.jpg"/>
</td>
...
Styled:
img {
height:auto;
width:600px;
}
The image is for a banner that I have on the top of HTML emails. I need it to always resize to a width of 600px, and then scale the height relative to the width (so the image doesn't distort).
This works fine if the image is successfully loaded, but if the image 404s the placeholder that remains is 600px by 600px. This makes sense, but it looks awful!
I can't work out the best way to limit the resizing of the height if no image can be downloaded. I can't set a max-height or height as this will distort the image if it is successfully downloaded (note the image files height can be variable).
Any ideas?
Considering that you are sending an HTML mail using server side programming:
Check if the image file exists
Insert the file's content in base64 encoding directly in the src (that way never 404s)
If you really do not want to send the picture inline in the mail:
Check if image file exists (using URL)
Fetch the image sizes and write them in the img tag
Try to place your image in div tag and set it style min-height:200px for example or limple add min-height parameter to image if it is possible.
The actual answer to this question is its not possible in pure HTML/CSS. Email clients have poor support for JS so that's not an option.
Since the height of the image could be anything, and checking the link every time seems unnecessary for such a minor issue, the solution for me is to accept the limitations of HTML emails and accept that the missing image will be an odd size.
I'm making a basic html5/css web page. For some reason, when I view the page in the browser, the thumbnail image is showing up as full size. To create the thumbnail, I opened the large original in paint. I resized it to a width of 150px and it calculated the height as 185px. Then I saved it with the thumb name.
Then, in my html code, I have the following:
<img src="../media/tinCanBookCover_thumb.jpg" height="185" width="150" alt="Tin Can Crafts Book" title="Tin Can Crafts Book" >
However, when I view the page, I can tell I'm viewing a small image at a larger size because of the pixels showing. Clicking the image is showing the full size image as expected. Any ideas why it's not showing my thumbnail as thumbnail size? I've done this elsewhere and it worked. I know the page validates, except it's having trouble finding the stylesheet, but I do see the stylesheet changes when I view the page.
I figured it out! I had css to make img 100%. I changed it so it was attached to a class instead of the generic image.
The Idea
I have a User Manual page, it is kinda big, and each topic has a anchor linked to it.
In my product page, I can link the client straight to that topic in the manual with a anchor, like:
Manual:
Managing Options
<!-- Instructions on how to manage options -->
Product Page:
How to Manage Options
The Problem
When I click the "How to Manage Options" link in Product Page, it goes to the manual and immediately to the #manage_options anchor
But it often stops in the wrong place, because it goes to the anchor, then it keeps loading images, which changes the position of the content
Is it possible to wait for all the content to be loaded, then it goes to the anchor, or any better solution for this problem?
...it keeps loading images, which changes the position of the content
It's a best practice to explicitly declare your image sizes to avoid unnecessary repaints:
https://developers.google.com/speed/docs/best-practices/rendering#SpecifyImageDimensions
Specify image dimensions
Overview
Specifying a width and height for all images allows for faster
rendering by eliminating the need for unnecessary reflows and
repaints.
Details
When the browser lays out the page, it needs to be able to flow around
replaceable elements such as images. It can begin to render a page
even before images are downloaded, provided that it knows the
dimensions to wrap non-replaceable elements around. 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.
Recommendations
Specify dimensions that match those of the images themselves. Don't
use width and height specifications to scale images on the fly. If an
image file is actually 60 x 60 pixels, don't set the dimensions to 30
x 30 in the HTML or CSS. If the image needs to be smaller, scale it in
an image editor and set its dimensions to match (see Optimize images
for details.) Be sure to specify dimensions on the image element or
block-level parent Be sure to set the dimensions on the element
itself, or a block-level parent. If the parent is not block-level, the
dimensions will be ignored. Do not set dimensions on an ancestor that
is not an immediate parent.
So use:
<img src="cat.jpg" alt="A Cat" width="360" height="200">
Or
<img src="cat.jpg" alt="A Cat" style="width:360px;height:200px;">
...or you can specify the dimensions in an external stylesheet, but generally that is more difficult with varying image sizes. This will ensure your content doesn't shift as images are loaded.
You can solve the problem using a JQuery script, this can postpone the anchor link after the page is loaded, i added an offset of 20 px also.
$(document).ready(function() {
if(window.location.hash) {
$('html, body').animate({
scrollTop: $(window.location.hash).offset().top - 20
}, 500);
}
});
function moveToHash() {
let urlHash = window.location.hash;
if (urlHash) {
window.location.hash = '';
window.location.hash = urlHash;
}
}
(Copied and fixed from https://stackoverflow.com/a/21447965/371908)
Is there a way to get Firefox (or a browser in general) to scale an image in an HTML image tag automatically depending on the window size, and then expand the image to full size upon clicking on it, in the same way that the browser displays an image if you view it directly (right click and hit view image)?
You can't achieve the part where you want to make the image larger using click without some JS, but if you want the image to scale according to the browser size, you can use this in your CSS stylesheet:
img {
max-width: 100%;
}
Read more about this here.