Hi Carrie

It is a bit of an age old question. The size of your images on screen would not really be an issue as both the slideshow and background will automatically expand the images to fit. Your main concern would be file size. It is all about finding the right balance between quality and file size. I myself would try and keep slideshow and backgrounds images to less than 100kB. Some of your images do appear to be quiet large, varying between 160kB and 380kB.

Ciarán

That's good feedback, thank you.

So, if the result I want is a display the size I have now (similar to your Renovate demo) - large and 100% - but not huge file size, what is the best way to accomplish that? I did learn how to resize images down to specific dimensions (currently I'm using 1200x800px, created in PicMonkey - displaying at 100%). PicMonkey just has 3 default file sizes - the lowest didn't look that great so I selected the middle size. But I guess that's what generating the larger file sizes you're observing.

I also have an old copy of Photoshop Elements on my computer - a friend showed me around a bit, and I know somewhere in there is a file size adjuster. Gasp - so many new things to learn! Could you point me to any resources or processes you'd recommend to get my file sizes appropriate? You told me in a previous post that the dimensions (1200x800) were OK - so I'm a little unclear about how to get this size of image onscreen, without overlarge file size.

This is kind of the big "burning issue" remaining on this site and the other 2 - just to add images to these beautiful templates that don't slow the function and content of the site. So I really appreciate any guidance you can give me on this. :unsure:

Your dimensions are fine however you may be able to improve on the file compression. There is a number of online tools available which may help you with this which I will list below. Normally you wouldn't really have to go to this much trouble but considering the large size of these images it may be worth considering.

http://compressnow.com/
http://www.jpegreducer.com/
http://www.imageoptimizer.net/Pages/Home.aspx
http://compressjpeg.com/
http://jpeg-optimizer.com/

Ciarán

Perfect - I'll check those out. Thank you!

Ciaran - just as a followup question - how did you learn the image sizes in my site? That might seem like a silly question, but as I'm trying to learn how to manage image sizes in general (the last big challenge in all my sites) I want to learn how to do this. These templates are so very image-centered, and their full beauty is revealed once beautiful images are placed in them. So please help me learn how to do this, so I can assess which images need further resizing/compression, and which are OK.

The only way I know currently how to see image size is to look at my original files (edited to 1200x800 px) in Finder on my Macbook. Here, the 4 images I use for Morning Light Music slideshow show the size as follows : 114 KB, 175 KB, 198 KB, 398 KB - in the order they show on the site. The last one, the forest waterfall, is by far the biggest, according to Finder. Obviously, those numbers don't match up to the numbers you observed in your post, and are all in excess of the 100 KB limit you suggest. So I'm still kind of confused, and not sure how to proceed.

As a newbie I'm still trying to learn : What is the best way to assess:
1) the right size to set your slideshow within the template
2) the right pixel size to resize images to (I came across 1200x800 by trial and error - the default in Renovate only filled about half the screen, though on the demo it fills the whole screen. I tried using the ruler in Firefox - but this seems to vary depending on what screen I"m on - still leaving an unclear target for what to set size to.)
3) the right file size to shoot for for a given image, and how to get it to this size.

On my other almost-completed site, counseling library.org, I used smaller images for a Grid Gallery. I think these are OK? They're each resized to 288x328, each with a file size of 20-21 Kb. There are 4 on the page. Are these OK, or do they need file size compression too?

So much to learn! As always, I appreciate your guidance, particularly on this issue which is the most important issue of all affecting the overall display of all the sites. Thanks. -- Carrie

Hi Carrie

Using Firefox you can right click any image within your browser windows and select 'View Image Info' to bring up all the information for that image including filesize, dimensions etc. An equivalent is available on pretty much every browser. You may need to hit 'View Image' first to bring up the 'View Image Info' option. Presuming you don't have Photoshop available to you, you can send your images to info@joomla51.com and we will reply with compressed versions of each image using the Photoshop compression.

Images used on counseling library.org appear to be just fine

Ciarán

