I save photos at 640 x 640 pixels. But the size of the different pages of these photos are displayed in different sizes. For example, 188 * 188 or 337 * 337, and … I’m gonna get real-sized photos on the page so that they do not spend much time loading. Do I need to store 10 different sizes for each picture?
And How do I use these different screen sizes to img tag which photo to use?
If you are saving the images at a square size of 640 x 640 then there will be no problem in them displaying at smaller sizes such as 188 x 188 etc. You can use the same image as it would cause you more overhead to load 3 images instead of just one.
Of course you need to optimise the image properly in your paint package which most people do not do properly. Optimising images is very important and can save most of the page weight without loss of quality.
Unless of course you want to change images for ‘art direction’ then there are othermore complicated techniques that are available but again developers often fail to optimise properly and for someone like me who change the browser’s width constantly I would end up downloading all the images in some scenarios and wasting my bandwidth.
If you want images that are much larger than 640x640 then it is not wise to upscale them in the browser as you will lose quality. It’s best to start with a well optimised large image and then reduce in size. In the end it depends on the image, image quality, image appearance, art-direction etc so there is no one size fits all approach.
Most times I simply use a well optimised image and scale it down in the browser.
Keep an eye on the image file size and an image of 640x640 would never be over 100k without good reason.
Here’s some guidelines that have been useful to me:
To use different images with different screen sizes if necessary you should use Media Queries - however that may not be necessary if you go with the strategy in #2
Sizing down the image works best even with optimization.
Width: 100%; is correct, however, it is only 1/2 the battle - the width says the image should be 100% of the width of the container holding it - and it’s important that the container holding the image is also set to be responsive, (i.e. a div for example).
However, if the container exceeds the image’s actual width, the image will expand past it’s actual width and will get distorted and pixelated. The solution is to set a max-width on the image that’s set at the image’s actual width - so for your image that’s 640 x 640
This should work for all screen sizes, keeping the image responsive up to it’s actual width - and then it will stay at it’s maximum width as its container gets larger and larger.
I tend to simply use max-width: 100% in images. That way you don’t need to know the actual image width, it will naturally not go beyond it. This will make a more reusable class to apply to images of any size or not even using a class but a general image selector will make all images responsive by default.
img {
max-width: 100%;
height: auto;
}
Don’t forget the height: auto to maintain the aspect ratio.
This natural scaling is quite sufficient for images of about 640px. I would only resort to image switching for quite large images that you may not want to load on mobiles.
Thanks for the edit adding the link - I’ve used the code and it’s in my code file - I don’t always know where I get everything from. Didn’t always keep good notes.
My issues with IE8 have been ongoing for years - at least with the newest version of the software I am involved with developing - IE8 compatibility mode is going away. Yay! But this is why I still know about the horrors of having to deal with it.
Adding unnecessary hacks for non supported browsers is a dark and slippery slope. Support for IE8 was dropped by MS about 3 years ago and we should all do the same or risk users using a browser that has serious vulnerabilities. I used to champion supporting older browsers but all it does is encourage users not to upgrade and allowed the massive ‘ransom’ attacks of last year that locked users out of their systems unless they paid a ransom. Nearly all the attacks were on users with outdated browsers.
Yes I used to run into the max-width:100% problem in images in IE8 which is why I prefer the width:100% version instead. I believe the problem in IE8 was that it doesn’t recognise 100% when it’s in a container of no intrinsic dimensions (like a float or table-cell) and therefore couldn’t work out the size of the image. Truth be told there were hundreds (if not thousands) of other bugs in IE8 and if you want to support all of them you are going to have a hard job
In a perfect world we wouldn’t go there - but there are plenty of programs out there still written in SmartWare 3 that still need to be updated to SmartWare 4 - that need IE compatibility mode triggered to work correctly.
It’s not possible to know what a user’s settings are - but it is important to be able to recognize what a reported issue is caused by and have the best code, if not already implemented, to correct it.
Yes, I understand but that’s a different issue to designing normal web pages (and wasn’t it that exact issue that was vulnerable to those ransom attacks IIRC).
You can’t code every item on the page to behave as though it were supporting IE8 and if you are advocating one hack for IE8 then why not all the other hacks needed? After all IE8 doesn’t understand media queries anyway so 90% of our code is going out of the window for starters (I know there are polyfills like respond.js but we don’t want to add those also do we).
I understand (and pity) that perhaps you are working in a controlled system on an intranet but that has nothing to do with day to day web design for 99% of developers. (I also think that those old systems are part of the problem because they are outdated systems that have not been invested in properly but I think we are perhaps drifting off-topic a bit now ).
My main point is that these days we should not add hacks for IE8 (or any unsupported browsers) where general web design is concerned. I can give you a million hacks for ie6 if you want as that was my forte
