2

I've an inefficient workflow by which I generate responsive images. What I'll do is (1) Install a dummy Wordpress, (2) When I want to include an image in my website, upload the original image to the dummy site Media Library (usually a 6200x4100 or so very large image), (3) Open up chrome copy the tag including the srcset, (4) Make a list of the all the files in srcset and save it to a text file, (5) xargs -n 1 curl -O < download.txt, (6) Paste the copied tag into my site's html, (7) Edit the tags to remove the dummy site's URL. (Also, I usually run the files through ImageOptim one last time to reduce the file sizes a little bit more too.)

This seems like a convoluted process, but still yet better than doing each one by hand though. Yet, there has got to be a more efficient way to automate this, correct?

<img width="1568" height="1045" 
    src="img/some_image-1568x1045.jpg" alt="" 
    srcset="img/some_image-300x200.jpg 300w, 
            img/some_image-768x512.jpg 768w, 
            img/some_image-1024x683.jpg 1024w, 
            img/some_image-1536x1024.jpg 1536w, 
            img/some_image-1568x1045.jpg 1568w, 
            img/some_image-2048x1365.jpg 2048w" 
    sizes="(max-width: 1568px) 100vw, 1568px">

I'm looking to generate the above code automatically, but more importantly generate the actual images automatically from the command line, but unsure how to do so and unfamiliar and unable to find any tools that already exist for this purpose.

cokicah505
  • 33
  • 1
  • 4

1 Answers1

0

You could try https://responsivebreakpoints.com

  • Determines optimal image breakpoints
  • Generates code
  • Creates a .zip of responsive images

Also, to automate with build tools & image CDNs see https://web.dev/fast/#optimize-your-images

Richard Lovell
  • 848
  • 10
  • 18
  • Thanks, Richard, I did try responsivebreakpoints.com again but found it about as inefficient of a workflow as my present setup, but worse still it generates images that are not as good (i.e., as in the smaller file size for comparable quality/acceptable quality images that whatever Wordpress uses). Moreover, I don't like having an external third-party solution. I thought for sure there might be an open source project or two already in existence as I can't be the only one with this pain point? Thanks again for your input. – cokicah505 Jan 05 '20 at 04:50