• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

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

How to display retina images

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.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › How to display retina images

This topic is: not resolved
  • This topic has 1 reply, 2 voices, and was last updated 6 years, 3 months ago by ᴅᴀᴠɪᴅ.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • June 21, 2017 at 3:30 pm #208048
    mmjaeger
    Member

    Hello
    I did some nice charts/illustrations - however when uploading them to WordPress they look rather blurry - how do you guys deal with retina images - are you using any plugins - what's the proper procedure to show crisp images on the high resolution screens.

    How about featured images that are showing as background images in a page banner?

    Thank you in advance for your input.

    June 21, 2017 at 3:47 pm #208049
    ᴅᴀᴠɪᴅ
    Member

    To make sure an image is crisp on retina, it needs to be 2x the size. So if the image appears as 300x300 on the screen, it needs to be a 600x600 image.

    WP Retina 2X is a decent plugin, which automatically makes a 2x copy of each image size then shows the larger image only to retina displays. This is ideal as you don't want to be loading larger images when not neccessary.

    As for the background images, this will be controlled by the theme, some themes show full size images as backgrounds, in which case it's up to you to upload the correct size image.


    I love helping creative entrepreneurs build epic things with WP & Genesis.

    Follow on Twitter

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

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble