Size of images for fullscreen slideshow

[Lori K Illustration]

What size do you recommend to make images for a fullscreen slideshow? And is there an way in Muse to automate adding watermarks to the images?

[NathanUpchurch · Accepted solution]

Hi Lori,

Size all depends, for a desktop site I'm currently using images around here: 2048 x 1365, which work well. Of course, I open them in photoshop to get the quality setting (and file size) as low as possible before I encounter any noticeable artefacts.

Screen sizes are so varied that you're probably going to encounter at least one setting where your images will pixelate. To mask pixelation, many people put a repeating pattern in front of the image (which will also prevent any right-click saving, but remember, no image online is safe from theft. They can still look in your source code and get the image URL if they really want it.) To do this, make a transparent png around 5 x 5 px and fill it with either some 1px dots or 1px wide diagonal lines (like this one I made, feel free to use it: http://exbrawladsandlasses.co.uk/images/antipixpattern.png). Then cover your images with a rectangle in muse, using your pattern as a tiled background fill. For a full-page slideshow, you'll have to make it 100% width, and make it really tall to cover large screen sizes. Set it to scroll at the same speed as the page, so that Muse does not create a scroll bar for it.

You can't automatically add watermarks with muse, and really, is there much point? They are hideous, and so easy to remove. If you really must, however, open photoshop and use the actions panel to record and automate placing your watermark on the images, then import into muse.

I hope this is helpful, tweet me if you need any more advice: @upchurchpwm

Thanks,

Nathan

[Lori K Illustration]

Hi Nathan,

Wow, 2048 x 1365 is pretty big for the web. Is that going to take forever to load? Pixelation is a concern for me, because the most important people coming to my site are art directors looking for illustration, and they usually have high end equipment. And it's my portfolio, so the images HAVE to look good. I'm not sure I want to put a dot pattern over my images, since the detail, color and texture is important and needs to be seen clearly by viewers. Yes, I use Save for Web in Photoshop, but I usually use maximum quality for JPEGs that go in my portfolio. Of course for tablets and phones, the images will be much smaller, but I don't want my desktop site to take too long to load.

Regarding the watermark: I just want to put my web address in tiny transparent white type at the bottom of each image, so that WHEN an image is shared and goes all over the place (This has happened to several of my images already), people who see it will at least know where it came from. People unfortunately don't often give credit to artists. Some slideshow plugins automate this and allow you to set the text as you import the images. Apparently the slideshow widget in Muse is not that sophisticated. Just thought I'd ask. Is it possible to use a third party slideshow in Muse?

Thanks,

Lori

Lori Klopp

lori@loriklopp.com

www.loriklopp.com

[NathanUpchurch]

No, load times will be significantly reduced if you're sure to export with photoshop and reduce to a lower quality setting. At any rate, to put images on the web, you are going to have to make compromise. If the quality has to be top-notch, why don't you just have a thumbnail gallery that links to the full res images? Max quality for a full-screen slideshow is going to be a nightmare for load-times, you're going to have to decide what's more important; the quality of your images, or having a full-screen slideshow. One day this won't be an issue, I'm sure, but just now it is.

Yea, the slideshow widget isn't super sophisticated. You may be able to use a third party slideshow using the 'insert html' feature. I haven't tried it myself, so it will just take some experimentation, I think.

Good luck!

[Lori K Illustration]

I've decided to abandon the fullscreen for now. I'm using the thumbnail slideshow, with images at 860 px for the longest dimension. I don't know if that is still too large for web. I might consider changing the quality to "high", instead of Maximum if it takes too long to load. In the past, I used much smaller images, with lower quality, but that was 4 or 5 years ago, when bandwidth was smaller. I've observed that a lot of artists have very large high quality images now on their sites, so I'm trying to see what I can get away with.

The Muse slideshow doesn't seem to be responsive. I tried extending the image box to the browser edges for full browser width, but that doesn't do it. Another reason to use 3rd party. Although it has the alternate layouts for mobile devices, Muse still doesn't seem to have the same jQuery responsive functionality that Dreamweaver CC has. (I was planning to do this in Dreamweaver CC, but it crashes incessantly, and after I spending time troubleshooting, even on phone with tech support, it's still crashing so much that I can't use it. So until they get the bugs fixed, I'm settling for Muse, which is easier for a non-coder like me anyway. But that's a topic for another forum.)

Thanks, Nathan, for your advice!

Lori

Lori Klopp

lori@loriklopp.com

www.loriklopp.com

[adobelance1]

Reducing the size of images yourself is a good way to reduce load times, but Muse also has some features to help with this. If you place large images in Muse and use them at small sizes, Muse will automatically resample them to a smaller size for output. Muse doesn't offer any controls over this resampling, so if you're  not pleased with the resampling done by Muse, resampling yourself in Photoshop to the size you're going to use the image in Muse is a good choice.

There are some benefits to using the Muse slideshow. The Muse slideshow will speed up your page load time, but delaying the load of most of the images in the slideshow. For an example, check out this sample site - the photos in the slideshow are quite large, but the site visitor doesn't have to wait until they all load to see the page and start viewing the slideshow.

http://lancetest01.businesscatalyst.com/index.html

[Lori K Illustration]

Yes, those photos are huge, and it didn't take any time to load in my browser. The Taylor Swift PNG is 1.3 MB. That's encouraging.

Thanks,

Lori

Lori Klopp

lori@loriklopp.com

www.loriklopp.com

[Bunty]

Hi, I'm using a slideshow to make an element look like it spins. I want the page to load far enough ahead so that it doesn't disrupt the spinning, or take too long to load for the visitor. At the moment the html folder is about 4MB, so not too big, but we're still looking at 50 seconds loading time. Is there a way I can reduce load time?

Thanks

[Saldridge1]

I am currently using 1875 x 521 and it works wonderful.