Slow loading images because HiDPI

Design help General
1

I’m hoping someone can help me with slow loading HiDPI images. These images seem to load slowly because they’re kind of large but if I make them smaller how do I include the retina (HiDPI) versions? I guess I’m not understanding that part.

See example here:
http://allergy-website.webflow.io/conditions

read only: https://preview.webflow.com/preview/allergy-website?preview=d762b2684592da0e21a97abe41b43837

Thanks!

2

Webflow does this automatically no need to do anything.

1 Like
3

Thanks for your response. I read those pages but I’m still kind of confused. I’m going to try using tinyjpg to optimize my images to see if that helps.

4

Okay so the Webflow Designer is not a photo image engine or optimizer. It’s not like Photoshop or Affinity. The quality of your photo management occurs at the beginning. You’ll need to build a collection of photos that are used for your site, and open and edit them in a full image program. That’s where you’re going to get the color correction, toning, optimization, etc. When you start your collection each photo will need to be edited, optimized and exported individually. Save on your drive, then load into Webflow; you won’t have to do anything in the Designer, simply insert.

I would refrain from resizing, editing in WF; it’s built for this. Do all the work prior to uploading into your assets. If you need assistance or a video to show the best way to manage photos, I would be happy to create one for ya.

5

It’s mainly the retina/hidpi part that I’m confused with. I had optimized my images somewhat in Photoshop but didn’t want to go too far in the event that they become too low res for retina. But that left the files sizes large.

6

I agree, I was a little confused trying to understand images on the web in the beginning, but after building a while you get the hang of it. HiDPI simply gives you the ability to add an image with - 2x the resolution in pixels, but with the weight load of an image at 1x. Basically, doubling the pixels for cleaner image at higher screen resolution when needed. Just in case the site is viewed on a larger screen than expected when built.

That’s about all you’ll need to know, studying this can be too much if you get carried away. If you want to go deeper, here are a few articles to read (and a WF forum thread):

1 Like
7

Thanks again for your help!

8

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.