(Copied from email, in case it can be useful to anyone else following this thread; and for reference for my next post here

From Carrie:
https://www.youtube.com/watch?v=eSECLBwpRB8 Resizing images for web/email

I do have Photoshop Elements 8 and am cramming to learn it. Came across this tutorial; this is what I'm trying to do with the images. Is this correct? Any other pointers? Otherwise I'll send you the images and let you do your magic

From Ciaran:
Hi Carrie

That tutorial appears to be fine. On some of your larger images don't be afraid to give up a small amount of clarity of your images. In most cases viewers to your site may be using a smaller screen size which means that image clarity would not be as big an issue.

OK - closing in here on understanding this - which has involved a little J51 learning plus some Photoshop learning.

First - thanks for the tip on the Firefox "View Image Info." That's so helpful - both for assessing my own image sizes at a glance, and also from learning from yours and other websites.

In looking at your demos for the templates I'm using, I observe the following:

1) In Renovate (used by morninglightmusic.org) your 4 slideshow images vary from 81-162 px. All show dimensions 1000 px x 638 px, scaled to 1216 px to 736 (remarkably similar to the 1200 x 750 px image size I happened on for my site, by trial and error, trying to "eyeball" and replicate the sizes on your demo.) I'm guessing your 1000x638 was generated by downloading the "Medium" size Shutterstock image? If so, what creates the "scaled to" dimension - which it appears is the actual viewed dimension on the site? Is that "scaling" set in Photoshop? I saw another tutorial on YouTube on increasing image size for increased clarity on a smaller image. What I did was download "Large" size Photoshop images and cut their dimension sizes. Obviously, this means I'm stuck with a bigger size original image on my computer. So if it's possible to work from "Medium" sized images for these bigger slide shows I'm all for that. Help me understand "scaling" in this context?

2) In LetterPress (used by my morninglightcounseling.com) your images vary in size from 82-139 KB, "1000 px x 550 px, scaled to 1216 x 669 px.) So - same question on scaling. And - both Renovate and Letterpress default to "100% yes." Please help me understand the difference between image size, file size, scaling, and 100% yes or no.

3) In Habitat (used by my impactmusic4kids.org) your images vary from 70-113 KB, all set to 1080x422 (no scaling mentioned.) What is the difference here? Also, 100% is off - I assume because you want the background to display on the sides of the slideshow?

4) In Brooklyn thing - your images are 89-95 KB, all set to 1100 px x 450 px. So - did you expand a Shutterstock Medium (1000 px wide) image in Photoshop in some way to accomplish this? Is that the same or different than the "scaling" observed in Renovate? (I see the same thing in Lifestyle - non scaled images all set to 1080x300 px sizes, without scaling. Trying to understand the process here.)

So my question now is - when do you "scale" an image, or not; do you set the slideshow settings to match established image sizes (like 1100 px by 450 px) ; is 100% No basically when you want a margin on each side, vs. 100% Yes if you want the image all the way right to left?

I've learned from the Photoshop tutorial to : 1) set resolution to 72; 2) set document widths; 3) set compression levels to reduce file size. Now I'm trying to understand how that "scaling" fits in. I'm "almost there" understanding this core issue of establishing image sizes for the slideshows - such a key component of these lovely templates. If you could help me understand these pieces I'd be most grateful. Hoping to finish these slideshows (and hence the sites) by tonite.

Hi Carrie

Firstly it is important to remember that visitors to your site will have their monitors set to various resolutions. On a desktop this can vary from 1200px in width right up to 2200px+.

When you see the term 'scaled to' in the image info, this is referring to the scaling added to the image by the browser. Take for example the background image... if the background image is 1200px wide however the site is opened by a browser window which is 1900px wide then the template CSS will tell the browser to expand this image to the full width of the browser window which for this example would be 1900px wide.

When you set the slideshow to 100% width then this will have the same result as the background image. As with the background image, your slideshow will expand to be 100% width of the browser window. So taking our first example, if your images are 1200px wide and your site is viewed in a browser of 1900px wide then your slideshow image will be 'scaled to' match the browser window (1900px).

Finally if you have a slideshow with the 100% width turned OFF then your slideshow will be set to a fixed max width (eg. 1080px). In this case you would never use an image over 1080px in width as there would be no need for the image will never be scaled above this.

All images we use are the 'Medium' Shutterstock size.

I hope this helps somewhat. Please feel free to ask if there is anything i have left out or failed to explain properly

Ciarán

OK, that all makes sense - thanks! My Macbook has a 15 inch screen - I also looked at the demos on my 27" iMac and saw what you mean about the background image and 100% on images being rescaled to adapt to the screen size. Nice to understand this - thank you!

So, that being the case, a few follow up questions:

1) I assume there's a standard pixel-to-inch ratio (like 100 pixels to an inch or something like that.) Yes? If so, what is it exactly?

2) So, if all your J51images are Shutterstock Medium, but some of them display over 1000 px in width, did you then "size them up" (eg. to the 1080x422 visible in Habitat) and then compress them down? (I have downloaded mostly Mediums, so I'm interested in this.)

3) Also, in reverse - If I have a few Large images (1000's of px in width and height) from Shutterstock or other sources, ) sized down to my current size of 1200x800, what process do you recommend to get them to the best display and file size? Should I size them down further first, (like to 1000x width?) or just compress them in their current size?

4) I have a number of images from local photographers that, like bigger Shutterstock image sizes, are thousands of pixels in height and width. (Eg, one I want to install tonite came to me 3.1 MB, and 3614px x 2031px.) So, armed now with better knowledge of Photoshop resizing basics, what target size do you recommend I bring this image to? Looks like some of your demos are over the 1000 px "Medium" Shutterstock default - so whether going up or going down in size, is there a target size that you find works best in these templates? You mentioned about 100 KB file size max, and the video said 72 resolution. For the kind of slideshow size evident on your Renovate demo or my morninglightmusic.org, what target height and width range do you find to be most optimal, for "sufficient but not too much clarity" as you've recommended?

5) Finally - after all this talk about image resizing, what is the best way to determine the Slide Image Width and Height to set within the J51 slideshow module? It looks like it doesn't need to correspond exactly with the size of images - which I'd originally presumed. What element of what is seen onscreen is determined by the Module size settings, vs. by the size of image set in Photoshop?

HI Carrie

1. Screen resolution varies depending on the capabilities of your monitor. In most cases your computer graphics will run at the maximum resolution the monitor is capable of. To find out what your current resolution is open your Macbook system preferences, and click on Displays, which is located in the Hardware section.

2. Yes if the image was a little small for our needs we simply scaled them up in Photoshop to the required size.

3. We would usually scale them down to size first and then navigate to File -> Save for Web (Photoshop). Set the output to JPG and quality between 55 and 70 depeing on the size of the image. The output file size will be displayed to the bottom left.

4. If you are working with a background image or a 100% width slideshow image about 1000px - 1200px wide is fine. This is roughly the min width of a desktop monitor. For a fixed width slideshow image you would simply use the dimensions set in your slideshows parameters.

5. If you are using the 100% width option then 'Image Width' field become irrelevant. The height you can set to your own taste depending on how far down you would like the slideshow to appear.

Ciarán

By George, I think I've got it....

I've now reduced and compressed the slideshow images on morninglightmusic.org. Would you mind taking a look and make sure I've done everything right, in following your instructions? This site is now complete for launch. Thanks so much for your help and guidance all along the way! It's been a long and arduous labor of love for me - but you've been a magnificent coach and midwife! : :laugh:

I've also completed the launch version of counseling library.org. I am so pleased with the way the grid gallery and icon display turned out. Thanks for your mountain of help there too. There's been lots to fine tune, with your help. But I am so utterly pleased with the result. Obviously, I'll continue to add more content over time. But I could not be more delighted with this initial version.

These sites are specifically designed to help and uplift others - through music, and through the printed word. Your beautiful designs, and the beautiful images you have helped me prepare, create just the right environment for inspiration, serenity, and hope - just as I have long envisioned. Thanks for helping me make a long-held dream come true - for supporting, educating, and lifting me as I've prepared these resources. You have been a tower of strength, and an angel of mercy, going so far beyond the call of duty, so many times. And doing that not just for me, but for so many others as well.

I've got my two smaller sites to plug a few more images into, but these two are the biggest, most important ones. And now, with the learning curve behind me, the rest will just be pure fun! Thanks again for everything - and tell me what you think.

Hi Carrie

Everything looks great . All your images appear to be well within an acceptable file size and are loading fast and looking great

Each of your sites look great! As always it is really nice for us to see our templates put to such good use and I am delighted to hear I have helped somewhat in fulfilling your projects

Ciarán

Your dimensions are fine however you may be able to improve on the file compression. There is a number of online tools available which may help you with this which I will list below. Normally you wouldn't really have to go to this much trouble but considering the large size of these images it may be worth considering.

http://compressnow.com/
http://www.jpegreducer.com/
http://www.imageoptimizer.net/Pages/Home.aspx
http://compressjpeg.com/
http://jpeg-optimizer.com/

Ciarán

You can also consider this image optimize compression tool :
https://jpegcompress.com/