Requesting guidance on image sizes -...

User 2040390 Photo


Registered User
95 posts

Am I doing this right?

My website (http://pppotscom.coffeecup.com/index.html) is made using Foundation Framer, with company-defined breakpoints at 640 and 1024px (why there?). I put in another at 400px for cell phones, giving me four bins for which I have four image version widths: small-400px (20-30 kb), medium-640 (50-75 kb), Large-1024 (120-250 kb), and grande-1500px (250-500 kb).

My workflow is; post process in Lightroom to a jpg, reduce file size in JpegMini, width reduction using FastStone Image Resizer that appends a letter to the file name, putting them in size order.

Do I need the small (400px) width? Having no experience, I'm guessing
User 244626 Photo


Registered User
811 posts

I would do away with the 400 px as you are adding a addtional breakpoint which for me just complicates the design more. Your smallest picture size is usually assigned to the src which gets indexed....so 640 is a yummy size for google indexing and others.

Your medium-640 should go from 0 px up to the 640 breakpoint.

I usually do the Lightroom, then resize, then compress all (reduce file size). Then use a renamer like you have a program for.

The Foundation breakpoints are 640 and 1024 because they have chosen the ones they feel work best for mobile, tablets, laptops, and desktops. 640 and below is for mobile hamburger menus, 1024 for Portrait, Ipads, Laptops etc, and above 1024 desktops.

Since your website is based on "Highly Definition Images" you could actually double the approach you currently are doing and look into supplying retina images for HD and retina devices. You would add the 2x identifier at the end of the picture name. So on a Iphone that has retina HD display or Tablet it would load a picture twice the size to take advantage of the display pixels. So for a 640 or below it would load a 1280 size. You would have to use absolute links to do this. If interested I can provide further information.
Bootstrap 5 CSS Grid.
User 2699991 Photo


Registered User
4,782 posts
Online Now

Stonecherub wrote:
Am I doing this right?

My website (http://pppotscom.coffeecup.com/index.html) is made using Foundation Framer, with company-defined breakpoints at 640 and 1024px (why there?). I put in another at 400px for cell phones, giving me four bins for which I have four image version widths: small-400px (20-30 kb), medium-640 (50-75 kb), Large-1024 (120-250 kb), and grande-1500px (250-500 kb).

My workflow is; post process in Lightroom to a jpg, reduce file size in JpegMini, width reduction using FastStone Image Resizer that appends a letter to the file name, putting them in size order.

Do I need the small (400px) width? Having no experience, I'm guessing


If your design/layout looks ok at the 640 breakpoint and it doesn't break as you go down towards the 400px breakpoint and even further then you could do away with the 400px breakpoint, however you need be careful because it may remove any styling you made at that breakpoint, for the others, so you may need re-style again for the higher breakpoints

I always put my first breakpoint in at 400px, IF I KNOW that the layout will break from 640 down, but that comes from years of experience in design, & knowing if I need a lower breakpoint than the default one.
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.