I have found a relatively big image on the net and i set it as background in my web page. Though it appears in normal size..Is there any simple way to resize it in my html code?
Thank you in advance
You can use CSS3 background size property to set the size of the background image. - http://www.w3.org/TR/2002/WD-css3-background-20020802/#background-size. But it's better if you resize the image using photo editing s/w and use it as it is advisable to keep the size of a web page as low as possible.
WARNING
This is a CSS3 property, and it cant be assured that it'll work perfectly in all the browsers.
EDIT
To change the size of the image on the fly according to the browser size using jQuery check this - http://css-tricks.com/766-how-to-resizeable-background-image/
Related
I have a strange requirement with an electron application where I need to be able to force the document to render at a specific resolution and then stretch or squash it to fit the window. For example, I need to specify that the content size is 1920x1080 but then need to squash that down to an actual window size of say 1280x960.
I have tried to implement this in the DOM by setting a fixed body size and scaling this down to fit the window but this has a knock on effect on other transforms and animations which expect the non-scaled version. I need a solution which works outside the DOM so the document behaves as if it actually is running in a 1920x1080 window but then the rendered result is scaled up or down to fit the actual size of the window.
Is there any way to achieve this?
I don't think it's possible to set the native resolution of the window but maybe you can use the HTML viewport meta header. or use BrowserWindow setAspectRatio. or use webFrame.setZoomFactor(2) from electron api
For some images I prefer to use scaling the image according to page size to make it responsive.
<img class="img_scale" src="img.png" alt"this img doesn't have width and height
definition">
css:
.img_scale{width:100%; height:100%; margin:0 auto; height:auto !important;}
This solution works perfectly if the image is not a billboard background image or in a not flexible box.. So I would like to scale image in stead of using a jQuery plug-in.
However, It is often said that scaling images causes repainting and alot of performance issues.
What do you do? Is there a solution to overcome performance issues with scaling images?
I guess it depends on what "performance issues" you are really trying to solve. If you are worried about time spent re-sizing in the browser or re-flow issues, then use max-width: 100% on the image and set the image container's width preferably using a responsive framework such as Foundations Framework or Bootstrap.
If you are worried about the time it takes to download images to a mobile device over a slow mobile network, then your image needs to be scaled or cropped before they hit the wire. Doing this on the client browser is too late. You can either do this on the fly or replace your img.src to one of several sized images based on breakpoints.
To scale or crop responsive images on the fly you could use a service such as Pixtulate. They provide a JavaScript which will automatically detect your container's size, send those dimensions to the server and re-size the image server side in real time before the page finishes loading.
Check out this article from Smashing Magazine. The author goes into great detail about anything you may want to consider, and possible solutions.
Do background images and embedded images take about the same time to load on a HTML page provided they are the same size? If I am to use the same image twice in a page - once as a background and once as a normal embedded image, which loads faster?
For making a website compatible with screen readers, what's the best way to include an image? Are background images read well by screen readers or do they simply ignore the background images?
Do background images and embedded images take about the same time to load on a HTML page provided they are the same size?
I would say yes, but I think it also depends on how they are loaded. There used to be a practise called image pre-loading. I never did speed tests personally to know if it was really benefitical.
For making a website compatible with screen readers, what's the best way to include an image? Are background images read well by screen readers or do they simply ignore the background images?
Screen readers do not announce that <body>, <div>, etc has a background image attached. There is no magical place for an alt attribute in this case. You need to keep in mind that you're keeping good contrast between your image and your text color. WebAIM has a great color contrast checker, in my opinion.
If you are using CSS to position text over an image that's used as background, so you can give it an alt, don't. That image probably should have a null alt (<img src="..." alt=""/>) anyhow.
If you use an image both as background AND as image (i.e. Using the same image twice) you technically only need to load that image once, assuming your images are properly cached...
That is once you loaded an image with a cache header, or that image is downloading, the browser will either load it from the cache or wait for that one image to finish loading.
As to whether background images and embedded images take about the same time to load. Let's get some context. As per google: https://developers.google.com/speed/articles/browser-paint-events
Finally, notice that each image itself renders progressively, so that
the the user begins to see the image content before the entire image
has finished loading. Modern browsers render images in HTML tags
progressively. By contrast, many browsers do not render images
specified using CSS background-image attributes progressively. To
enable progressive rendering of images, use an HTML tag instead
of a CSS background-image attribute.
So an image using the <img> tag will load faster and not hold up the DOM from being ready unlike an inline css background-image in older browsers which could slow things down.
However, the caveats with progressive rendering of an <img> are that, if your image is not fully loaded when the widow.onload event fires (which is almost always true for large images), it makes for a rather ugly progressive rendering, as well as causing a paint reflow when the image is set as responsive using auto-width and/or 100% width.
To make inline images load much faster and in a much nicer way, what I did is:
First, preload them extremely early as css backgrounds in AND on the <head> of the page. You can start preloading some or all of your css images too that way, before your css file or body have been parsed.
Second, to go around the other drawbacks, I use a javascript lazy-load-ish method to hide the image on the interactive event before the window loads.
And finally, bring the image as a fade-in once the css-called image has finished loading.
You can see a live example at: http://www.nptr.net/1614
So while an embedded image is best. If you care about the best speed for your page load, I highly recommend to preload large images early via css background(s) in the head, especially if you must use them as backgrounds right away.
That is because otherwise, images in your body will have to wait until both your css file(s) and synchronous javascript(s) are fully received, until the browser actually starts retrieving them. Which generally incurs a 100 to 500ms delay, with the worst delay being on the first page load.
If I have an image that is 600x600 and I want to display it in 100x100 on a mobile device.
Should I resize the image 1st in Photoshop or should I just use width/height attributes (will this method force users to download a large image 1st and then resize it ?).
I know it is possible to resize using JS
The browser can resize images dynamically using CSS, but they doesn't always look as good as doing it in Photoshop. You should resize it for mobile to reduce the file size and bandwidth required.
I've built a website for someone, but according to him, scrolling is very very choppy on the website in IE7 on his computer. On my computer I don't have any problems with scrolling (in any browser), i've already tried some things, but according to him scrolling still is very choppy. So I was wondering if someone has some suggestions for me? I think the main problem is the full width background image, but i'm not entirely sure.
The website is:
www.casalagodilugano.nl
The website is in dutch, but for this question that doesn't have to matter
edit:
Tx for the helpful answers. In the end, it was indeed the background image which caused problems in IE7. By accident I found a way to work around this problem: I set the image as the background image, centered the image, and using css3 I made sure the was stretched the way it should.
I had a problem similar to this. It turned out to be because my computer was full and my performance suffered. Viewing the issue on my new machine (also had IE7) produced no choppy scrolling. I fear your client has the same problem, perhaps suggest it's his computer and not your website?
Edit:
Many things affect the processing on a website, I'd suggest it has to do with your background image. The sand has quite a "repeatable" texture so perhaps you should Photoshop it down so it's a much smaller image and just use 'background-repeat' in your CSS to achieve a similar effect. Your background image is also around 200% of what it displays on the website, I copied the URL of the image and viewed it by itself and it's HUGE! The emphasis here is on image file size, because IE is having trouble shifting the image down when you scroll. It's not a very good browser to be fair. I've also noticed that your large header image is larger in actual size, suggesting that the size is reduced by your code. Try reducing this image size to the size you want to display it
Edit pt 2
I've stumbled upon a script that for some reason waits 5 seconds before running and that is the Google maps API. I respect that you need this for the Routes page but if I were you, on any page where there is no map, remove any mention of the google maps api from the source code.
I have found that IE gets choppy when you have an <input> tag without a border or background specified ... very strange IE "bug" but i've fixed choppy scrolling on sites/pages by just adding a border to the <input> tags.