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].
Related
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?
It looks like I can't get the image links to optimize my sites like I could in the previous version. Is there a way to get these links?
Thanks!
Hey Ben i am having the same issues, what he is talking about is before page insights was with lighthouse as it is now, we were given the exact resource needed in the form google requested them to be. So if we had an image that was 4 mb and 2000x2000 but the view port of where the image was lets say 300x300, google would provide that picture in a zip folder along with all other photos in the same boat. Also if javascript or css needed minification it also provided those files for us. I do not see that option at all any longer and its really disapponintng as it saved me two steps of optimiaztion in regards to page speed and hoping we can get it back!?
I'm building an angular 2 website where only authenticated users can access content. Some of this content is peoples photos, to which access must be restricted to authenticated users only. Furthermore, these images should be delivered in an optimized fashion depending upon the device calling them; for example, a retina mobile screen, or an old-fashioned laptop.
Any ideas about how (or the best practices) to achieve this correctly?
We do something like this, but we don't use angular for it, we use css to determine which images to display. Separate classes with the images attached for them based on viewports. Are you wanting a angular 2 specific answer? Or will the viewports displaying different images work?
For a stats study, I am trying to automate a process which will grab the size of the home page of a domain including css, JavaScript, images, etc. How would I do this? I am willing to use any platform/programming language/browser.
I am trying to create some sort of hotlink protection system. I want to use my hotlinked images as an advertising means. Initially i thought printing the URI of the specific image on it, but because the length of this varies, printing it correctly appears to need too much effort. I am now looking into the possibility of printing the image and below it a text link, or just the text link.
I think i had seen this before, but i'm not sure how to do it. I searched around but couldn't find any help. Can someone help me out or point to a tutorial or something, to display text on hotlinked images?
Thanks!
You may be better off creating a watermark on the image if you want to protect your images. The problem though with watermarks is that they detract from the view's experience, especially when they are obtrusive.
If you want to intercept requests to your website directly to your image you can add hotlink protection.
If your host has cPanel here is a tutorial on how to setup Hotlink Protection on your website using cPanel.
But it sounds like you want to 'roll your own' with custom text over your hotlinked image. To do that you'll need to intercept the image requests. How you do that will depend on if your host is Windows or Linux based. With Linux based you can use your .htaccess file to redirect image requests to a script of your choosing. In Windows, I'm not sure how to do it (perhaps someone else can elaborate?).
Here is a tutorial on using htaccess to stop hotlinking.
In the above tutorial it shows you how to redirect requests to your images to a static link, but in your case you can redirect them to a script or a different hidden directory (e.g. /image.jpg would return /hotlinked/imageWithText.jpg), that would have text overlay.
If you need the text to by dynamic then you can redirect the request to your favorite web server script like Perl, PHP, etc. that will then load the image and add the text overlay.
Take care.