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.
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 currently have a page with about 20 or images with source data pulled from a database.
I display them at width of 100px and I have a hover function that appends an element with the full size image with a width of 250px.
I decided to use the full size version for the original image and just scale it down to 100px instead of using a thumbnail version. My thinking on this was that on this page it is very likely that the user will hover over most of the images so the page would end up having to load the full size version for most of the images anyway so why make them download the thumbnail AND full size version for each element. Also scaling from 250px to 100px didn't seem to display much if any distortion in the smaller element.
Now I am running my page through Google page speed analyzer and it really does not like me using larger than necessary images for the smaller elements. Of course it is ignoring the fact that those larger images are being used for the dynamically created popups.
In order to make my page play nice with Google's page speed tester I am giving in and using thumbnails for the smaller elements but I also want to prefetch the larger image to avoid an annoying delay when the user hovers over the element. This means I am essentially loading 2 versions of the same image just to make Google speed test not yell at me.
This seems ridiculous to me so I wanted to ask if this is really the best way to do this or is there another way to make my page play nice with Google speed test.
Thanks,
Adam
If you know what you're doing, there's no need to be a slave to the PageSpeed score.
Loading two copies of the images could make actual page speed slower. However, it depends on what you are trying to optimize for. Loading thumbnails first and then large versions could be better if you want time to full render to be fast (so the users can see the page) and then load the big images in the background to add interactivity later.
Or is it better to have fast time to interactivity, and time to full render doesn't matter that much. Then maybe having one copy of each image is better.
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 have a slideshow which will be displaying large 400px X 1000px images. I need to have thumbnails of each image in the slideshow, so I was wondering... will the page load faster if I simply use a second instance of the image but lower the width and height - will the page load the large image twice? Or would the page load faster if I load the HD image and a smaller thumbnail?
Generally, I would advise against using images that are larger than the intended use. I would, personally, definitely recommend serving a properly sized image. These recommendations are based less on page load time (as the difference in your case is probably negligible) and more about best practice.
A very handy php utility I've use a lot for stuff like this is timthumb
Generally it's a bad practice to create an image gallery of any kind using only full size images, lowering their dimensions when using as thumbnails. Yet if your case is a small gallery with < 30 images displayed per page, then this might do. In the other case scenario, imagine that a page has to preload all of the big images no matter if user would play the whole slideshow or not. This slows the page load time and generates unwanted data transfer. When it goes to timing, it would still be faster to generate thumbnails. A good tool for that could for instance be phpThumb which is able to generate any image size from its original and cache the output afterwards, speeding up the page load next time.
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.