Skip to main content
J
Jim30977454r958
Participant
July 10, 2023
Question

Mobile-first bitmap resolutions

  • July 10, 2023
  • 2 replies
  • 392 views

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

    This topic has been closed for replies.

    2 replies

    O
    osgood_
    Legend
    July 10, 2023
    quote

    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.

    J
    Jim30977454r958Author
    Participant
    July 10, 2023

    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
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    July 10, 2023

    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.

     

    Nancy O'Shea— Product User & Community Expert
    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    July 10, 2023

    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.

     

     

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices