Need Help Cleaning Up Image Code

  • elrebrin

    (@elrebrin)


    8 years, 6 months ago

    I’ve linked an example page we have with multiple images, but I recently noticed that our code for images was SUPER bloated.

    – Multiple image sizes linked within the tag
    – Multiple Titles Despite Images having 1 Title
    – What feels like tons of extras

    Obviously, the biggest goal is to go lean on HTML Code. Any ideas, or has anyone run into this before?

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    8 years, 6 months ago

    You’re seeing a srcset= tag. This is not super bloating; it’s telling the browser “Hey, there are a bunch of image sizes you can choose from. Pick the one that best fits your need.” It’s actually an optimization for responsive sites. The few extra bytes of HTML will be greatly offset if the browser doesn’t need to download an oversized imgae file.

    Responsive Images in WordPress 4.4

    Thread Starter elrebrin

    (@elrebrin)

    8 years, 6 months ago

    Heya @sterndata!

    That makes TOTAL sense! Didn’t really even think about that, thank you for clarifying that code for me!

    What about all of the “data-” prefixed code? Seems like there’s a solid chunk in there that’s not really needed. Am I wrong in assuming that Title / Alt / Link are really all that should be there?

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    8 years, 6 months ago

    You might not want to display all that EXIF data

    <img width="902" height="507" src="https://techraptor.net/wp-content/uploads/2017/11/Battlerite-Review-Header-902x507.png" class="attachment-article-feature size-article-feature wp-post-image" alt="Battlerite Review" srcset="https://techraptor.net/wp-content/uploads/2017/11/Battlerite-Review-Header-902x507.png 902w, https://techraptor.net/wp-content/uploads/2017/11/Battlerite-Review-Header-300x169.png 300w, https://techraptor.net/wp-content/uploads/2017/11/Battlerite-Review-Header-768x432.png 768w, https://techraptor.net/wp-content/uploads/2017/11/Battlerite-Review-Header-1024x576.png 1024w, https://techraptor.net/wp-content/uploads/2017/11/Battlerite-Review-Header-600x338.png 600w" sizes="(max-width: 902px) 100vw, 902px" title="Battlerite Review Header" data-attachment-id="167832" data-permalink="https://techraptor.net/content/battlerite-review/battlerite-review-header" data-orig-file="https://techraptor.net/wp-content/uploads/2017/11/Battlerite-Review-Header.png" data-orig-size="1920,1080" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="Battlerite Review Header" data-image-description="" data-medium-file="https://techraptor.net/wp-content/uploads/2017/11/Battlerite-Review-Header-300x169.png" data-large-file="https://techraptor.net/wp-content/uploads/2017/11/Battlerite-Review-Header-1024x576.png">

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Need Help Cleaning Up Image Code’ is closed to new replies.