In my website (news aggregator) i am displaying articles boxes with title and image miniature linking to an external article.
<a href="website/article.html" target="_blank">
<div id="art000002">
<h1>Article Title</h1>
<img src="website/images/image.jpg" width="100px" height="70px">
</div>
</a>
For each article i am displaying a miniature to the og:image of the related external article.
When doing a performance test on my website load, it reveals that some pic are 2 or 3 mb size and since my site display a list of let's say 50 articles it went huge.
My question is : since my users don't need the full image , is there a way to display the og:image as miniature without importing the full thing size ?
Thanks
I'm posting as an answer as requested by OP.
Basically, because the images are external, you can't really control file properties like dimensions, quality, or file size using client-side (frontend) languages such as HTML/CSS/JS.
Option 1: Generate Thumbnails on Your Server
So if you want to reduce something like the file size of one of these external images, your best bet is likely to have some sort of back-end script set up to pull the images in advance. A back-end script (using something like PHP) could pull the images and re-save them on your server, reducing the dimensions, quality, or file format in the process to help reduce the file size.
Then on your aggregated article page, you would use the thumbnail images you generated, rather than the direct images from the external sources.
However, it should be noted this means you need to run this back-end script before users try to load any images/thumbnails, because having it run when they request a page/article/image still means the entire file has to be downloaded before being converted.
Option 2: Lazy load the images
This won't truly reduce the page load, but lazy loading the images can speed up the critical parts of a page loading, only loading those large image files after everything else has loaded.
<img src="article_full_size_image.png" loading="lazy" alt="Article Thumbnail Title" />
That gives you a basic lazy loading image, which can help make the page appear to load faster, though the actual external article images will still take the same amount of time to load. The browser will just wait and load them last.
Related
I once saw in a tutorial video about an HTML line of code that generates random images that it fetches from the internet and puts into the webpage, I remember it being a normal img tag but inside the ref attribute contained a link that now I don't remember what it was.
Searched about this in Google but all I could find was about loading images from the directory or using the help of Javascript.
This is possible by delegating the randomness to the server that serves the images. Consider the service provided by PlaceIMG. Setting any <img/> tag to one of their URLs will let your show a "random" image. What is actually happening is that the backend gets a request for an image and serves any image it wants.
You can do this with your own, self-hosted image server and in basically any server-side language and without client-side JavaScript. However, there has to be logic somewhere to do the randomness:
<img src="https://placeimg.com/640/480/any" />
There are many sites that serve as random image source, for example https://picsum.photos.
Working example (refresh to see the effect):
<img src="https://picsum.photos/200">
I keep running up against poor quality in my uploaded images on this site: http://www.rfm-inc.com.
Particularly with the slider image on the home page.
When I inspected, I noticed some HTML that says.
<img src="http://rfm-inc.com/wp-content/uploads/2016/10/Windmill2-1140x713.jpg" alt="windmill2" width="1140" title="Our machines. Our team. Your big ideas." class="woo-image slide-image" draggable="false">
Wordpress seems to be drawing on a different image than the original (which is at "http://rfm-inc.com/wp-content/uploads/2016/10/Windmill2.jpg".
When I change the inspector text to this, it works fine.
I'd like to turn this feature off completely, and rely only on my Photoshop and CSS skills to get the desired result.
Anyone know how to do this?
Thanks!
When you upload an image WP automatically saves the original file plus it also creates a series of thumbnails in different sizes. These smaller images will then be uses on your theme templates when needed in order to load the optimum size image every time and improve the load speed of your site.
By default, WordPress saves the “full” size, “large”, “medium” and “thumbnail”, and you can control the px size of these from Settings -> Media.
Now that being said the reason why you are seeing some images pixelated is because your theme is loading a WP generated thumbnail that is a size too small. In order to change that you’ll need to modify your code slightly in order to tell WordPress which image size to load. You can read more about WP functions to retrieve images in different generated sizes here: https://developer.wordpress.org/reference/functions/wp_get_attachment_image
I figured it out. Basically, there's a file in my theme (theme "Resort" by WooThemes) called "featured-slider.php". There was a line of code in there that was set like this:
$image = woo_image( 'width=1440&noheight=true&class=slide-image&link=img&return=true' );
and I changed it to this:
$image = woo_image( 'width=2160&noheight=true&class=slide-image&link=img&return=true' );
Now I need to figure out how to crop that image to a different height with CSS, but at least that part's over.
Thanks Guillermo et al.
On my website, images are not loading for some pages. The website is in flash. The address can be found at http://www.serenityspacharleston.com
More specifically, when you go to "Our Spa" or "Location" pages, the images show up, but on the other two pages, it only shows a percentage, as if the pictures were loading, but they never complete.
I verified the XML file and all links for the images are pointing to the correct placement, as far as I can tell (they are using the same format as the links that do work). Any thoughts on why some images would not be showing up? I can provide the source code if that is helpful.
I have a site that is basically one large page, it is a flipbook (powered by jQuery Booklet Plugin) that has 50 pages and has artwork on each pages. The size of this page is between 6 - 7mb in size. This is a bit large and slow connections can take a while to load the page. I am looking into breaking the book into multiple categories (thus multiple smaller pages) but in the mean time I have these two quesitons:
What is the best way to handle loading of pages that have a lot of content?
How do large sites handle these issues?
Note: I cannot use sprites for the images on the page.
Try compressing your image files with an image optimizer, like Kraken: http://kraken.io/
You could try lazy loading the images (http://www.appelsiini.net/projects/lazyload) - the images will not be requested until they are visible on the page.
Another option is to use the change event in the booklet script to load the content for that page using AJAX. This way not all the content would need to be downloaded initially, however you would see some delay when changing pages on the client side.
$(".selector").booklet({
change: function(event, data) { ... }
});
Most large sites with "endless" scrolling (like Facebook for example) use AJAX to only load more content when it is needed.
I understand the answer to this is most likely No... but I wanted to ask.
Is it possible to have one img start downloading first?
Basically I have a place holder GIF (that shows in the place of images as they download and I want to get that GIF downloaded as quickly as possible.
Am I able to somehow fast track the downloading of one img (the GIF)?
thx
Try putting an <img> tag with the gif as src before all other <img> tags and hide it with visibility:hidden
You could include that image as a data URI (if it's not too large), so that there's no separate network request made to fetch that image. It will, of course, increase the size of the actual HTML content served.
You could also preload the image using JavaScript by making a new image object and setting the src attribute.
You can have placeholder gifs, eg (in css)
img{background-image:url(default_image.png)}
However, there is no good way to force one image to load before another. Browsers can load in whatever order they want.
You can make it more likely that the placeholder is downloaded first:
If the placeholder is the same on all pages, it can get cached, so that on the next page, it is already loaded
Make sure that the placeholder image is early in the page (makes the browser start loading earlier, a browser will probably load images in the order they appear in the html). If image shouldn't be displayed there, just do something like width="0" or visibility: hidden;
Put the placeholder somewhere that the server serves quickly (avoid dynamically controlled folders - serve it in a static directory, eg. in the public/ folder for Apache)
Make the placeholder image small
Encourage caching by setting the cache headers so that the image expires in the far future (eg. 1 year), and so that the browser doesn't need to check back with the server. Also make sure private caching is off for the image (allow public server caching).
Data URIs are not that great. From Wikipedia:
Data URIs are not separately cached from their containing documents
(e.g. CSS or HTML files) so data are downloaded every time the
containing documents are redownloaded.
Referencing the same resource (such as an embedded small image) more
than once from the same document results in multiple copies of the
embedded resource. In comparison, an external resource can be
referenced arbitrarily many times, yet downloaded and decoded only
once.
If you use the placeholder image in 10 places on your page, you are going to have a much larger page.
You could try to dynamically load everything you don't want loaded before that gif (and is somewhat significant in size). Then, you could load that gif, and after it's done - load the rest of the content.
This could be done using Javascript. I'm not sure if there's already a library that helps you do this easily, but it shouldn't be too hard to do.
I'd start off using something along the lines of "on document.ready, load that important gif, then when that finishes, load the rest":
$(document).ready( function() {
var myImportantImg = $('<img />');
$(myImportantImg).on('load', function() {
// attach myImportantImg somewhere
// load rest
});
$(myImportantImg).attr('src', 'http://url.to/myImg.gif');
});
From what I read using Data URI Scheme in conjunction with css would be a good option:
img.placeholder {
background: white url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC') no-repeat scroll left top;
}
Include the above code in a <style>-tag in the documents <head>-section to make sure it's loaded with the page, and tag the appropriate images with the placeholder-class:
<img src="..." class="placeholder">