Image sizing guide

When a novice, one thinks that bigger is better. Works in the print world, not so much in the web world. I’ve learned that recently. There’s lots of guides out there. Here’s just one. Is this a decent perspective …

https://www.shopify.com/blog/image-sizes

Quote:

---

Originally Posted by bwood

When a novice, one thinks that bigger is better. Works in the print world, not so much in the web world. I’ve learned that recently. There’s lots of guides out there. Here’s just one. Is this a decent perspective …
https://www.shopify.com/blog/image-sizes

---

Sorry Bill, any advice that says 20MB for an image download is fine can go whistle.

In our Xara world, avoid all large images, assume the website is being viewed on a slow mobile where they are paying by the MB.
Use lazy loading, where possible.
SVG over Text over image for graphics, where possible.
Too many images and your design file bloats and your publish cycle suffers.
Check performance with your browser Developer Tool > Lighthouse to give you a steer.
Always think Accessibility as your fantastic hero image melts down into its Alt text.
Light touch animation that are close to subliminal.

Take the first letters of all the above and it spells NINJA, in some language perhaps. ;)

Acorn

True Acorn. I checked their mobile images and 360x120. I present two at 180/60 or square them. Big savings.

For discussion purposes let’s see what sizes use a lot in a free design. In pixel sizes, maybe ratios. Do you use a hero images, blog size etc.

Quote:

---

Originally Posted by Acorn

Sorry Bill, any advice that says 20MB for an image download is fine can go whistle.

In our Xara world, avoid all large images, assume the website is being viewed on a slow mobile where they are paying by the MB.
Use lazy loading, where possible.
SVG over Text over image for graphics, where possible.
Too many images and your design file bloats and your publish cycle suffers.
Check performance with your browser Developer Tool > Lighthouse to give you a steer.
Always think Accessibility as your fantastic hero image melts down into its Alt text.
Light touch animation that are close to subliminal.

Take the first letters of all the above and it spells NINJA, in some language perhaps. ;)

Acorn

---

From discussions here, I now find that the Xara designs may not pay attention to image sizes. Use a template with 4 pages add your photos, and see what comes up. The 960px temps are far, far faster than the stretch 1250 designs.

Quote:

---

Originally Posted by bwood

From discussions here, I now find that the Xara designs may not pay attention to image sizes. Use a template with 4 pages add your photos, and see what comes up. The 960px temps are far, far faster than the stretch 1250 designs.

---

Bill, I think you are confusing original image sizes with rendered outputs. Xara exports at 96dpi and Retina at 192dpi. Half the dimensions and the output is quartered. Xara doesn't use the originals, it copies what it sees.

Take a large image and its thumbnail or Main & Variant. Xara creates two rendered images.
Better if you have the original as a pop-up as an external asset and the thumbnail use the same image but scaled back ==> one download and not two. Every HTML fetch is an extra delay.
Your 1280px vs 960px is therefore 70% larger.

Acorn

Learning a lot. So any photos used on the larger variant should be used on the smaller. If one uses an original, different image on the mobile variant the downloads affect speed. That’s a good point actually.