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.
Related
I need to implement image previews via thumbnails. Now I'm not certain how to implement it.
One option would be to do it straight with CSS, so something like this:
.thumbnail {
background-image: url(path/to/image);
background-size: 300px, 400px;
}
Is that practical? Are there any performance issues?
If you scale image in CSS to be smaller than it it actually is, browser still have to download the same amount of data. You should create separate file with the thumbnail.
With images, you need to focus on three things: size, format and the src attribute.
Image size
Oversized images take longer to load, so it’s important that you keep your images as small as possible. Use image editing tools to:
Crop your images to the correct size. For instance, if your page is 570px wide, resize the image to that width. Don’t just upload a 2000px-wide image and set the width parameter (width=”570”). This slows your page load time and creates a bad user experience.
Reduce color depth to the lowest acceptable level.
Remove image comments.
Image format
JPEG is your best option.
PNG is also good, though older browsers may not fully support it.
GIFs should only be used for small or simple graphics (less than 10×10 pixels, or a color palette of 3 or fewer colors) and for animated images.
Do not use BMPs or TIFFs.
Src attribute
Once you’ve got the size and format right, make sure the code is right too. In particular, avoid empty image src codes.
In HTML, the code for an image includes this:
When there’s no source in the quotation marks, the browser makes a request to the directory of the page or to the actual page itself. This can add unnecessary traffic to your servers and even corrupt user data.
Pro Tip: Take time to re-size your images before uploading them. And always include the src attribute with a valid URL.
To ensure your images load quickly, consider adding the WP Smush.it plugin to your website.
from: http://blog.crazyegg.com/2013/12/11/speed-up-your-website/
I was told that specifying inline width and height for all images will be good for SEO and also helps the site loads faster, like so:
<img src="http://www.example.com/images/free-size.jpg" width="200" height="400" alt="random image" />
Although I can still overwrite the inline setting using height:auto;.
So that images re-size properly when in different display platforms.
But just before I go ahead and doing this just want to reassure if these statements are true. Personally I feel dubious about fixing the inline dimension and overwriting using external CSS, just sound a bit hacky to me.....
I was told that specifying inline width and height for all images will
be good for SEO and also helps the site load faster.
Yes. This has traditionally been true (at least the "site loads faster" part).
By specifying the height and width attributes of an <img> the browser reserves a space matching those dimensions for the image while it continues parsing the rest of the HTML document. Then when the browser loads the image, the reserved space is waiting and there is no need to reflow the document.
Providing this sizing data results in a faster rendering process.
In contrast, if the width and height attributes are omitted, the browser will not know the size of the image until the download is complete, which forces the browser to reflow the document, slowing down the rendering process.
Now imagine a page with 50 images with no defined width and height attributes. The performance hit could be very noticeable.
The practice above represents the traditional view of image loading.
In contrast, some people are now saying that for responsive design the width and height attributes should be avoided.
Responsive Design does not normally use any width or height attributes
The majority of responsive websites do not use width or
height because they want the images to adapt to the screen size and by
using fixed width and height using <img> which would dampen user
experience and Google has declared this one of the most important
factors.
source: https://webmasters.stackexchange.com/a/68494
So there are arguments on both sides and the decision most likely depends on your individual case. As you make your decision here are some more details:
Specifying image dimensions to improve browser performance
Image width/height as an attribute or in CSS?
I was told that specifying inline width and height for all images will
be good for SEO and also helps the site loads faster.
No, it does help loading the site faster. It helps avoid flickering when rendering the page. If you want to load your images faster, make sure they have the same size as specified in the page and use a service like kraken.io to reduce the corresponding file size.
About SEO, it's improper image size and width for the screen size that can hurt your SEO. Google may consider you site as not user-friendly and/or not smartphone friendly.
If you do not tell the browser the size of your images then it must "build" the page not once, but twice (or more times depending on how many images you have on the page). It will build it once to display all the text, and then it will wait until an image is downloaded. When one image is downloaded the browser can now determine the size of the image and will rebuild the page to wrap the text around that image. This process will happen for every image on your page.
If you just specify the image dimensions, it will already know the size of the images and can use that information to shape the page. It won't have to rebuild the page a million times.
The best approach I think is to use the aspect ratio in css.
.img-container {
max-width: 500px;
aspect ratio: 2/1;
overflow:hidden;
}
The above css will reserve a container space for the image to load and prevent reflow.
I am putting some photos on my website and I do not know which syntax will load them quicker. My photos are usually 4300x3000 or 3000x4300 (which is from 7-10 MB per photo). I am using
#image {
max-height:500px;
max-width:750px;
}
When I viewed my website on a low-end PC, it took a lot of time to load. I do not want to use fixed height and width because I could have photos as big as 2500x2500 and that would cause a mess. What should I do to reduce the load time? Is there something like an “autoresize” that will keep the height to width ratio?
Compression
You should compress the images using some external software (if you are not using any other language apart from HTML and CSS). I would recommend Photoshop or GIMP.
That's the only way to improve the load: reducing the image weight. The forced resize is just loading the same amount of data from the server.
Improving quality of resized images:
If you are interested on improve the quality of the resized images, you can take a look at this article:
http://articles.tutorboy.com/2010/09/13/resize-images-in-same-quality/
Auto-resizable background
Loading image of 4.000 pixels is not a very common practice even in the websites with a full background. What it is usually done is loading a picture of about 1800-2000 pixels width and then adapt the image to bigger or smaller monitors using CSS preferable.
Here an article about that:
http://css-tricks.com/perfect-full-page-background-image/
Responsive images:
You can also load a different image depending on the predefined resolutions of your chose.
You will need to have multiple versions of each image though.
More information about it use.
My photos are usually 4300x3000 or 3000x4300 ( which is from 7-10
mb/photo ).
It has little or nothing to do with max-height versus height. The performance hit is coming from the original size of the image which causes the browser to:
download a large file
exercise a scaling algorithm against an enormous number of pixels
What should I do to reduce the load time? Is there something like an
autoresize that will keep the height to width ratio?
Create a smaller version(s) of the file when you upload it, and serve the small version. You can optionally open the original version when the user clicks on the small image.
You can create one or more copies of the file manually and upload them with different filenames.
A more elegant solution is to create one or more copies of the file programmatically (you didn't indicate server technology, but there are many options available). For example, Facebook creates six copies of each image you upload so that they can rapidly serve them in different places with the correct size.
Whether or not you do it automatically or manually, you may choose to adjust/crop the image to achieve the desired aspect ratio.
You should be resizing your images and loading those resized images instead if you want quicker loading. You could keep both large and small on disk and only load the large images when user clicks the link.
To resolve loading time
You have to compress your photos before uploading them to the server. Use export to web in photoshop, make sure the image size is reasonable (I would say never more than 1mb); You can also use image optimisation software (In Mac I would recommend JPEGmini).
You can, if you wish keep your large images in a folder in your site and link to them (so that one can download them if you allow this).
To resolve the ratio issue (square vs rectangle)
You can just use one of the properties and css will calculate the other. For example, if you put only
#image{
width:750px;
}
This will resolve the matter of things "getting messed up" if you mix rectangle images with square images.. Good luck!
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.
I just started using the chrome developer tools for some basic html websites and I used the audit tool.
I had two identical images, one with the height and width attribute, and one without. On the Resources section, both the latency and the download time were identical. However, the Audit showed
Specify image dimensions (1)
A width and height should be specified for all images in order to speed up page display.
Does this actually help? And are there any other ways to speed up page time?
This is only a splash page for the website I am building and as such it is only html, no css or javascript or anything. I have already compressed the images but I want to speed up load time even more. Is there a way?
Generally speaking: If you specify the image dimensions in the <img> tag, the browser will know how much space to allot for it and will proceed to render the rest of the page while simultaneously downloading the image. Otherwise, the browser will have to wait a few more milliseconds to get the size of the image from the image itself before rendering the rest of the page.
Since you have only a splash page, I doubt that there will be anything else for the browser to render, so it doesn't much matter whether you specify dimensions or not.