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.
Related
The problem I have is that I'm working with a CMS system Which is not originally designed by me. when I upload a product image to the cms at size 319x319 its size is around 13KB. The system is designed to cache the image and make a copy of it at 170x170, so it can be used elsewhere on the site, when i view that cached (smaller) image it remains at the same size, some on the website have even grown in size(memory that is).
Now i could only find one obscure reference with this happening in joomla, see link below
http://forum.joomla.org/viewtopic.php?f=709&t=821407
I'm wondering whether there is a way to prevent this happening as a way of decreasing my overall page size, or am I looking completely in the wrong place?
Thank you in advance for any help
You can use imagikmagick for image manipulation.
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.
Currently for my webpage's banner, I'm using http://workshop.rs/projects/coin-slider/ to have 4 images sliding. On the office's slower computers the coin slider seems to be very laggy.
My question is, would animating the 4 images into a single GIF file be better/faster? Are there better options to create a 4-image-moving banner?
Try using a lightweight image gallery, I found some here. The coin slider is lightweight 8KB but there are ones even lighter 2KB or so.
You could technically use a GIF but I think there are some mobile compatibility issues, you can also have better functionality with javascript/jQuery galleries.
As far as slow computers go there isn't much you can do about that, I wouldn't worry too much about it. Just do some extra research on how to minimise files and deliver a faster site.
Gif is not a wise alternet for sliders..you could reduce the quality of your Images and compress them..or if you are using large images and resizing them in slider, you can re size them with any image alteration tool. This will reduce image size too.
And I hope you are not giving images path direct internet links, cause this will automatically increase the loading time.
I know of 3 main ways to shrink images:
Using the img tag WIDTH HEIGHT
Putting all the images in a DIV and then scaling the whole div.
User zooming with ctrl + mouse wheel.
I have some pages with huge amounts of images. What I have noticed is that there is massive speed difference between the methods. Method 1 kills firefox very quickly. Method 3 seems to be the fastest on all broswers I have tried.
Does anyone know of any other methods? And is there a way through javascript/css to specify what the browser zoom level should be so I can at least use the fastest way?
The easist on the client would be scaling the images on the server and sending them to the browser, however it would take some serious CPU power on the server end (unless you cache them, and serve them up afterwards). You can achieve this with PHP quite easily. Depending on your purposes, you could simply write a script that takes all the images in a directory, resizes them and saves them to "thumbs/".
If you don't want to use anything on the server, I would either go with option 1 or question why there are so many images on one page to bein with. Try adding some pagination or something. If the browser slows down while using such a basic method of resizing images, there might be some refactoring in order.
If you're going to be resizing images why not have the images themselves be smaller. That will load the fastest out of any method you try. You can use PHP to create thumbnail sized images, and a link to the full sized image if they need to see it. Remember, even if you resize an image with the height/width the browser still loads the full image.
See http://articles.sitepoint.com/article/image-resizing-php for a tutorial on image resizing in php.
If I have a logo image, and I want to use it on another page where I require it to be a smaller size, it is my instinct to create a new image, resized with a graphics editor. However, I am hearing that it is better for the user if I instead refer to the original image and resize it with the browser by changing the height and width in the image tag.
So I ask the crowd, what is the best practice here?
Thank you for your time,
-- Henry
My default response would be "Resize it in a graphics application", but it depends on how you're using it.
When you leave image resizing to the browser, the original (full-size) image has to be downloaded before the browser can display it at a smaller scale. This means that you use more bandwidth and your webpage takes longer to load. However, if you mainly use the larger image throughout your site, then it will be faster to always use this image, since the browser can cache it.
If you're concerned about image quality, you would get better results and would have more control over the downsampling process using a dedicated graphics application to resize the image.
It's fine to resize images with CSS or the height and width tags. The only thing you want to be careful of is making really large images small because it obviously doesn't decrease the download size.
Doing this would work best when you're effectively caching your images so it doesn't get downloaded a second time. Then you will be getting a tangible benefit from doing so. I usually just append the last modified time of the image to the URL, eg:
<img src="/images/log.png?1233454568">
and then set the Expires header to a year from now. If the image changes, the mtime changes and it will force the browser to reload it.
That's suggested for images, Javascript and CSS files.
If the browser resizes the image for you by using height/width tag, you might end with a lesser quality image, really depends on the image type (like photo vs. simple graphics), so try it out in some common browsers. But resizing the image in a graphics editor is the only way to ensure a high-quality resize operation.
Create the smaller image in a graphics editor, for several reasons:
If users have not already cached the larger image, they will be downloading the larger file unnecessarily.
Resizing the image client-side results in some unpredictable scaling quality.
Doing it in HTML is ill-advised anyway, for presentational issues (such as element sizes) you should do it via CSS.