Mobile-first bitmap resolutions

[Jim30977454r958]

I haven't created websites in Dreamweaver in over 20 years. Back then, we just needed to worry about desktops. And even that was 800x600 with an occassional SVGA card. The coolest thing we did was rollovers. I like this new concept of Mobile-First. But i see no discussion on bitmap resolutions. E.g., do you use 72ppi or 96 for a bit of wiggle room (read: enlarging). If you're starting with mobile first, those images will look all pixelated on the desktop and perhaps even on tablets. So, why are we building low resolution content first? Seems like it would be easier and safer to start with desktop first. Images can always be safely reduced. Or do you use 3 sets of images for bandwidth considerations? I have not looked into Bootstrap yet, btw.

Jaydouble

[BenPleysier]

A lot has changed in web development over the 20 years. You have already mentioned the screen size, but the technology has gone much further. Where the device pixel ratio is '1' for many screens, there are screens that go even further.

For images, this is of great importance as this article will testify.

[osgood_]

Or do you use 3 sets of images for bandwidth considerations?

By @Jim30977454r958

That's the way you're supposed to do it but that rarely is the case because it means more management and lots of additional image files to create, assuming your also cropping images to suit different devices. srcset allows you to present a set of images which will deliver the appropriate image size to the appropriate screen size, although it has been hugely slow to be adopted, its not hard to see why. Some just use the large desktop image for tablet and smartphone but that presents an issue for the user as it sucks out their bandwidth but its a case of either burying your head in the sand or commiting to additional work until they come up with something akin to a vector image for photographic content.

[Jim30977454r958]

Gentlemen, you have no idea how much these responses and links are helping! I'm a graphic designer, not a coder. So i now have a much clearer direction, although it'll take me awhile to wrap my head around the srcset stuff. Osgood, thanks for answering the multiple images question. I have to do that on my Spotify / iTunes type stuff anyway. I don't mind. Thanks again. Gotta get back to my Dreamweaver tutorials! Jaydouble

[Nancy OShea]

For the most part, I switched to SVG from Illustrator which is math-based and not resolution dependant.  SVG can be re-scaled to any size without quality loss.   The same cannot be said for pixel-based PNG, JPG or newer WebP.  

That said, I still use rasters for photos. But I generate more than one size in Photoshop with File > Export > Export As.  I'm able to generate 1X, 2X, 3X or higher scale versions with a few simple clicks which helps reduce production time.   See screenshot.

Studies show that the majority of Internet users are are using Mobile/Tablet or Hybrid devices now.  Desktop/Laptops are no longer the majority.  For front end, I use Bootstrap's mobile-first framework.   Using a responsive framework saves a ton of production time so I can focus more on backend and content creation.

Bootstrap is integrated into Dreamweaver CC but it hasn't been updated to the latest version.  Given Dreamweaver's minimal maintenance status, it might never be. 😞  But that doesn't preclude me from using the latest Bootstrap 5.3 in Code View.

Coding skills are essential.  If you can't work with code, I suggest using an online site builder that doesn't require you to work with code (additional fees may apply).

ONLINE SITE BUILDERS:
-- Squarespace - https://www.squarespace.com/
-- Webflow - https://webflow.com
-- Wix - https://www.wix.com/
-- WordPress (open source) - https://wordpress.org/

Hope that helps.

[osgood_]

For the most part, I switched to SVG from Illustrator which is math-based and not resolution dependant.  SVG can be re-scaled to any size without quality loss.   The same cannot be said for pixel-based PNG, JPG or newer WebP.  

By @Nancy OShea

You should just clarify that the SVG format is only any good for graphics based content - logos, icons, maps etc not for photographic images. One day someone will come up with a 'one-size-fits-all' solution for photographic content.

[Nancy OShea]

Right.  I assume a graphics designer knows that but I guess it bears repeating.

Before long, everything is going to be in AI-assisted 3D. It's already used in medical imaging and other sectors.

https://scholar.google.com/scholar?q=NVidia+AI-assisted+3D&hl=en&as_sdt=0&as_vis=1&oi=scholart

[osgood_]

Right.  I assume a graphics designer knows that but I guess it bears repeating.

By @Nancy OShea

I'm not sure many graphic designers would know the SVG format as they only deal with mainly jpgs, tiffs and vectors from Illustrator. Of course, those graphic designers that have ventured into the realms of web-development should have encountered the SVG format.

[Jim30977454r958]

Yep, i've been trying to explain the difference between bitmap and vector art to students and print houses for more decades than i care to recall.  😉  I already use SVG for simple stuff, but my cool logos and graphics use too many photoshop and illustrator effects, that SVG simply can't handle. BTW, i looked into all the online web builders, especially WordPress, but none of them were satisfying. I ran into one decent builder called NicePage that worked amazingly well until you previewed it in any browser, then everthing blew up! Tried to see what was wrong with Notepad, but there was so much junk everywhere, i gave up. So I bit the bullet and I'm back into Dreamweaver now. Many years ago i updated all my sites in notepad believe it or not. So much to catch up on now. I've been left in the dust. Thanks to you all for the great comments.

[Nancy OShea]

If you're a former NotePad user, you might like Visual Studio Code with the free Real Time Preview extension.  I use VS Code alongside DW  but prefer DW for site management.  Different tools for different tasks.  No single tool can do everything. 

https://code.visualstudio.com/

https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server