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/
Related
I have never thought of this before, but am really curious. So here is the html:
<img src="/employees/img/uploads/users/2013-09-12-115644edif.jpg" alt="Employee" class="user_img" />
and here is the css:
.user_img{
width: auto;
max-height: 200px;}
The original picture is like 1.5 MB in size, so after the css is applied, the visual size of it really decreases. What I wonder is if user's browser needs to load the full sized picture in this case, or will it only load the small one?
CSS is applied by the user's web browser, which is running on their local PC. After the web browser downloads the image, it only then applies the CSS scaling to display it smaller than the actual image size.
As a result, the answer is no. The user must download the entire file, even if CSS is used to resize it smaller.
To make the image smaller before sending, you can use a server-side language such as PHP, and generate a thumbnail of the image that is the appropriate final display size. This not only will make your page load faster, but will reduce bandwidth requirements as well.
The scaling via CSS happens when the browser is rendering the page, AFTER it has downloaded the full image, so no.
HTML, CSS and JavaScript are client-side languages. Everything is transfered to the client and then the transformations are made.
If you want to reduce the size of the image before sending it to the client, you must use a server-side language such as PHP.
The fact that you resize the picture (scale it down) doesn't affect the image 'physical' size. Otherwise everyone would use css sizing as 'file' resizing technique.
No, CSS only scales your picture down(or up), but size of file is never changed.
A website that I'm currently working on has a number of slideshows. The issue is that the page loads and then the slideshow loads a second later. How do I improve loading speeds of the images? The site is hosted on Amazon. The url is http://gatehouse75.com to see what I mean.
There are a few ways you can do this:
Optimise image sizes. For example, images used on the front banner are 1920x1610. However, most screens are not that large. Use different sizes based on view port (screen size).
Reduce image sizes by changing compression and/or using a different format.
Preload images when the users visit certain parts of the site. That way when users get to a page with a gallery the images get served from the browser cache.
Finally, you can put a "loading" notice while images load if none of the above suggestions help. This is good for usability.
Convert your jpgs to lower quality and your logo (in png) to gif in grayscale. This should save a lot of space.
Right now the home page slideshow images are scaled to 1349 X 429 for me. I am using a laptop. The actual size of the images on the server is 1920 X 610 (at least the one that I inspected). This means two things: (1)The image served is a larger filesize than need be which takes bandwidth, and (2)that the served image needs to get scaled down which takes client time.
What is the max width for this slideshow? It is a fullscreen slideshow, so I understand why the chose to use the bigger image. Though maybe you can take the original compress and resize in a way that is acceptable?
You can also consider having a loading .gif in place while the content loads.
Also, go through and minify linked files... css, js.
1. Follow image file optimization best practices.
2. Use a fast CDN combined with a smart caching strategy.
3. Put your above-the-fold image refs (especially large "hero" images) in an inline stylesheet, immediately inside the <head> tag, in the html element selector, like this:
<head>
<style> html { background: url(/hero.jpg) no-repeat -9999px -9999px; }
</style>
This will get you the fastest time-to-visible for the images that impact perceived page speed the most.
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!
I'm working on a website that's already been designed by someone else. The designer has used a big image (900x700 100KB) which contains a big logo right across the top, then the background for two columns.
This image loads every time a page is loaded as it forms the basis for the website. What should I do with it to improve loading time?
I'm considering splitting it up into two or more images, especially the logo on the top. Does splitting up images like that decrease loading time in any significant way?
Thanks
-edit: Also, all the images are .jpg, would changing this to .gif or .png help anything?
Things to try:
Repeating backgrounds: If part of it can be broken off into a repeating image, you can reduce file size a lot that way (divide the image into the parts that don't repeat, such as a logo, and the parts that do, and then use CSS to repeat it as a background).
Caching: You should look into whether the image is properly being cached or not. There's no reason it should reload on every page request. If the HTTP headers correctly allow caching, then the browser will not request it again until the image is cleared from its cache.
See http://www.mnot.net/cache_docs/ for some info about cache control with HTTP headers.
Use the Web Developer toolbar for Firefox to check the headers for the image (hit the image URL, then click Information > View Response Headers)
File quality or type: Also, you may be able to use Photoshop to resave the image in either a different format or lower quality. GIF and JPG images can have greatly different file sizes for the same image depending on the content of the image (GIF is very good for graphics with limited and/or repeating colors, especially when large portions of the same color run in consecutive horizontal pixels). If the image is photo-like, JPG can be very good because high compression can be disguised in very detailed images.
Crunching (removing unnecessary metadata and finding a more efficient compression algorithm) the image with a decent image compressor is a good start. Reducing the number of colors, changing the format (GIF or PNG24 to PNG8) when possible.
This may be totally obvious, but... defer it until the page is fully loaded (if the contrast of colors in the background image are not needed to make the foreground text readable).
An easy way to do this is to make the css selector for the background image dependant upon a class in the body like:
...
<style type="text/css">
/*<![CDATA[*/
body.page-loaded{background:url(/path/to/image.jpg)}
/*]]>*/
</style>
</head>
<body class="page-loaded" onload="document.body.className+=' page-loaded';">
...
Of course, the "onload" attribute in the body tag should be migrated out (to a SCRIPT tag at the bottom of the page or in an external JavaScript file). Also this code doesn't require any JS library to run; it should probably make use of an event observer.
The two things you want to do are:
Convert it to PNG (10-30% smaller than GIF on average); and
Cache it effectively.
The way to cache it is to version it and use a far future Expires header. For versioning I generally just use the mtime (last modified time) of the file as a query string:
body { background-image: url(/images/background.png?1232343455); }
See Speed Tips: Add Future Expires Headers for adding the Expires header. You can do it with a script or with Web server configuration. The reason you need the version is that you can change it to force a reload of the file otherwise you need to rename it whenever you want to change it.
This way the background will only get downloaded once. Splitting the file into several will actually worsen the situation as browsers tend to limit the number of concurrent downloads and you'll be downloading more data overall (more HTTP headers plus image file overhead).
Putting the image on a CDN may also help (along with the other things mentioned), because people may load images from the CDN faster than your server.
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.