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.
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
Zurb Foundation comes with data inchange library which automatically selects the correct image size depending on screen resolution, which is great. When you change the browser window size, the image is automatically scaled up/down.
I've seen sites (like http://riotdesign.eu/en/ for example, even zurb foundation website itself) where when you change the width of the browser window, the image does not lose its height. I'm struggling to achieve this effect. Are there libraries people are using to achieve this, or its some special css setting?
Whan I run a test page in google PageSpeed.
I found a few warnings like for example serve scaled images..
http://man-vimal.net78.net/introduction/?intro/action=main
THe results were as such :
The following images are resized in HTML or CSS. Serving scaled images could save 449.3KiB (99% reduction).
http://man-vimal.net78.net/.../twitter-logo.png is resized in HTML or CSS from 367x367 to 20x20. Serving a scaled image could save 140.9KiB (99% reduction).
http://man-vimal.net78.net/introduction/views/images/fb.png is resized in HTML or CSS from 1,692x1,692 to 20x20. Serving a scaled image could save 115.9KiB (99% reduction).
http://man-vimal.net78.net/.../linkedin.jpg is resized in HTML or CSS from 1,024x768 to 20x20. Serving a scaled image could save 99.6KiB (99% reduction).
http://man-vimal.net78.net/.../panorama.jpg is resized in HTML or CSS from 604x453 to 100x100. Serving a scaled image could save 81KiB (96% reduction).
http://man-vimal.net78.net/.../googleplus.jpg is resized in HTML or CSS from 450x320 to 20x20. Serving a scaled image could save 12KiB (99% reduction).
What is a scaled image and how can I fix this up ??
A scaled image is an image that has been scaled to match the size that it is displayed.
http://man-vimal.net78.net/.../twitter-logo.png is resized in HTML or CSS from 367x367 to 20x20. Serving a scaled image could save 140.9KiB (99% reduction).
This is telling you that the your source image is 367x367 but you are displaying it at 20x20.
It is inefficient because the browser has to download the larger image and then rescale it. The 367x367 image is 140kb larger than a 20x20 image would be.
To fix this, resize the image (in photoshop, preview, etc. ) so that is 20x20 and serve that one instead of the image you are currently serving.
your images are too big. just resize them. you can even use paint to do that. a scaled image is basically a resized image.
The typical situation is that, say you have an image with a width of 400px, but it doesn't fit in your layout, so you go to your style sheet and write:
img {
width: 300px;
}
Here, you've resized the image with CSS. But you're still serving the image at a 400px size and scaling the image down.
The implication here is that, rather than using the 400px image, you should use the image sized the way you need it because the file size will be smaller, and thus the page will load faster.
For example, if a user of a website uploads an image of size 400px x 400px and you use this image as a thumbnail say 40px x 40px using html/css.
The web browser has to download the larger image and compute it to the smaller size. The best way to solve this problem is to make a distinct copy of the image, say 'when the user uploads the image' and then use it directly.
So the web browser does not have to inefficiently scale down the image.
I hope this helps.
A Scaled Image is an image whose size matches exactly with the size defined in CSS or HTML.
If your original image called twitter-logo.png is of lets say 300 x 250 dimension but the dimension defined in the HTML statement is:
<img src="http://man-vimal.net78.net/.../twitter-logo.png" width="600" height="500">
then the browser will first download the original image (which has a dimension of 300 x 250) and will then resize it to match the dimensions defined in the HTML statement. i.e. 600 x 500
This resizing of images in the HTML or CSS slows down the overall page rendering considerably and should be avoided.
To resize images (and to optimize them losslessly) you can use a free software called RIOT (available only for Windows).
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/
The image of the card on my site (bottom right) displays differently in Chrome and Firefox. In Chrome, its ratio is preserved, but the ratio is twisted in Firefox.
How can I apply a constant resize of the image itself, cross-browsers (basically do what now happens for Chrome)
You've got the following in your image tag:
width="100%" height="40%"
Try specifying just one of those (I would suggest the width) to maintain the aspect ratio, otherwise the image will be stretched or squished one way or another to fit those dimensions on the less thoughtful browsers.
Ideally you want to avoid allowing the browser to resize the image. Different browsers achieve varying levels of quality which never compare to what you can achieve with a dedicated digital image editor (Photoshop, Paint.NET, etc). Best to resize it to the desired dimensions before publishing then explicitly set the actual height and width in pixels.