1. Hello Guest!

    Thank you for visiting the ClubRunner Community website, you can login using your ClubRunner account information by clicking the login link on the top of every page.
    Dismiss Notice

Image sizes in newsletter

Discussion in 'Website Customization' started by Anita Graham on Nov 29, 2017.

  1. Anita Graham

    By:Anita GrahamNov 29, 2017
    Community Member

    Joined:
    Sep 6, 2017
    Messages:
    42
    Likes Received:
    12
    Location:
    Computer Networking
    I am trying to set up a newsletter based on recent stories, using the new Newsletter doover.

    What image sizes are suitable for the commonly used newsletter widgets. Is there somewhere where these are documented, or should I just send a test newsletter to myself and work it out from there.
     
  2. David H.

    By:David H.Nov 29, 2017
    Moderator
    ClubRunner Team

    Joined:
    Jun 10, 2017
    Messages:
    115
    Likes Received:
    19
    Gender:
    Male
    Location:
    Oakville, ON
    We recommend using images 250 pixels wide, to 500 pixels wide. If you would like it to be full width, please set it to 600 pixels wide. For the height, it does not matter too much. I would just try to make it look good. Not too big.
    If the image is too large to fit in an area, ClubRunner will automatically resize the image to fit. Lets say you added a picture which is 1000px by 1000px and the width of the area has a maximum of 400px. The image will automatically be resized to 400px by 400px.
     
  3. Anita Graham

    By:Anita GrahamNov 29, 2017
    Community Member

    Joined:
    Sep 6, 2017
    Messages:
    42
    Likes Received:
    12
    Location:
    Computer Networking
    Thanks David H. I guess these need to apply to stories in general if the newsletter is mainly constructed from recent stories.
    I need to build a new banner image to fit into 600px. That's what I needed to know. :)
     
  4. David H.

    By:David H.Nov 30, 2017
    Moderator
    ClubRunner Team

    Joined:
    Jun 10, 2017
    Messages:
    115
    Likes Received:
    19
    Gender:
    Male
    Location:
    Oakville, ON
    You're welcome!
    Correct, the image sizes I recommended should be applied to stories in general.
    Correct, if you build a bulletin banner which is 600px wide, it will look good on the bulletin.
    Please let us know if you have any other questions!
     
  5. John Borst

    By:John BorstAug 7, 2018
    Well-Known Community Member
    Beta Tester

    Joined:
    Jun 25, 2018
    Messages:
    215
    Likes Received:
    52
    Gender:
    Male
    Occupation:
    Retired Education Administration and Teacher
    Location:
    Education - retired
    David, this is a good question but I am a little confused. I have just done my second DG Bulletin (it's a good thing it is not a GD bulletin :)) I used 650 x 175 px for the banner and the same for a picture. The banner and the picture show up as different sizes. See https://rotary5550.org/bulletin/View/d2ae43d7-f916-4b1f-8c59-2f848dcb759b Is the banner actually at 600 px and the picture 500px? If so what is the actual size of the pictures in the 3 column format below the picture?
     
  6. David H.

    By:David H.Sep 6, 2018
    Moderator
    ClubRunner Team

    Joined:
    Jun 10, 2017
    Messages:
    115
    Likes Received:
    19
    Gender:
    Male
    Location:
    Oakville, ON
    Sorry for the late response.
    The banner' real size is 650x175 and it was changed to 600x162 to fit on the bulletin.

    All of the three images' size is 300x200 and it was changed to 193x129 automatically to fit the area.
     
  7. John Borst

    By:John BorstOct 1, 2018
    Well-Known Community Member
    Beta Tester

    Joined:
    Jun 25, 2018
    Messages:
    215
    Likes Received:
    52
    Gender:
    Male
    Occupation:
    Retired Education Administration and Teacher
    Location:
    Education - retired
    David, thank you for the information on the actual size to which ClubRunner defaults. If I use the actual numbers rather than larger ones is there an advantage in such things as speed of loading?
     
  8. Mickey

    By:MickeyOct 1, 2018
    Moderator
    ClubRunner Team

    Joined:
    Jun 10, 2017
    Messages:
    219
    Likes Received:
    43
    Hello John,

    There is a distinct advantage to keeping image sizes down the to the most smallest appropriate file size. As David already mentioned, CR automatically does what it can to scale down images - however this is NOT a resize. I'll explain the difference.

    - By 'scaling' I mean CR will 'fit to fill', shrink or expand images to fit inside certain areas. E.g., a 1000 pixel wide bulletin banner will be scaled down to 600 pixels wide, but the actual pixel dimensions - 1000 pixels - and its file size stays the same. If the image width is 1980 pixels or less, CR does not resize, it only scales.

    How ClubRunner stores images

    - By 'resizing' I mean the user changing the actual pixel dimensions of the image inside an image editing program. E.g., a 1000 pixel wide banner 'shrunk' down to 600 pixels wide in Photoshop or another image editor -> and then saved using the 'Save for Web' option. This fully optimizes the image to the smallest file size but still maintains quality.

    Your bulletin does a very good job of:

    - having very minimal content--the 'shorter' length your bulletin, the less chance of an email program 'cropping' its length (i.e. displaying 'read more' in the middle of a long bulletin, which many users mistake as the end of the bulletin)

    - keeping your images appropriately small, .e.g., you have images that are 300 pixels wide instead of 1000 pixels wide

    If you want to get more advanced, you can run all your images through a program like Photoshop to reduce the actual file size of your images even more ('Save for web'), while still maintaining the exact same pixel size. If you don't want to purchase Photoshop, there are free options I used to use such as:

    https://pixlr.com/editor/

    CR is also working on ways to run a process called 'minification' to reduce the total bulletin file size as much as possible behind the scenes (inside our HTML code).

    Apologies I meant to keep this short, but bulletin length is a more complex matter that our Design team revisits periodically.
     
  9. John Borst

    By:John BorstOct 1, 2018
    Well-Known Community Member
    Beta Tester

    Joined:
    Jun 25, 2018
    Messages:
    215
    Likes Received:
    52
    Gender:
    Male
    Occupation:
    Retired Education Administration and Teacher
    Location:
    Education - retired
    Mickey, no apology needed. The more I know and understand the better.

    I am in the process of doing the October District newsletter and am using the 193 x 129 pixel size for the triple column. I do use Adobe Photoshop to do my resizing. I had the banner made earlier and didn't change it yet besides my sizing is very close to your default size so there is minimal scaling.

    I have looked at Save for the Web Legacy under Export. That prompted me to "learn more" and takes me to a whole new level of knowledge I have not explored. If I am using the same size as you create and using "Save as" which gives me a choice to use PNG, GIF, or JPEG is that really any different to Save for the Web? if so how?

    For the feature article by the DG I am using the "image with a caption" widget. I have been using 400 pixels but using your default for the banner as 600 x 162 and extrapolating from that is the default width for the "image with a caption" widget 560 pixels?
     
  10. Mickey

    By:MickeyOct 2, 2018
    Moderator
    ClubRunner Team

    Joined:
    Jun 10, 2017
    Messages:
    219
    Likes Received:
    43
    Hello John,

    1. In Photoshop 'Save' vs legacy 'Save for web':
    - 'Save' will try to save the jpeg in the best quality, it's not really concerned with file size
    - 'Save for web' will open up a pop up box to allow you to save in 'Low, Medium, High and Very High' quality settings. Each of those settings gives you a live file size preview, so you know exactly what the resulting file size will be.

    I generally stay away from 'Low' quality. Occasionally 'Medium' setting can achieve good results with very small file size. 'High+' will of course be best, with also the biggest file size.

    2. After review it looks like single 'image with caption' can potentially take up the entire width of the bulletin, just as the bulletin banner can (depending on how you place this widget, e.g., in a 'full width' section of the bulletin). Thus I would stay with 600 pixels wide for these images to maintain full flexibility.

    Let me know if you have more questions.
     
  11. Anita Graham

    By:Anita GrahamOct 6, 2018
    Community Member

    Joined:
    Sep 6, 2017
    Messages:
    42
    Likes Received:
    12
    Location:
    Computer Networking
    John - my rule of thumb is to use JPEG for photos and PNG for logos or vector graphics that need transparency. You can also try saving to both formats and see which produces the smallest file.

    My photoshop is so old that "Save for Web" is not Legacy. However I am trying out Acorn which is photoshop-like and has a one-off price that is lower than a month of Creative Cloud. For people looking for free options, try Canva online. On Windows I am also a big fan of a free tool called IrfanView which can do a lot, and has a batch mode.
     
  12. John Borst

    By:John BorstOct 6, 2018
    Well-Known Community Member
    Beta Tester

    Joined:
    Jun 25, 2018
    Messages:
    215
    Likes Received:
    52
    Gender:
    Male
    Occupation:
    Retired Education Administration and Teacher
    Location:
    Education - retired
    Anita, thanks for the tip. I never thought about comparing the size of items using the different formats. For the past two years I have taken a course at a Community College and that gives me access to a student number and Adobe's whole suite with the most up-to-date versions of their products at student rates. I have been studying video editing and production. Unfortunately, I do have to pay for the courses because of their type but it keeps me young of mind.
     
  13. Mickey

    By:MickeyOct 10, 2018
    Moderator
    ClubRunner Team

    Joined:
    Jun 10, 2017
    Messages:
    219
    Likes Received:
    43
    Hello Anita and John,

    A note on PNG vs JPEG:

    - PNG: there are generally two types when using 'Save for Web' in Photoshop (PS) - PNG-8 and PNG-24. 8 vs 24 refers to how many 'bits' are used to represent the image, e.g., 8-bit vs 24-bit. So 24-bit is higher quality, but generally PNG-24 takes up more space than a standard jpeg (more on that below). PNG-8 is reserved for visually simple pictures, e.g., lines, squares, etc, and PNG-8 is small but also low quality.

    - JPEG: uses a 'sliding' scale, in other words you can control the quality %. In PS, in 'Save for Web' you can save a JPEG in 'Low, Medium, High' or you can even choose an in-between in %, e.g., Save for Web jpeg = 85% quality ('High'). Thus unlike PNGs you can try to find the best file size to quality ratio manually yourself. I typically start at 'Medium' and slide my way up the scale.

    This may have complicated things more, so here's my own simplified rule of thumb:

    - Anything that requires a transparent background I use PNG-24. It's rare that PNG-8 is useful for me, unless of course it's something like a simple line with a transparent bg, etc.

    - Anything where transparency isn't needed, I typically stick with JPEG since I can use the quality 'slider' in PS 'Save for Web' to see what would work best. I try not to go below 'Medium' quality in Save for Web, unless I really need a tiny file size.

    Long statement short - PNG for transparency, JPEG for almost everything else, at least for me. This may be written down somewhere, but this is from my early years working as a Graphic Designer and learning by trial and error.

    Anita and John - just so you know, I am using Photoshop CS5 which is 8 years old. Photoshop has been so powerful for so long, even 'ancient' versions of it are still highly useful if you can find them. I personally found the (legal) install disc when my manager was cleaning his desk drawers, he forgot he had it, no one was using it, huge bonus for me.
     
Top