I want to have a website page load images faster or where the images don't stop the user from seeing the text on the pages before the images finish loading.
1. if I have text on a website page. Does the text render first so the user can see text while the images are still loading?
2. If i have 3 mb of images and have my server that is hosting the website render 1.5 and then move the other 1.5mb to something like flickr and have the image source point to flickr, will that be better and load faster. Or say I just have all the images pull from flickr?
Please help me.
Its a WordPress site, and Clouldflare free cdn does something weird to my theme. So not an option. I also don't want to lazy load for other reason.
EDIT : o yea, if I host all the images on Flickr does that give away link juice (Domain Authority Rank)?
Images do increase overall load time, but they aren't render blocking. The whole page will render (barring render-blocking CSS or Scripts) and images will pop in when they are done. If you want to avoid that flash, you can lazy-load them, or otherwise put the final image's sizes on a container element, so the text is already "moved".
You can't really "Speed Up" image loads. The best thing to do is cut down on the number of images, if applicable, and lazy-load any that don't need to be requested initially. The next best thing (and arguably more important overall, I suppose) is to optimize your images. There are a handful of WordPress plugins that will do this for you, or you can do it in PhotoShop - and even some image CDN's will do it. This basically means, don't load a 1MB image if you don't have to, for "web display" purposes, you can serve a 200kb image that looks almost as good.
A side point, you can "speed them up" a little by having them served from a faster server, but that goes for anything web related. Throw it on better hardware to get better performance (for the most part).
If they are large images, you should first and foremost, optimize them. Make sure they are the smallest file size possible. Also, don't bother splitting "1.5mb" of them over to another host. Either upload them directly all through a CDN (some even tie into your WP Library, like Cloudinary), or keep them local to your site. You'll save yourself some headaches later.
If you have a photo heavy website (photography or other types of galleries), 3mb isn't really an awful lot - but again it's best to serve a more compressed image, you can even link the image or a button to the "full resolution" one.
Related
I have developed wordpress website but after hitting it is taking so much time for loading , this is my website link http://www.dahotreanddahotre.com/.
Tell me any plugin or manual setting such that i can decreases the loading time of my website?
There are a few things you can do:
Cache
Use a cache system: https://wordpress.org/plugins/wp-super-cache/
This will let you serve your fixed pages a lot faster to the user.
Minify
Use some minifier: https://wordpress.org/plugins/fast-velocity-minify/
This will make included javascript, css files smaller and thus they will take less time to load
Identify image needs
Looking at the network dev-tools a lot of the loading time (4 seconds +) comes from huge images:
1st image (1.47MB): http://www.dahotreanddahotre.com/wp-content/uploads/2019/03/We-intend-to-be-your-financial-lifeline.jpg
2nd image (1.64MB): http://www.dahotreanddahotre.com/wp-content/uploads/2019/03/We-are-startup-friendly.jpg
Use a Image compressor before uploading them and don't upload images that are bigger than you need.
For example image2 is: 4,300px × 2,862px this could be reduced and compressed.
By decreasing it's size to: 2,150px x 1,431px and compressing it, it becomes only: 350kb
Checking unreachable resources
Still looking at the dev tool I could see some fonts which where giving a 404 error (almost 2 seconds loading).
This means the font is unreachable but the browser still spends time to try to load it.
Make sure all resources are reachable and unused one are deleted.
Use good hosting
Avoid bunch of plugins
Get a custom wordpress theme starting from scratch
Avoid page builders
Optimize images used in website
I am interested in adding a landsacpe footer on my website but the image size is 115KB and will load on every page... Is there any effective way to load an huge image such as this one:
http://gyazo.com/5b1b7312ec4370873368df0181e41b13.png
Here's a few things that may help you:
EDIT: I tried the second tip in the list below (tinypng.com) and it reduced the size of your image with 71% to 39.1 KB. So that's a big win.
Make sure to set the cache headers on your webserver so that the browser can cache the file. Also use the same URL for all other times you use the image. Doing these two simple things will make sure that the image will only get downloaded the first time the browser requests it. All other times it will be loaded from the browser's cache.
Make sure to check if the image is as small as it can be. If you use a PNG then use tools like https://tinypng.com/ to squash all metadata out of the image. If you use a JPEG then maybe lower its quality. If you use Photoshop make sure to "save the image for web". This will also reduce the size. For photographs you are mostly better of using JPEGs, for text or other images that need to be lossless use PNG or GIF.
Loading images will not really slow down your page that much. Not like JavaScript anyway. Loading Javascript will block the rendering of the page until the JS file is downloaded unless you use special loading techniques. That is not the case for images: the page will continue being rendered and the user can start using the page.
If the image is placed using an IMG tag the make sure to set the width and the height of the image in the CSS (or using the img width and height attributes). That will make sure that the browser does not need to reflow the page when the image is downloaded. It will know what size it needs to be even before the image is downloaded.
There is a maximum number of parallel requests per domain that the browser will do. If the image has a very low priority you could postpone its loading and wait for the onLoad event. This will make sure the other resources (with a a higher prio) will be downloaded first. This will require some JavaScript, but not that much (Use an image lazy loader, there are many).
As I said in the previous item the are a maximum number of requests PER DOMAIN. This is why you could also create a new (sub)domain and load some content from there. It will increase the total number of resources that will be downloaded in parallel. using a CDN will also help here because they also have a separate domain (and they are optimised as well).
If you want to read some REALLY GOOD books about this kind of optimising, read these:
http://www.amazon.com/High-Performance-Web-Sites-Essential/dp/0596529309
http://www.amazon.com/Even-Faster-Web-Sites-Performance/dp/0596522304
I have a huge image that is going to be uploaded to my server. The width and height are for example: 2000x2000. I have multiple places in my code where I need the image to be 1000x1000, 250 x 110 or like 100 x 50. When they upload the image, should I make ASP automatically re size to these dimensions and save them on my webserver like image-250x110, image-1000x1000, image-original, and image-100x50 or is it fine to just to get the original image and re size on the fly through the code then show it to the users. I'm asking this because I'm worried that if too many people go on your website, re sizing the original huge image all the time would take alot of processing power and slow down the app. Or would something like this would be fine: http://www.hanselman.com/blog/NuGetPackageOfWeek11ImageResizerEnablesCleanClearImageResizingInASPNET.aspx
Your certainly want to resize the image when its uploaded since resizing a huge image of 2000 by 2000 pixels can easily take 2 seconds, even on a fast server. That's a delay your users are unlikely to appreciate.
What you posted, ImageResizer, is going to be your best solution, for many reasons, including:
There are a lot of potential problems when writing your own resizer, as detailed in 20 Image Resizing Pitfalls, including performance and stability issues.
If you redesign your site and want to change those image dimensions... it will be painful.
With ImageResizer, you only have one image - the nice big original image. All subsequent versions are served up (and cached) via the URL call. Note that the cacheable-version of ImageResizer requires a license.
ImageResizer will likely do a better job resizing images than yours will, both in quality and in file size, and also comes with filters, watermarking, and other features.
Resizing on the fly is a really bad option as it will eat up CPU.
If you can't pay for the cacheable version, you CAN use ImageResizer to resize the images on upload and save off the 3 versions or so of the images that you want.
I've used both methods -- written my own and used ImageResizer... ImageResizer is the way to go in my opinion.
I'm looking for good articles around image resolutions, size and quality for web pages, especially around how this affects web sites currently.
I'm working on a web site for a client, and as an honour graduate in arts and design, the client is persistent that her 7mb - 10mb images are sufficient for her web site, totalling in at almost 400mb. I've tried arguing bandwidth limitations and performance but these are not holding ground.
The standard for images are at 72dpi, no larger than your standard screen resolution (1024x768) and above 1mb in size (which is already too large in my opinion). my argument is that loading 7mb+ files into a gallery on page load will seriously hinder the users experience if they have to wait a long period of time for 7 - 10 images to first get streamed into cache before the page is loaded, and even testing this with lazy loading plug-ins (we don't want to go flash) and late-loading has performance penalties.
Does anyone on here have any recommendation around image size, resolution and quality? We don't want to loose the HD quality of the images when users navigate the gallery (obviously we'll have to thumbnail them first)?
i have read guidelines before (when we still used 1Mbps connections or less) and have been following these until now:
high resolution images should not be bigger than 1.5 - 2MB. making it this big is like bigger than the webpage contents itself. try checking http://deviantart.com on how they place big photos in their site and check the image properties using the EXIF if any
dimensions should be enough to be viewable in the browser (and avoid scrolling)
compression is to be tested. it's a case to case basis, no setting is the same for everyone. high quality, high compression without visible quality loss is a practice in web design.
JPEG is best for images, PNG for the layout and GIF for icons.
try loading images in the background when the browser is idle using javascript. that way, they are in the cache before the user knows it.
more on the webpage design, avoid using heavy graphics on the site itself, making the site fast so we only wait for the image.
If you really boil it down you don't have a choice.
You are talking about HUGE file sizes which are not realistic.
You need to download a smaller version. After that you can subsequently download versions with increased quality or offer the full image with an onmouseover or click.
Some general guidelines:
Thumbnails (of course)
Offer multiple image sizes (small, medium, large). While I understand the UX implications of giant images, some people do have fast connections and large displays and/or will be willing to wait for a high-resolution version. But it shouldn't be the only option.
Try different compression levels to see what works best for different sizes. Using one compression level across the board doesn't always work. Again (depending on the source material), there may be a need for near-lossless compression at the high end. For example, images for print, CAD drawings with fine detail, etc.
Use sequential loading techniques if applicable. For example, if you have ten images to load (optimized or not), make sure that the first visible one is the first one actually requested from the server.
When it comes down to it, your client is under the impression that asking to shrink her image represents a 'compromise' that only results in damaging the quality of the image the user receives.
The truth is, of course, that an 8-10MB image is so large that it would take most users many seconds to download, creating a horrible user experience that will increase bounce rates.
Show your client a side-by-side demo of her website loading a handful of web-optimized images, and show her a site loading 8-10MB images, then let her decide. Ultimately, your job as professional is to assist her in making good choices, but she's free to make bad ones if she insists upon it (it's her brand, money, and right).
Something else you can potentially do is detect the size of the window and load larger images if the user is on an ultra-high-resolution monitor or if the window appears to be especially large.
Best of luck!
How can we protect our image being copied from our web site?
Can we disable copying image content from our website or any?
You cannot stop an image from being downloaded from your web site. If this image is visible somehow on the site it means that clients already have it. You could add watermarks to the original to claim copyright. Some other techniques might involve incorporating the image into a Flash movie which would make it harder but not impossible to retrieve.
IMHO clearly stating copyright ownership of the images somewhere on your site should be enough.
You cannot protect your images from copying. You can add watermark or some other artefact to it to discourage people from copying it, but you cannot prevent it (if you want it to be shown on your webpage, it is publicly available).
You may find this article as useful: Your images are a virus. They are EVERYWHERE on the Internet
You can't prevent image copying from your website, if it is served to the clients' browsers it can be copied.
"User saw your images" means, he/she have already downloaded to his computer. But maybe you could put some trick to block users who are not advance on computer usage.
For example;
Disabling right click with javascript etc. (Not block us but blocks someones :) ) as described
You can try using a script and a transparent Gif or PNG overlay that is positioned over the image.
If the user back click they would end up with a blank image instead. This can be a little frustrating for them, and can sometimes be a bit difficult to figure out.
This may offer some low level help, unless the person is using a screen capture tool.