I am trying to display a grid of images on my website. The problem is they are all different sizes which makes it look really sloppy if you use a really wide or really elongated image. Is there any resources you could suggest to help with this problem. I would like to make a grid of images that are all the same size. A cropping function similar to Facebook profile picture system would work great.
I found a website that is exactly what I need. There is a website that maintains the aspect ratio and has a nice interface. I think I will implement this on the site.
Related
I am using yslow in which it tells don't scale images in HTML but the images are coming from database and I use them using bootstrap grids. Most of the images are show in popup on click.
The image width I set is in the css file in percentages like max-width:100% or width:100%;, but I don't know what to set to not scale the images in HTML.
I don't know how to resolve this issue. Please help me.
YSlow is telling you this because it is not a good practice to resize images in HTML, especially if the images become smaller, as this means you spend too much time downloading.
You don't need to take everything performance monitors like YSlow are telling you as an action item. The reports are only recommendations. As #Amin Gharavi said, if the images load fast enough for you, then it's probably okay.
The problem is if you are downloading images that are MUCH bigger than their apparent visual, which usually means much slower download in addition to lower visual quality in some browsers.
I have a designer who designed my site using Photoshop (.psd).
Now i am the one who will convert this to html/css.
In the design, there are icons (images) whose dimension is 70x55 (measured in photoshop ruler)
My question is, when i code these images into html/css, should i be using the following code?
<img src="img1.png" width="70px" height="55px"/>
Is this how converting psd to html works? following the sizes, spacing, distance on whats on the actual psd designed by the designer?
Im a complete noob on this so any help will be great appreciated.
-UPDATE -
By the way, when i am coding this into html/css, i am using a high screen resolution desktop monitor (not the standard monitor laptop screen), i followed all the dimension designed in the psd from images to container divs & dialog boxes (designer has designed dialog boxes).
Now after i finished coding, followed the design (followed what i see on the psd), it looks ok when i view it in a browser with the current big screen i am using. The view i am seeing is the page looks the same in the psd and lot of spaces and not too compact to look. So everything looks good here.
Now when i view it in my friend's laptop with standard monitor screen, the page looks very compact, the images (from psd which i followed the dimensions and coded it in html/css) looks big and some of the elements i coded did not fit on the browser screen. Im sure the reason behind this is because i am using smaller screen.
Now i am wondering, I followed what the designer designed in psd. I followed the distances, dimensions of images, etc... Whos doing wrong here? The designer because he designed the elements in psd which is too big for smaller monitor screen? or me who does not know something or maybe missed something here?
Any guidance would be a big help
Cut out the images using the slice tool in Photoshop and save for web to optimise the images.
The width and height attributes on an image aren't necessary although they save the browser a small amount of time reading the images to work out the dimensions. Use CSS to control the size of the image; but obviously you should avoid stretching the image larger than its native size or it will become pixelated.
By default an image will render in a browser at its native size.
I'm kind of sure this is not possible but I ask because it seems unbelievable.
I have some elements styled for reponsive design
img {max-width:100%;height:auto;}
but the images have to be different depending on the device (I won't load heavy wide screen images on a phone device).
Since media queries aren't supported inline, I could go for a css background solution, but background-size is not perfectly supported and honnestly it would look more like a hack.
Can anyone confirm that "widely supported device related responsive images" are not properly possible ?
Thanks
If I understand your question correctly, you are looking for a way to deliver a different image depending on the viewpoint.
Adaptive Images could be the solution you are looking for. Easy enough to setup and confirm.
A second possiblity which might give you even more control is Adapt.js . I've used it with good success on several sites. You load a small javascript file in the head of your document. This tests viewpoint width and then dependending on the results, it will send the appropriate CSS file. It has wider browser support than #media requests.
If you could live with using background images, then it would work well, and since you could specify different images for different viewpoints, you aren't up the creek with browsers that don't understand background image sizes.
Good luck!
You could try the Responsive Img jQuery plugin.
It's made to automatically create and swap in different-sized images at different breakpoints, based on the container's width.
If you already have different versions on your image created and on your server, the plugin will just swap those in at the right breakpoint sizes.
Therefore, you can create new images for all the different breakpoint sizes you want, and the plugin takes care of the rest.
It's not CSS, but it gets the job done.
2014 update
There is a nice and new technique here :
http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/
It requires a small js, a 1x1px blank image, a few extra markup for img tags, and some .htaccess rules.
Seems to work fine so far.
See this:
http://real-sense.com/index.php?option=com_content&view=article&id=106
The set of vertical images on the right are being resized using CSS
.thumbnail-product-resize
{
width:144px;
height : auto;
}
Does anyone know how to do this in a cleaner way so I don't lose quality on the image?
I mean that if I had resized the image using photoshop, the text won't appear as blurry as it does here.
Tested in FF
Thanks
The quality of your images will depend on the original size of the image you use. If have a large image with good quality, say of size 400x500, and it is then resized in the HTML to 80x100, it will still be a 400x500 image. However you can only fit a certain number of pixels on a smaller image of 80x100, so this bigger image has to be sampled. This means that an average is taken of pixels and then made to represent a 80x100 size image.
If you want a more definite result you can change to original size of the image to 80x100. This will probably give you better results.
Once upon a time browser image resizing gave truly heinous results due to the unsophisticated nearest neighbor technique they used to scale images. Now they usually perform filtering when scaling and there isn't that much difference between in-browser resizing and resizing in Photoshop.
The real advantage to scaling an image before serving it to the client is that you aren't forcing the download of large images when they aren't necessary. Depending on the size of your images, this can significantly reduce your page load times.
One final thing to consider is that more and more people have devices with "retina" displays. For those users scaling the image before serving it will result in much less crisp images.
Here's an in-depth comparison of the image scaling methods used by various browsers: http://entropymine.com/resamplescope/notes/browsers/
Even if you had done this in photoshop those images you have would still appear pretty much the way do just now.
FYI you don't need to include height:auto in your CSS above.
Best bet would be to create a seperate set of thumbnails (using photoshop) which maybe just show a portion of the image.
Loading the thumbnails and resizing them with css the way you are doing is bad practice as you are still having the user download the large images first.
It is impossible to shrink an image without loosing quality unless it is an vector-image. That would mean that you'd have to use SVG. And considering the images displayed I don't think you wan't to do that.
Also you mentioned the cleaner way to do it, use photoshop or something similar.
Hey everyone, I hope I'm asking this question in the right place and I apologize in advance if it's not. I'm completely new to making websites and am still very much in the process of learning. My question isn't anything coding specific, but what I want to know is what are the general guidelines I should follow for making a site fit into a 1024x768 resolution? For example, working in percentages rather than pixels. I'm currently working on a 15inch macbook pro at a 1440x900 resolution for reference if that matters. I hope this isn't a completely vague question, and thank you in advance for any help.
This very much depends on the type of website you want to make. When you are learning, the best way is to look at other sites that look and feel similar to what you're trying to achieve and have a look at their CSS. Don't copy their CSS outright, but try to understand how they implement different parts of the design.
Generally though, since you are going the fluid layout route (the best way for a generic site IMO), is to provide relative values for widths etc., and follow that up with absolute values for the min/max values for width etc. For example you may have something like the following for some container div in your design:
div.contentbox
{
width:80%;
min-width:800px;
max-width:1280px;
}
You may have to look at floating divs to make sure they stay aligned to the edges at different browser sizes, you may want to look at keeping things centred using margin:auto.
There are loads of tricks you generally go through to keep a site looking same-ish in different browser sizes. The best thing for you is to start making it, and and when you have a specific problem, google it (someone's bound to have faced a similar problem in the past), and if you got nowhere or need a bit more help, ask here.
Google around for the "960 design": you're not alone if you fix your website content width to 960 pixels, which will fit nicely in 1024x768 screen resolution.
The other option is of course to generally use "fluid" layouting where the site will look nice on any resolution.