I want all images for a mobile site to be 640px wide, based on iPhone screen size.
All images should be the full width of the screen when shown img { width: 100%; height: auto; }.
For the images that are smaller than 640px wide, is it better to use the above CSS to scale them up, or should I use Photoshop or something to scale the actual image up? Does it even make a difference?
So does scaling up an image using CSS result in a better or worse image quality than using something like Photoshop to increase the size?
Scaling images up doesn't go well for the quality of said images, you need to sort out your priorities on this one. You can work on those images and increase the quality and size of those images in Photoshop so you don't lose any quality when resizing, but this will increase page loads or you could lose some quality, but improve page loads with smaller but more crappy images.
If you really want to target each device (computer vs mobile) perfectly you can use javascript to switch out the images. This can be done really easily using http://foundation.zurb.com/docs/components/interchange.html or similar libraries.
If the images are graphics or icons I might suggest just making them svgs and using those instead as they are crisp at a greater range of resolutions. If you go with this option its best to make their sizes multiples of two.
Related
I have set up a background-image for large and medium screens.
I have a touchbar macbook and it fits perfectly.
If I play with the mouse to make the window smaller (to see how it would be for different resolutions and less pixels), it's completely responsive and looks fine (it cuts a bit the right part of the picture but it's not zooming).
Same when I open the developer tools, the Ipad pro version is half-cut but not zoomed.
But when I try to go on the website with an older macbook, the image is completely zoomed and does not fit the screen anymore.
I don't understand how there can be such a difference as we have different resolutions but same inches.. And as when I play with it on my computer, the image stays at the right size even with less pixels.
How can I solve this problem? Why is it doing this? I am fine if the image is a bit cut on the right or left side but I don't want it to be zoomed.
I have tried - height: auto, width: 100vw, background-size:contain (but it's too small) and no-repeat... basically everything with css
background-image: url(/assets/dessin-ba68b8b….png);
background-size: cover;
height: 100vh;
Thank you
When you use cover for background it is guaranteed that the same image will NOT look perfect on all screen sizes, since the browser needs to display it in different dimensions.
To handle this you may generate several images, each for screen size you aim at and use CSS media queries to apply the appropriate image for each screen size.
I have a web page with a row 1200px wide with some 3/4 columns, each one holding an image, that is each image may be 300/400 px wide. On collapse, below the breakpoint (768), images appear blurred because they are scaled to 768px in width.
I wanted to keep things as small as possible, however I think I'll have to use larger images, shrinking them with media queries on large desktop view and 1:1 (almost) on tablets.
Any thought?
You can upload the images to 768px if that is the biggest they get. If you have a lot of images and worry about download time for slow connections or bandwidth from server, consider only load images depending on resolution.
You can read more here:
http://www.html5rocks.com/en/tutorials/responsive/picture-element/
You can also google responsive images and see what would fit you best, or build your own solution if you are into that :)
How can I force mediawiki to disable resizing and use the original size of my image? My main problem is that I'm uploading small parts of screenshots. If I don't use the original size then they look awful. (Imagine a 237px wide image resized to 400px....) But I don't see any option for that.
http://www.mediawiki.org/wiki/Help:Images#Size_and_frame
By simply using the image name, it will fit the image to screen which is really bad! For example, a 300px wide screenshot cutout looks awful on a full hd monitor... You could say that the image may be too large for the users' screen but in my particular case that is not the case. I'll always be using small images (300px and smaller) and the users will always watch these pages on desktop monitors.
I'm sorry I was very dump. If I don't use any option then it is displayed in its original size. I was mistaken because somebody has changed the zoom level of my browser, but I did not realize this because the monitor resolution was so high...
Normally when I am creating a responsive site, I do the normal thing of setting a viewport to the device width, and creating different layouts for different screen resolutions.
But I'm doing a few tweaks to an old site that has big chunky buttons, default font sizes and a simple layout, and actually it looks quite usable when viewed as a desktop-style fixed-width layout, even on small mobile devices.
Rather than specifying a viewport and completely rewriting all the css to make a series of mobile-friendly versions, I'd really like to just increase the main body element font size a little more for viewing on a screen that is physically small: for this particular layout, this would be very usable - if I could work out how to do it!
Is this what -webkit-text-size-adjust: is for? It seems like it should be an easy thing to tweak, but all my googling turns up full responsive design approaches, which are overkill for this particular small task.
A way to make it is to detect the screen width with javascript using the window.screen.width property, and then apply the styles that you want from there.
Here's an example using jquery, however the same can be achieved with native javascript if you don't want to use a library http://jsfiddle.net/UXV7Z/
You can apply as many filters in resolution as you need, just like you would using media queries
DONT use javascript for such a simple task to accomplish with modern CSS, just use:
font-size: calc(80px - 3vw);
and adjust the values accordingly. That will icrease the size on smaller devices and decrease it on wider devices, which makes sense for buttons and footers and what not, but if you want to decrease the size on smaller width screens for text like large titles that overflow just use:
font-size: calc(25px + 0.35vw);
Once again adjust the values to fit your needs. And see here to view the browser support for the CSS calc() function. All modern updated browsers support it
I often use a header with a full width background-image like this page http://thegreatdiscontent.com/adam-lisagor
What kind of media query -stack would you use for the background image?
I would like mobile devices to use images that are not too big in filesize, but also have retina devices have retina-images.
So maybe have something like a one big media query for retina macs, maybe one with really compressed image with retina size for the retina ipads. Maybe one for small mobile devices, retina and non-retina..?
It get's pretty complicated and of course I'd like not to have a list of 20 media queries to target different screen sizes with different resolutions and different (assumed) internet speeds.
Thoughts? What devices would you prioritice?
Thank you.
I think you misunderstand the point of CSS media queries. They won't change the file size being served. CSS is just client side script. If you want to serve images with a smaller file size for smaller screens or slower internet connections, you need to do that on server side.
Take a look at Adaptive Images to do that: http://adaptive-images.com/
Media queries only allow you to resize the original image, so it still loads the full size image, then resizes it.
The background-size property works nicely to keep a background image filling the available area. E.g.
#header {
background: url(image.png) no-repeat;
background-size: cover;
}
You can save the image at a large dimension but at a relatively low quality and it will look good on all devices, including retina screens, as explained here: http://blog.netvlies.nl/design-interactie/retina-revolution/