I got a problem with images and its pixels probem.well let me tell you this.I got a picture of 2448 x 3264 pixels. So its a big image I just decided to reduce its size using this way
<img src="1.jpg" style="width:600px;height:500px"/>
But there is a problem I see, the picture looses its clarity and its visibility, it looks like pulled it close and the person in the images looks so ugly.but using the original size makes look so big . I am sure there is a way to do because I see google images result and also on some websites I tried to see thier code but Could not figure it out.
Could anyone please tell me how do i make the images look good even when they got too long resolution and make them fit in the given width?
Update
Okay now i understand we need some server side image processing and could anyone tell me what would be the way to do it Thanks
The most wide-used practice is to resize the image server-side. When the image is uploaded to the server (e.g. by the user) the server takes it and creates and creates needed thumbnails.
Unfortunately this cannot be done with HTML, CSS nor JavaScript. And there are a lot of cons of forcing the size of the image with CSS. For example the user have to download the whole image ( I guess yous is about 6MB ) and it could take a lot of time .
Withour any language you cant do it, or you have to edit the image and need to upload to your host.
Try using the plain html. It will also help if you have the right width:height ratio (in this case, 3:4)
so:
<img src="1.jpg" width="375" height="500"/>
To gain better quality you need something more, then only HTML. You have to resize images manually, either use some server-side scripting to prepare images before rendering (better even do it on uploading if you sure about specific dimensions).
What you need is server side image processing. For exaple phpThumb or another implementation depending on your serwer platform.
Example:
<img src="../phpThumb.php?src=1.jpg&w=600" />
the phpThumb will open image passed in src, and resize it to width passed in w -> the process image on the fly and outputs to the browser.
For pictures to maintain their clarity, you need to ensure that you maintain aspect ratio. Aspect ratio is the width/height ratio of images and if you resize images maintaining the ratio, then their clarity is maintained. You are getting the resized image to be messed up because 2448/3264 != 600/500.
Now tag resizes by aspect ratio, if you give only one of the attributes of width or height. eg:
<img src="your_src" width=600>
This will render maintaining aspect ratio(it calculates the height needed). However, this could lead to problem sometimes if you have a max-height constraint, because the recalculated height could exceed the div height, if your div has a max-height.
If you have a max-height and max-width constraint, you can use the following code to resize the image using JS. I am assuming that max-width and max-height values as 600px and 500px respectively and you can change as per your needs:
height = this.clientHeight;
width = this.clientWidth;
aspectRatio = width / height;
if (height > width)
{
height = 500;
width = height * aspectRatio;
}
else if (width > height)
{
width = 600;
height = width / aspectRatio;
}
this.setAttribute("height", height+"px");
this.setAttribute("width", width+"px");
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 found a similar question here, with the answer: "you should always define the width and height in the image tag." But it is from 2009.
In the meantime, many things has changed on frontend. We are all doing responsive page design now, for many devices and sizes simultaneously (mobile, tablet, desktop...).
So, I wonder is it still necessary to specify the width and height attributes, and for what reason (for responsive, page speed, SEO...)?
An img element has width and height attributes, but they're not required under any DOCTYPE.
Width and height attributes were only 'required' or relevant to reserve the space on the page and prevent the page moving around as it loads - which is important. This can be achieved using CSS instead providing the CSS loads quickly enough - it is likely to load before the images anyway, so all should be good.
It is also possible (and valid) to specify just one attribute, width or height and the browser will calculate the omitted value in order to maintain the correct aspect ratio.
You can specify percent values in the attributes if required. You don't need to use CSS for this, if that is what you are implying.
Also, it is relevant to add - Under HTML5 the width and height can only take a pixel value, in other words a valid non-negative integer.
Whether you use the width and height attributes can depend on your design. If you have lots of differently sized images, do you want to lump all the dimensions in the CSS or include them with the img?
YES, you want to declare the width and the height of an image in 2016.
To make them retina-ready
If you want your image to be retina-ready, you should define a width and an height lower than the actual pixels. If the image is 800x600 specify <img width="400" height="300" />.
To avoid page jump
Without the width and the height the image does not know how large it is, which causes an unwanted jump in the page as it loads (it reflows). Declaring height and width solves this problem.
Note that:
Images with a defined width and height can still be responsive. Simply add max-width and max-height to your CSS. This will cause the image to scale down (not up) when it does not fit the screen (see this sweet retina-ready, responsive kitten). Defining a min-width and min-height will do the opposite.
Adding a huge amount of compression to your JPG (around 50%) to keep the file size low is recommended when you use a single (relative large) image for all screen sizes.
Well, the basic answer to this question (as with most coding issues) is this: it depends on the situation at hand.
I would say that the “best practice” of always specifying the height and width attributes of images making a significant difference to page rendering speeds hark back to the days when designers laid out their websites using tables and spacer GIFs. We have come a long way since then.
An indication for the future is the introduction of the new picture element being drafted into HTML. The picture element is effectively a wrapper for the existing img element, which allows you to specify several images of different sizes via a source element, and the user-agent itself actually determines which version is used.
<picture>
<source media="(min-width: 64em)" src="high-res.jpg">
<source media="(min-width: 37.5em)" src="med-res.jpg">
<source src="low-res.jpg">
<img src="fallback.jpg" alt="This picture loads on non-supporting browsers.">
<p>Accessible text.</p>
</picture>
As you can see from this example code above (taken from the Intel Developer Zone's article on the HTML5 picture element) there are no height or width attributes on the img element itself.
Here are a selection of resources that will help you to decide the most appropriate method of declaring image sizes:
Responsive Images Community Group
W3C Working Group Note: Use Cases and Requirements for Standardizing Responsive Images
WHATWG HTML Living Standard: The picture element
Good standards are always worth a recommendation. With a little extra code it's quite easy to merge static (px) values of the img tag and generic (em, %) values supplied by CSS. And simpler still, get rid of the img tag altogether and set the picture as background of a div with a unique ID. If you have multiple images, use sprites and assign each picture to its corresponding div. Your mark-up sources would then look something like <div id="image_001"></div> - that's all. Scales all by itself; no need for bloatware like JQuery, etc.
If we're talking 'bout responsive, you may use bootstrap (if not, start doing this).
When working with images, you should add the class img-responsive, this will modify the width of the image if necessary and the height will be auto, so if width decreases, height will decrease too.
You will always have an image that keeps the same % of its container and will never loose the aspect ratio.
There's no relation with SEO and image size declarations.
Page speed will be the same always, so if the image is 800 x 600 px, you'll load the full image, even if you declare it as 60 x 40 px.
You must think that, even using img-responsive, the max width and height of this image will be the real size of the image. So if we have a 800 x 600 px image, it will not enlarge it (because it'll become loosing quality).
So in 2016, it's recommendable to NOT declare height and width of an image. Instead use bootstrap's img-responsive class, other responsive framework class that gets the same result, or hand-made the proper jquery and css to reach the same.
Hope it helps!
Yes, It is still relevant to specify width and height attribute on images in HTML.
Images often take longer to load than the HTML code that makes up the rest of the page. It is, therefore, a good idea to specify the size of
the image so that the browser can render the rest of the text on the
page while leaving the right amount of space for the image that is
still loading.
Hence, specifying width and height attribute on image will improve the webpage performance by protecting from delay in loading.
Yes, it is necessary to add height and width attributes to the img tag along with the src and alt attributes to prevent page-jumping. When our page loads, the specified space will be preserved for the image so that the it can occupy that place peacefully.
But, there is another problem that will arise here Responsiveness.
Once we give height and width attribute to img tag, the image will tend to stay in the same height for all screen-sizes which will make the image to shrink.
To avoid this, we need to add height: auto; to the image in the CSS file.
I was checking my website speed at GTMetrix.com. On the Page Speed tab their was a recommendation to specify the image dimensions for images.
I am using a Bootstrap website.
The images on my site currently have the following html
<img class="img-responsive" src="the-path">
Their is a recommendation at GTMetrix that states that these images are missing width and/or height attributes.
I have always assumed that I should not put a specific width and height attribute on my img's when they have the img-responsive class.
Can you advise if width and height dimensions should be included on every img on a Bootstrap website even when the img-responsive class is being used.
The recommendation for setting a height and width exists so that the page does not have to be completely redrawn from scratch with a new layout once the image loads. If you pre-set the image size, then the layout remains the same after it loads, which is more efficient and also prevents somewhat jarring movement for the user as the page still loads.
When it comes to any design, if you expect a dynamic image size and your page can handle that, then there is nothing wrong with leaving the height/width unspecified. It's just an optimization technique. Value a functioning site over optimization.
try to use
http://www.w3schools.com/cssref/pr_dim_height.asp
using properties as: px change to vh(vertical height) or hh(horizontal height)...
example:
height: 80vh;
width: 40hh;
the size of 1 vh or hh depends on screnn size
Assuming that I have two identical images with different dimension:
test_small.jpg (150px x 150px) and test_medium.jpg (500px x 500px)
I want to display 150px width image.
1) Which usage is better for browser to load? Which is faster?
<img src="test_smal.jpg"/>
or
<img src="test_medium.jpg" width="150px"/>
2) Does the second use will load entire image then adjust image width?
Edit: < /img > tag removed
Loading the smaller image is faster for a couple of reasons.
The file size is smaller, less to download
The browser doesnt have to resize the file, it just displays as is.
However, the amount of time difference is going to be very small.
Also the img tag is self closing < />
You should never specify a width that is different to the actual image width, as the large image is downloaded and resized dynamically by the browser.
If you want to resize an image, you should do it server side before it is loaded into the browser. Specifying an image width is actually seldom required.
The second one is slower becuase as you asked in your second question, it will download the entire image first. Which is slower because the image is bigger.
Resizing it takes more time too.
You should rarely use the image width attribute, and try to save the image in the size you want on the server first.
here is how you use the image tag
<img src="test_small.jpg" />
obviously using the smaller file will be faster, so use the small file instead
I just finished reading YSlow recommendation to always define the image dimensions (height/width) to improve HTML rendering performance.
However, I don't know the image dimension I'm linking too.
What I do know is that the height will never be larger than 200px and the width will never be larger than 300px
Would I be a benefit if I defined (CSS) :
img {max-height: 200px; max-width: 300px}
For HTML performance rendering?
No, setting the max-width and max-height doesn't improve the performance.
The reason for specifying the width and height of images is that the browser will know exactly how much space the image will take up. If you leave the image size unspecified, the browser has to reflow the layout when the image loads.
You can see this nasty effect on some pages, where the page is first loaded with no placeholders for images, and then the contents jumps around making place for the images as they load.
If you can't specify the size of some images, don't worry too much about it. Just make sure that the layout behaves nicely when the images load, and don't jump around too much.
Setting the max height and width of an image in the css will make the img tag resize the img based on the contraints but if you are using a backend scripting language like asp.net or php you an use their img libraries to scale the image on the server side an either save then to the hard drive to use later or resize on the fly.
You can check out http://shiftingpixel.com/2008/03/03/smart-image-resizer/ for php as a starter
Or if you are using .NET you can check out this link http://weblogs.asp.net/gunnarpeipman/archive/2009/04/02/resizing-images-without-loss-of-quality.aspx
Images with different proportions would not look good, since they would be scaled. I would not recommend this.
In this case I would definitely not set the height and width of the image since you don't know what it is going to be. If you know what the size is going to be then setting is good because it will cut down on the amount of repainting and reflow that the browser has to do when rendering a page.
The less it has to do then the better the performance will be on the client side because you are not making the browser work too hard.
Stoyan Stefanov explained it really well in a recent blog post
I think You'd rather want to wrap that <img> into a <span> or <div> element with max-height and max-width set. Also, it ( span or div ) should have overflow:hidden set so the image doesn't go out of the div's range.
It definitelly isn't recommended to set these setting directly to image because You'll get different and slower rendering in different browsers.