Question posted in 
Im new to converting from photoshop to CSS, hopefully someone could help me.
I have many layers in photoshop and I need to convert them to CSS. Many layers include images which are around 2500px width.
I am using bootstrap so naturally my website is responsive. Now should I leave the width of 2500px and add a ‘img-responsive’ class? It seems to work (the class scales down the image), however the image size is still massive and it takes ages to load. Should I decrease the width and height of those images? Would that impact user interface on bigger screens?
Thank you!
4
Answers
The procedure is to build a website that fits the design.
Do not simply take a PSD layer, dump it to a giant image, and put it on your page. Interpret the design and decide how your page should be built. You need to make decisions about what should size dynamically and what should stay static. It’s up to you to figure out what works best, based on the design and your skills.
If you want your images to be fluid (responsive is not so relevant here), you can set a width to your images, but keep your height to auto; they will resize to that width. So:
See here: jsfiddle
You have a number of questions, so I will answer them in list format:
Q: “Should I leave the width of 2500px…”
A: Bootstrap current version 3.2 has a max container width of 1170px, so I’m not sure why you have images at 2500px unless they are backgrounds or something similar. You should size your images to fit the layout of the largest desktop size you are supporting.
Q: After scaling the img down with a CSS class the size is massive… “Should I decrease the w & h of those images?”
A: Scale images to fit largest desktop layout, then in Photoshop use “Save for web” to properly compress image size. For JPGs I typically use a quality of 65. If it is a bg img, you can get away with using a lesser quality setting (40-50), just play with it.
Q: “Would that impact user interface on bigger screens?”
A: Yes, it would negatively impact bigger screens. If, for instance, you saved your full-width header image at 768px to accommodate tablets, it would look pixelated (blurry) on a desktop.
Pertaining to images there are several ways so you don’t load large images for small devices, here’s two.
Use server side detection, like https://github.com/serbanghita/Mobile-Detect/ or http://adaptive-images.com/ and deliver appropriately sized images. The latter does much of the work for you. Both are php, there are probably forks for other languages.
Then, even with this, IMO best solution, you’d use a class that sizes the images fluidly, such as "img-responsive" or your own making to make it fluid.
Use mobile first css and use background images, you’d use percentages or vh (or combine for fallbacks) on the container and use background-size:cover and then start smallest to largest with media queries. Make the images 600px, 1000px, 1600px, and 2500px or whatever and then make min-width media queries to load up background images. Use Modernizr to create a fallback for browsers that can’t understand background-size css (if you are supporting IE8 or other legacy browsers).