As a general process, I’d scale the image down to 800x600, save it at jpeg level 8, and remove the exif. Since they’re both Adobe products, I would bet Lightroom has those functions and would generate the same sized output, though I can’t confirm.
To my understanding, your retina display should have twice as many pixels as it advertises to a browser, so if these are css width:800px images, the display would prefer you offer up 1600 pixels for best display. I wonder if you don’t do that, if the display actually looks more pixellated than a non-retina display.
Excluding mobile users for a moment, what are the “ideal” dimensions on a photo that is designed to be the focal point of your web page?
And, maybe a dumb question, should you always make your photos dimensions so that the image fits in one screen without the need to scroll.
When I set the long-side to 800px, it was for photos that were mostly portrait, and it seems to me that you have to scroll down a bit to see everything, but I felt that was better than a smaller picture with less detail.
So should I be doubling the dimension of my photos for Retinas? (Of course that would double the file-sizes too, right?)
I would think with all of the high resolution monitors out there, that you’d need a pretty large photo to look good.
Unfortunately it seems the Internet’s download speeds can’t keep with the need for bigger photo dimensions and file-sizes?
I use around 800-1000px as the wide/full page version of my web sites, in that I don’t have any media queries above there. Since I don’t personally browse larger than that, nobody else should
And yes, I don’t think I ever put up images that require vertical scrolling.
Well you can go on all day trying to improve images for display, and yes you could double up the pixels for retina, which will actually quadruple the file size. But for my purposes, my photo web site is not there in an attempt to demonstrate every single pixel as it is rendered by my camera. It is there to show a good representation and hope folks will buy something. So I don’t try to track growing monitor sizes, I try to give a good quality image that shows off the photo.
The Good:
Nikon View is really a nifty little program designed with photographers in mind - go figure - and it’s free. Where I currently am at, Nikon View can do everything Lightroom can do plus more plus it saves me $20/month!
It gives me the ability to adjust settings and see a guesstimate of how that impacts file-size, although the number it gives is usually underestimated, but still.
I took a raw photo (4MB) and I created 800px long variants. To me, the best compromise was 80% quality which took me down to a 243KB file with little compromise in quality from the original.
Then I took the same raw photo (4MB) and I created 320px long “thumbnail” variants at 100% quality down to 10% quality. (That is smallest it lets you go as far as dimensions which is annoying, but manageable.) Surprisingly, you can very little degradation down until maybe 20% quality on the thumbnails.
The Ugly:
So I created about 70 new thumbnails at a reduced size of around 80KB versus the originals of 250-300KB.
By the way, I have my own web server and am using CloudFlare. So I expected to see a big improvement. Instead, you could still see most of the thumbnails being painted on the screen, with the last 6 taking up to 5 minutes to complete.
That is worse than the days of 56K modem?!
What in the world is wrong?
This web page is like 300 lines of PHP and HTML, with not Javascript and no database connections or other crap. And yet I cannot load the page sufficiently for just myself. (What happens if 200 people hit that page at once? Thermal meltdown?!)
I did a speed test online and it gave me an “F”, but the results weren’t as bad as my results. It said the page fully loaded in 3.4seconds and is 32.6MB…
It goes on to say that I got an “A” in all things HTML/CSS/server related and seems to blame: Optimize images, Serve scaled images, Leverage browser caching.
What is strange is that when I load the enlarged photo which is currently around 400-500KB, it loads instantly.
For some reason my gallery view and those darn thumbnails are wht’s killing me.
And of all the stumbling blocks I have had, I think this one will sink my site being viewed as a “success” by others…
I know you are reluctant to reveal any URLs so may I suggest supplying about 70 random photos from public sites and I will slot the images into an AmpProject web page and supply the source which you can modify to remove my personal data.
You never mentioned which site tested your slow loading site, here is mine:
I don’t mean to be a jerk, but it is entirely of pictures from a Holiday party and I’m pretty protective of people’s privacy. (And scared with GDPR and California Privacy).
Let me think what else I could do…
I just called my web host who is pretty knowledgable and they say its not my server but my images. I think my WiFi is throttled so that doesn’t help. But the tech said my page loaded in 10 seconds on his computer and 28 seconds on his personal smartphone.
Better than 5 minutes, but still pretty abysmal for 70 X 80K thumbnails…
That would be a lifesaver if you could help out with that.
Btw, my web host agreed that (you were right) and AMP may be the way to go, although I’m bummed that a 32MB web page would choke the modern Internet?!
Yep, that is the one I tried.
Like I said, it gave me straight A’s for things like HTML and CSS and straight F’s for image-related stuff.
I am starting to appreciate that when I go to the NYTimes or YouTube or whatever that there is A LOT of technology behind that website to make things load instantly!
I feel like I am on a 28.8 modem!!
P.S. @John_Betong, since I don’t know any JavaScript, realistically, how hard would it be to incorporate AMP into my webiste?
My site is only 4 (main) PHP pages and each script is maybe 100 lines of PHP and 200 lines of HTML. No database or plugins. Pretty simple, except for some kcikas CSS frome Coothead and Ray.H!
If I don’t get this done by this Friday then it sorta torpedoes my who - supposed to be before Christmas - surprise for people…
Remarkably easy as long as certain files are loaded and not modified. Also the Amp web page needs to be validated with an AmpProject Validator. I prefer to use a Browser Amp Validator Extension because it is dynamic.
Following is the index.php file that includes a couple of files and all the image files in the imgs/ directory. Images are responsive and the max-width inherits the parent width.
If and only if the pages validate then Google will render images from the CDN.
<?php
declare(strict_types=1);
$source = highlight_file('index.php', TRUE);
// CAN BE MODIFIED
$style = file_get_contents('incs/get-heading.php');
// DO NOT MODIFY
require 'incs/get-heading.php';
?>
<body>
<div class="tac">
<?php require 'incs/menu.php'; ?>
</div><!-- class="tac" -->
<div id="foot" class="bg6 lh2 tac">
<i class="fll">Wonderful place for a footer</i>
<a class="flr" href="#">GMF </a>
Design: John_Betong 3.1.8
</div>
</body>
</html>
I am looking at your code now along with AMP’s website. (Looks complicated…)
Here are some things that jump out at me so far…
1.) What if I don’t know the size of my images?
Um, I tried to build a responsive site that doesn’t care what photos you feed it - within reason - it simply takes whatever in in your photo directory and displays them.
2.) Not to get too far ahead, but how does AMP impact how I already write web pages?
Am I going to have to throw out all of my existing HTML and CSS to use AMP?
3.) How does AMP impact responsive design? (There is a video on AMP’s site that talks about responsive design, but to be honest, the guy’s accent is so thick I couldn’t understand him.)
I spent a lot of time tweaking my HTML and CSS - thanks to everyone here - and I sure hope I don’t have to throw that away just to use AMP - especially since I just want help in making my images load better/more smoothly!
4.) Can I just make my photo-gallery.php scrippt an AMP page and leave my other pages as PHP/HTML pages?
I highly suspect you are not loading the thumnails on your page, but rather you are loading the full images, and just sizing them down to thumbnail display size in the browser. That’s what needs to be fixed, not jumping to a different viewer. How do I know this?
70 thumbs at 80K each is 5.6MB. A large page, admittedly. But not 32.6MB large.
70 “thumbs that are actually your full images” at 500K is 35MB. Huge, and in the same order of magnitude your speed test is telling you.
Also supports the comment that the thumbnails take long to display
Also supports the comment that the enlarged photos display instantly (yes, because they’re already loaded, you just called them “thumbnails” when you loaded them last.
I would look very carefully at what your <a href="enlarged"><img src="thumnail"></a> code looks like. I suspect the error is right there.
I made some last minute changes and forgot to mention that the two hardcoded URLs in the inc’s/get-images.php need modifying to your own local and ronline URLs.
All images in the imgs directory are loaded and their dimensions calculated and displayed in the special <amp-img script.
Try adding your photos to that directory and they should display.
The called function to display images requires the URLs of the image path to be set.
Amp requires specific links in every header that load their own JavaScript and a style sheet. Your own stylesheet can be loaded and has to confirm to their standards.
Which particular video? Ignore that video and find another that is understandable. There are many others that I find understandable and also lots I do not understand,
Unfortunately I do not have your script or the images or a list of public images or the hardcoded URL to your site so I had to use my own,
Try and get my script to work by changing the URL in the load function, then add your own images. Upload and try again.
Once you get that far then replace my style sheet with your own and add your own body script. Validate to ensure everything is ok.
I was trying to make it simple to create a template that could be modified.
Okay, you bring up some points that have been in the back of my mind, so let’s do a “deeper dive” if we may!
@coothead was a real hero over Christmas break and he helped me to accomplish a seemingly petty goal which was that I want users to be able to load a gallery (of thumbnails), and click on the gallery audio player, and then be able to continuously listen to the music as they browse (i.e. view the larger photos).
He showed me a trick where I could display the thumbnails when my photo-gallery.php page loads, and then when an < li > gains focus, it would use CSS to create a modal window and display the detailed picture.
I asked Coothead if I had to worry about his code loading thumbnails and the enlarged photos, and he said, “No.”
Attached is a simple sample of how my photo gallery is set up. (The example was getting help on making videos also work with the set up. Obviously, the real gallery would have a grid of thumbnails!)
Where in this code are the actual thumbnail image and enlarged images names to be found? The CSS is showing styling for different sized boxes, but even if I wade through and figure out how this actually works, it isn’t even your implemented code.
Can you not just bring your web page up, look at it in the debug console, and look at one of the thumbnails and see the code, see the file name, and see how big the image really is?
There is one < li > in a parent < ul >. When the page loads, it loads the thumbnail. When you click on the thumbnail, CSS (should) enable the < div > in the < li > which is where the larger photo/video is at.
My code is extremely well commented. Just look at the “sp_video-on-modal-edited.html” file and the comments will lead you to where the action is at.
How would i tell in Firefox Developer Tools if the image is being loaded prematurely?
(I just know how to use that tool for looking at the CSS and how things are styled.)
After supper, I am going to try and cripple the code that points to the larger images, and see if that speeds things up. (If the page loads faster, then the larger images must be inadvertantly getting loaded.)
Well, you’ve been looking at that code for a while, I’m just seeing it now for the first time. From your description, please tell me how big the file images/poster.png is on your server, as I assume that’s your thumbnail. Then in the div below (for which the comment is “Video”) I really can’t find any image file. Coothead’s no bozo, so I’m sure this works, but it’s not immediately obvious to me.
As to the console in Firefox, you could just bring up your page, right click on one of the thumbnails, select “Inspect Element” and you should get the console and a little view of that image that shows the size (in pixels). If that’s not the size of the thumbnail you expect, we’ve got a problem. You could also look at the “Network” tab in the console, and see all the images downloaded on that browser refresh, and the size of each one. Presumably they should all be the size of a thumbnail, not of the large images.
