StudioPress

Forum navigation

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

WordPress responsive images with srcset and sizes – how to use in Genesis?

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Community Forums › Forums › Archived Forums › General Discussion › WordPress responsive images with srcset and sizes – how to use in Genesis?

This topic is: not resolved

Tagged: ,

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • June 1, 2018 at 3:56 pm #220459
    canpress5
    Member

    Since WordPress 4.4 the srcset and sizes attributes have been supported for responsive images. I am unsure how to make use of this functionality in Genesis?
    I can see (looking at wp-content/uploads via FTP) that WordPress is indeed creating several sizes of the images I upload, however when I add an image to a page or post via the content editor, the corresponding markup does not show the different image size options, just the original image as follows:
    <img class="alignright size-full wp-image-123" src="my-original-image.jpg" alt="" width="1600" height="1000" />
    Is there a setting I need to change in order for the responsive images markup to be generated automatically?
    I'm using Infinity Pro, and when I look at the source code of the demo, I do not see any examples of image sizes changing for different screen widths.
    Is there a reason this feature not being used?
    EG the main image on this page is 1600px x 1000px for all screen widths including mobile. Why not offer a smaller image size to reduce file size?

    https://demo.studiopress.com/infinity/
    June 15, 2018 at 10:52 am #220862
    Lauren @ OnceCoupled
    Member

    WordPress will automatically generate srcset for images and does not need to be enabled. There are a number of reasons an image may not have srcset, though. Some that I can think of off the top of my head:

    • WordPress isn't up to date
    • Srcset has been manually disabled via a theme function or plugin
    • Thumbnails aren't being generated on your site
    • The theme/plugin doesn't use native WordPress functions to display the image
    • Thumbnails with the same aspect ratios don't exist

    I'd say the last one is the most likely culprit, and appears to be the case for the demo site, but the default thumbnails generated by WordPress (soft crop; as set in the media settings) usually provide at least 2-3 options. Do you have an example URL from your site?

    We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘General Discussion’ is closed to new topics and replies.