Im using react/next.js and a lot of the images are coming from a CMS in the form of a link - However this causes them to load really slowly (300ms+ even for 40kb images) so i want to prerender/preload/presave them every time on build.
Is there any way i can do this given the links to the images?
Related
I'm wondering if anyone had experience creating a thumbnail-like preview of pdfs without saving images in a db. I'm storing url links to music pdfs and am trying to create a small preview of the pages so that clients can see some of the first page of the music in advance. I'm looking to see if it's possible without saving images of the page in the db and instead generate the preview on the page load.
I'm trying to redesign a small portion of vastly huge site and I was told that I can load custom images to Inspect Element (Chrome) if they are located in the same path as the stylesheet to which the site is remapped. (all done through css via 'content: url('...');') but the webpage is still looking for them in its own resources. So is there a way to use a locally stored image with Inspect Element?
When you're passing images in locally you can use, for example:
file:///C:/Users/[username]/Desktop/picture.png
So if I was to change a background image I would use
background-image:url("file:///C:/Users/Julia/Desktop/background.png");
But note that a lot of sites don't allow you to load local resources, so an error may appear in the inspect console when you try.
Actually, it only works with background instead of background-image (not sure if it works) but background without image seems to work. So put in:
file:///Users/[YourName]/Documents/picture.png
Like this:
background:url("file:///Users/[YourName]/Documents/picture.png")
I just decided to contribute because I just wanted to try it out myself as well and found this as the first answer despite the post being 2-3 yrs old; although for other users it might be helpful.
Also, this was done on Opera, but haven't tried it on other browsers, but it does work for me. Don't include the drive name. But you can simply copy the URL, by dragging the image into the browser (if it loads it) and copy the link. It should work (usually older browsers that don't auto-download the image).
Is it possible to set the order in which images are downloaded by the browser ? Ive got about 20 images on a page and looking the network tab in developer tools in chrome they seems to be downloaded in no particular order, and the order differs every time the page is loaded.
Ive looked at some lazy loading JS plugins, but these all seem to have the same core issue that they remove the image src and replace it later, thus forcing the browser to take images in order, but this is TERRIBLE for seo as a search engines bot will disregard an image with no src.
Is there any other way to do this ?
We have a web application with over 560 pages. I would like a way to catalog the site somehow so that I can review the pages (without having to find each on in the menu or enter the URL). Be very glad for ideas on the best way to go about this.
I'd be happy to end up with 560 image files or PDFs, or one large PDF or whatever. I can easily put together a script with all the URLs, but how to pull those up and take a snapshot of some sort and save that to a file or files is where I need help.
The site is written in Java (server) and javascript (client).
I found a great plugin for Firefox that made this relatively painless. The plugin is called Screenshot Pimp (hate the name, love what it does). It takes a snapshot of your browser contents and immediately saves it to a file on your hard drive.
So then I wrote a script that would pull each page up in an IFrame with the URL showing above that, and took snapshots of each page. It took a couple hours to cycle through the whole set of 560+ pages, but it worked great, and now I have a catalog of all the pages.
I have a website I am building for myself that I want to display the same image, but throughout the site in different sizes. So for example on the Portfolio page I want the image to be very large, but then have same image in thumbnail version on same page, and then on the landing page I want same image to be slightly larger.
What is the best and smartest way to go about this? It would be much easier for me to just make one image, upload to server, and then change the size however I see fit throughout the site so I don't have to upload multiple sizes of the same image. The goal is to scale/resize these so they don't look stretched.
The imageresizing.net library is designed to do exactly this. It installs on any Windows IIS server, and lets you add a querystring after any image URL to resize it.
Ex. image.jpg?width=100 would dynamically resize (and cache to disk, if enabled) the image.
The library has a long history of running high-volume websites such as social networks & photo album services, has a large community, and 39 plugins.
[DISCLAIMER: I'm the author].