Let’s talk image payloads

[bwood]

As you know I’ve been on a quest for speed. Let’s talk images. We can export as webp, but let’s talk stretchy images.

Most of my folks love the stretch images, but with every feature it may have diminished returns. In fact stretch images are so popular that some (me) use them all the time. Not good for speed.
I’ve also found on desktops, you also don’t need pop ups of images. A pop up of 12 images increases the payload. I’ve learned this.

How many use stretch on hero images? Do we really need them. How about a small hero, not stretched. 32kb seems to be too large an image. For discussion,

-Bill

[Acorn]

As you know I’ve been on a quest for speed. Let’s talk images. We can export as webp, but let’s talk stretchy images.
Most of my folks love the stretch images, but with every feature it may have diminished returns. In fact stretch images are so popular that some (me) use them all the time. Not good for speed.
I’ve also found on desktops, you also don’t need pop ups of images. A pop up of 12 images increases the payload. I’ve learned this.
How many use stretch on hero images? Do we really need them. How about a small hero, not stretched. 32kb seems to be too large an image. For discussion,
-Bill

Bill, you ask: "What value to the viewer does this hero image bring?" Usually nothing. It gets in the way of real content.
Different if it is proper branding.
Take the same image and make it fit the viewport but add it as a dimmed, muted background so its blur does not really affect the reading of material.
Look at simple CSS to change colours on scroll so there is always some interaction - https://www.talkgraphics.com/showthr...a-dynamic-Blur

For size, you can do a lot with 200kB - https://www.talkgraphics.com/showthr...920#post641920 - a looping video.

Acorn

[Egg Bramhill]

Here's the attached xar file that goes with our private messages Bill.

[Egg Bramhill]

I dislike hero images alltogether. I find that on visiting far to many modern websites the visitor is presented with one large image and needs to ALWAYS scroll down to reach any meaningfull content. Besides this, to be of a quality that still retains a good quality image on going full screen it needs a big image. Even with webp image reduction these can be large, well over 32Kb. And then the whole content of the image is not displayed, only the top, middle or bottom depending on set-up.

Instead create a good header image containing a logo overlayed your websites name in text. phone number etc Followed by a sticky menu. Make this no more than 200px at the top of the screen.

Other than tis is you need a large image, make it a background image on the pasteboard.

[bwood]

Here's the attached xar file that goes with our private messages Bill.

Thanks Egg - Truly appreciate it. I'm almost there. Iv had a couple of fails. The CSS code I did place web prop > website > head >

A small bar on top of the page became a placeholder, and that's where I placed the Body > html. The CSS worked well - forget the java script in the photo (i figured that out) The html scattered thru the page I don't get. Must play some more. My page is 900px but I may extend that.

-Bill

[Chris M]

What is classed as too large?
Other than checking the size of the export folder, how do you know?

The home page is the first impression a visitor is going to see. Just text gives an air of efficiency, order and the expectation that you will listen to the instructions given. It also requires a large font with plenty of white space to stop it being overwhelming.

A picture paints a thousand words and, depending on your site, is worth the payload in my opinion. Large images on every page, or numerous large images may well tip the scales, but a hero image is worth every kb. Books have covers and albums have cover art for a reason.

Examples of some of the different sites I've done, and my thoughts behind the home page:
Tyre Transitions - recycling. The home page needs to be impactful, and I went with green, because cliché, with the offending tyres filling your vision. The second page is more tyres, this time, dirty and messy. Last page is a tyre fire. The aim is for the visitor to be drawn into taking action against tyre waste and the tyres become more villainous as you progress.

Izzy's Bookkeeping - clean, efficient, orderly. I used horrible, corporate stock images to show Izzy means business, and some important looking icons at the bottom to convey awards and certificates to show competence.

Bryons Books - easy explanation. The image should convey a feeling of relaxing with a good book, a Bryon book, that friendly guy who the older generation of Australians may remember from the TV.

Blair Chambers - I'm adding this because it shows the other side of the coin. I wanted to give the impression of old, stuffy, rigid and absolutes. To me, this was panels, not full width, serif font for the titles and the obligatory scroll work to point out how important they are. Blair Chambers wanted pictures. With this page, I agree with Egg's opinion of having to scroll past something that doesn't add anything to get to the bit that does is not ideal. I don't particularly like this site.

Luke Mumby - DJ and producer, Luke, as a person, is the main character. His name is the brand, so up front and in yer face it is. If he were an actor, or someone who needs to be recognised by sight, then I would have used a press kit photo. As it is, most of the public will know the name and not him himself. Dark background to make the album art and posters pop. Minimal text to keep the energy and movement going.

Aztec Tiling - public facing tradesman. He rocks up in a ute (pick up), wears overalls and safety boots. His target audience are people wanting to make their bathroom, pool or kitchen look nice and be waterproof. I wanted the first image to fill the visitor's vision with, 'gee, this guy can tile.' The idea is the visitor will spend some extra time looking at the pattern. That's what patterns do, they capture the eye. By the time the brain is ready to move on, the visitor should have it implanted in their mind that Aaron can tile. Again, the image can tell the story far faster and better than words and is worth the compromise in size.

So, to address the original question. Should we use stretchy images? If it gives the impact you're looking for, definitely. Don't down the hero image, it's a hero, singular. One large photo on a small home page is fine in my book. You'd wear a suit for a job interview, and overalls to fix the car. Don't use a dinky little picture when you want to slap the visitor in the face with impact.

[Egg Bramhill]

Hi Chris, excellent points Just running through your sites here are my quick comments:

Tyre Transitions - Fantastic, does exactly what it says on the tin. A great example of what a hero image should be.

Izzy's Bookkeeping - The offset image works very well on this site.

Bryons Books - Not a great lover of this one so much. I think it would work better with the arched books & doorway were central

Blair Chambers - I agree with your comment.

Luke Mumby - If I was in my 20's/30's I'm sure it would appeal to me..... Like the scrolling image part though.

Aztec Tiling - That one puzzled my brain somewhat, I didn't see the tiles first-off, looked more like arched ironwork at first glance. I think it was the highly reflective work surface that caused this visual confusion.

Other than checking the size of the export folder, how do you know?

I use Firefox as my default browser and just click over any image and select 'View Image Info' which opens a page with all images on that page (Main & Mobile) giving names and filesizes, which I find very helpful. And again naming images helps in this, especially as Xara can now export parts of a page as svg's

.... but a hero image is worth every kb.

Yes but only if it's obviously relevant, which you have the skill to implement. On Bills original he had two hero images, one below the other, filling the whole 'above the fold' part of the page, which didn't convey museum to me at all, just night time outside photos of buildings with christmas lights.

Re size I notice that the background image on the Blair Chambers site is a 750Kb webp file. A visitor without webp access would have to load a jpg or png three times this size, 2000Kb's. Only you could confirm this, as my PC loads the webp image. It could be much smaller without any loss of definition.

[Egg Bramhill]

Bill,
Your menu is not displaying correctly because you haven't pasted the code in the Website / Placeholder / Head between <style> </style> tags. Same goes for the top of the page JS placeholder requires <script> </script> tags.

[Chris M]

Egg, as always, I appreciate your comments and views. Thanks to you, Blair Chambers is now a skinny little thing and nimble as a rabbit on the run.

There were several photos that I had neglected to optimise. Back on track now.

[bwood]

Thanks Egg