I have a WordPress site, which has an issue with the logo.
If you'll view it on a desktop(not retina),
it will be blurred after load BUT after scaling-up and scaling back its appearance becomes normal.
The source image height is 100, and height is 50, so why does it gets blurred?
I believe it is the original image resolution that create this.
Optimising your picture for the actual size would solve your problem I believe or setting the custom CSS to the following (with the current image size):
.nm-header-logo img {
height: 51px;
}
When an image is bigger than what you set it for 50px the browser shrinks the images to that size. In a lot of cases the result is not good and it may even be worse in some browsers (e.g. Chrome). You end up with blurry or jagged edges. Since you still need retina support you should try using 2 images, a smaller one that has 50px height that will load for non retina and one for retina which is twice as big. You have to modify the code for that:
You can use this method here.
E.g.
<img srcset="logo-twice-as-big.jpg 2x"
src="logo-normal-size.jpg" alt="Logo">
Try adding this property to your image.
.nm-header-logo img {
image-rendering: pixelated;
}
The image-rendering property defines how the browser should render an image if it is scaled up or down from its original dimensions.
The possible values are : auto | crisp-edges | pixelated
pixelated: as the image changes size the browser will preserve its pixelated style by using nearest-neighbour scaling. This value only applies to images that are scaled up.
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 many small icons in my website. Instead of loading all of them independently, I am thinking of using CSS sprites due to performance gain.
Consider the following code
<div style="width: 24px; height: 24px;background: url('img.png') -10px -10px;"></div>
vs
<img src="css-sprites.png" style="width: 24px;height: 24px;">
As expected, both gives same result. When loading as an image (second case), if I keep resolution of actual image a higher value, say 128*128, and using 24*24 for display, I am getting better resolution even when we zoom the page in browser (tested in mozilla).
But when using css sprites, since I have to keep the same display resolution in the sprite, the image gets blurred when zooming.
Is this expected behavior or am i doing something wrong? Is there any way to overcome this issue when using css sprites?
I do not have much experience with html and first time going to use css sprites. Please help.
Edit: also, many posts I could see in internet about cross-browser issues while zooming. Is this some point of concern even now?
If your sprite size is 200x200 px, and you want to get better resolution by zooming - make you background-size: 100px 100px;. So if you will zoom to 200% - the quality of you image will still be good. Obviously, your sprite image should be twice bigger the size you are going to use on your website. To avoid problems - do not mix % and px or any other different units in one background-size. Use only px in your case and everything will work just fine.
Summarizing. Make sprite twice bigger, set background-size twice smaller the size of sprite image. Tested it in Chrome and FF. Works fine on zooming.
If you are familiar with svg files - try to do your own vector font (for icons) using http://fontastic.me/. No scaling issues will disturb you. You can set size by font-size and make them any color by color in CSS, like a text.
I am using the responsive image technique, which is to set max-width to 100% to resize my images according to the screen resolution/size. However, when I put the image inside a div that has a percentage width, the images do not appear crisp (since I surmise, it has been resized via browser). The text on the image is quite blurred. Is there a way to make it look crisp? Or at least to make it look crisp on the most common screen size?
CSS:
img {
max-width: 100%;
height: auto;
}
.img-container {
width: 57%;
}
HTML:
<div class="img-container">
<img src="[img source]" width="700" height="500" />
</div>
If you've got a large image that's being scaled down, resize it in a vector graphics program first, then save it as the preferred size, and serve that to the client.
If you've got a small image that's being scaled up, you're going to lose resolution, no option.
This isn't really a CSS/HTML problem, just FYI, it's a scaling problem. Various browsers will use various scaling algorithms, so the results will not be consistent. You've got to grab the controls and force the browsers to show the image you want, without scaling. One of the practical drawbacks to the theoretical beauty of "responsive design".
Use SVG if you have non-photographic images
Use slimmage.js for photographs.
Manually exporting 14 image versions to support the 2013 range of resolutions is madness.
use SVG images or use a plugin called picturefill.
I want to display a collection of image thumbnails in a grid. The images will come in a variety of sizes, but I'd like to restrict the thumbnails to a particular size (let's say 200px wide and 150px tall).
What I'd like to find are some magical HTML markup and CSS rules that will
Allow the images to be included in normal <img> elements
Ensure that the thumbnails fit into their 200x150 pixel box, retain their proportions, and are centered in whichever dimension they overflow.
Not require JavaScript or specific knowledge of each image's actual dimensions
I'm not sure if this is possible. I can make a (bad) approximation of what I want with the following markup:
<div class="thumb">
<img src="360x450.jpeg">
</div>
and CSS:
.thumb {
width: 200px;
height: 150px;
overflow: hidden;
}
.thumb img {
min-width: 200px;
min-height: 150px;
width: 200px;
}
This attempt breaks in a variety of ways:
Images that are in portrait orientation will be sized correctly, but will overflow through the bottom of the container, resulting in vertically-off-center cropping.
Images that are wide and short will be distorted in the horizontal dimension because of the hard-coded width and min-height rules.
But without that hard-coded width, images that are larger than the minimum height and width will not be resized at all.
If it's at all helpful, I've put up an example that will (hopefully) illustrate what I'm trying to do, here:
http://overloaded.org/tmp/imgtest/
http://overloaded.org/tmp/imgtest/imgtest.zip
I know that I can solve this problem by omitting the <img> element altogether and instead pulling the thumbnails in as a centered background image on the containing element, but, if it's possible, I'd like to keep the <img> elements in the page.
Thanks for any help or pointers you can provide!
Edit: I suppose I should note that an ideal solution will work in IE 6+ and modern browsers, but any solution that works in IE 9+ and other modern browsers (recent WebKit, Gecko, etc.) will be gladly accepted.
You can (kind of) achieve this with the CSS3 background-size additions: contain and cover.
Live Demo
contain (top picture) fits the entire image, keeping aspect ratio. Nothing is cropped.
cover (bottom picture) fills the containing element either vertically or horizontally (depending on the image) and crops the rest.
Possible, probably.
Also, probably not the best idea. Your big issue to overcome here is orientation of thumbnails. What if you're dealing with a panorama? Certainly, shrinking it down is going to create a very unsightly "squished" image, as would a very tall image. It's rare that everyone deals in 4X3 or 16X9 100% of the time. So, you'll need a mechanism to pad out the image. Even if the ratio is correct, it's not going to resize as cleanly as you could with a program like Photoshop or Gimp.
The other major issue in this thought process is that you're going to be sending massive amounts of unnecessary data to the server via the larger images. It'll take longer to load, fill up the DOM unnecessarily, and overall just inhibit the UI experience.
There are a number of ways to get around this, none of them pure CSS. I've tackled this several times, each in a unique way based on the client. For one client that wanted things totally custom, it was a custom uploader, resizing via iMagick (part of image magic) and custom CSS/Javascript for the album with major interactivity. In another instance, I use Gallery as the backend--handling the thumbnail creation, uploading, titling, cropping, and organizing-- and then just pulled the reformatted image links out of the DB to display them in a more appealing manner. You could save yourself even more trouble and just use something like the Flickr api to pull images for your use.
Here's a tut on using ImageMagick to do thumbnails.
.thumb img {
max-width: 200px;
max-height: 150px;
min-width: 200px;
min-height: 150px;
}
Well I know for thumbs you would want it max and min if you want a smaller image to make it bigger and bigger image to make it smaller.
try to set max-width and height and not min because if the image is not exactly that size it will overflow :)
I've read all over the Internet that I should not define fonts (or anything) with absolute pixel height/width/size and instead, use EM ... so that on higher resolution displays, my web site can scale appropriately.
However, what do I use to define IMAGE height/width ... because images won't scale well (they look pixelated)
UPDATE:
To clarify, I'm not referring to page zoom. I'm referring to how to make my web application resolution independent so that it will look correct on higher DPI displays.
I know this question is a bit old, but want to put this out there for anybody who may come along later. When talking about mobile devices which have higher pixel densities, the mobile browsers will zoom the page in by an amount to make it appear as though the web page is not very small. Devices implement this zooming as per the CSS 2.1 specification.
For example, many devices today have a 1.5x pixel density ratio compared to desktop monitors. As a result, the mobile browser will zoom websites by about 150% to compensate for the extra pixels. The new retina display has a 2x pixel density ratio... and as such the browser zooms in websites by about 200%.
Point of the matter - developers should not have to worry about different resolution devices. If you wish for your images to show up clearly on high resolution devices, you will need a higher resolution image. You generally don't have to worry about 1.5x devices as the quality difference is negligible and not worth the effort. However, the new retina display causes some really blurry images, and as a result you should use 2x the image.
So for the following image, you would want to export a 600x400px image in order for the image to show up clearly on the new retina display:
<img src="photo.jpg" style="width:300px; height:200px" />
Font sizes should be set in em (or %) because if the user changes the text size in IE (View > Text Size), text set in px (or have a fixed size somewhere up the inheritance chain) won't be resized. (Other browsers have no problem resizing text set in px.) See How to size text using ems for more on this.
Images with px dimensions are not resized when the user changes text size; images with em dimensions are resized. So if an image's size should be relative to the text size (a rare case), then use em. Otherwise px dimensions is fine.
For page zoom (where the browser makes everything larger or smaller), it doesn't matter if dimensions (text or image) are defined using em or px.
Normally, I use em for most elements and exact pixels for images. Your images will not scale with everything else when the text size is adjusted, so you need to review how the page looks at different text sizes and adapt when required, but I find this a reasonable compromise (versus scaling the images that is).
Using em when resizing the text in IE, it becomes larger than it should when made larger, and smaller than it should when made smaller.
The solution that works in all browsers, is to set a default font-size in percent for the body element:
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
http://w3schools.com/css/css_font.asp
You can find a perfect example of image styling using px with source code here: http://w3schools.com/css/css_image_gallery.asp. The images scales perfectly with the text increasing or decreasing it.
see the solution of this page
http://nickcowie.com/2005/elastic-images/
HTML
<div class="imageholder">
<img src="/images/tim_underwood_rb2.jpg" class="vertimage43 floatleft">
<img src="/images/joe_smash1v.jpg" class="vertimage43 floatright">
</div>
CSS
.widecolumn .imageholder {
width:51.5em;}
.widecolumn .vertimage43 {
height:32em;
margin:0;
padding:0;
width:24em;}
It's not really possible to make a page resolution-independent when it comes to images.
You can use SVG for images, because vector graphics truly are indepent of DPI, but this won't work well for photos.
You can use high-resolution images and display them at smaller size. This way, when sized up, they look a lot better. On some browsers, the downscaled image won't look too bad.
This is an example page, http://www.cssplay.co.uk/menu/em_images it has high-res images that are sized with ems. On Opera with page zoom, the high res images retain their clarity at higher zoom levels.
For retina devices you can also have a second image twice the size and add #2x to the file name...
so if you have a 200px x 300px image called image.jpg you just put in another one that's 400px x 600px and name it image#2x.jpg and retina devices will display that instead.