Solved

Retina Image scaling

Posted on 2013-11-05
15
394 Views
Last Modified: 2013-11-21
I have a responsive website and I want to use retina quality images. My understand of this is the image basically needs to be twice the size. So I have just added a image to my page as below...

<img class="alignnone size-full wp-image-4025" alt="Pre-Pay Technical Support" src="http://www.mydomain.com/wp-content/uploads/2012/11/laptop_hand.jpg"/>

Open in new window


You will notice I have not set the width or height of the image because I want it to scale to the full width of the container. As I have a responsive website this will be different depending upon the device.

The original image size is 700 width by 360 height is pixel at 72dpi.

When this image is viewed on a desktop computer the actual size will be 207 by 106px.

When viewed on a iPhone with a retina display the image looks good. However when I view on a normal desktop top computer the image quality is poor. i.e. Jagged edges. I know if I resized the original image to the desktop size of 207 by 106px the image will look fine, however this will then cause a loss of quality on retina devices.

What is the best way to do this? Also is there a Wordpress plugin that will help with the job?
0
Comment
Question by:petewinter
  • 7
  • 6
15 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39624186
The first thing you need to do is create an image in a photo editing tool like photoshop that is 414 X 212 & 72dpi. (twice the width and height).   Then place your 700 X 360 image inside that space and proportionally shrink the image to fit/crop to your liking.  Save the image at 414 X 212 but on your img code set it to 207 X 106.  <img src="myimage.jpg" width="207" height="106">
0
 

Author Comment

by:petewinter
ID: 39624372
padas - Thanks I understand that, but it does not answer my question.
0
 

Author Comment

by:petewinter
ID: 39627225
I've requested that this question be deleted for the following reason:

Didn't get a decent answer and found a solution elsewhere
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39627160
What was the answer you came up with?

For future, a response similar to "but it does not answer my question." without additional information does not allow experts to give you an answer to solve your issue.  It is possible a question was mis understood.  The way experts exchange works best is when both asker and experts interact.
0
 

Author Comment

by:petewinter
ID: 39627226
Thanks
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39627242
Pete, thanks for the points.  But did I really answer your question?  If you found a better answer you can post the answer you found, explain why it worked for what you need and accept your own answer.   The reason for doing this is because many people on EE  may not ask questions and simply find answers they need searching for questions already asked.

Either way, I am glad you have figured it out.

padas
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

Author Comment

by:petewinter
ID: 39627362
padas - Fair comment. I should have communicated better. My question was more related with the image being responsive. i.e. On a desktop screen the image may have a width of 200px and there are four columns of images. When viewed on an iPad there will only be one column so the image maybe say 400px width. However the retina image was set up at double the size based on the desktop image size (200px) so when viewed on an iPad the actual width of the image is 400px anyway so in theory I am not getting a retina image as the retina image would need to be 800px width not 400px.

The image scales to the 100% width of the holding div.

Hope that makes sense. How would you resolve this issue?
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39627391
What you just explained, I would have never understood from your question.  

In simple terms, you need an image to be 800px wide, but the original image you have is only 700px wide.

While it is typically not a good idea to make your image a higher resolution and only smaller, it is worth a try and convert to 800px wide proportionally.  If you have an image that starts out super crisp with a lot of details, it is not going to work out very well. It is possible, the image could be a little fuzzy or not that great of quality to start.  In that case, you can fudge and go a little larger and my not notice much difference.  If all else fails, do what instagram does, put an odd filter on a bad image and suddenly everybody is an artist.  Actually, adding a filter and distorting the image to make it artsy may be an option.
0
 

Accepted Solution

by:
petewinter earned 0 total points
ID: 39627529
Fair enough my mistake. Thanks for the advice, but I have found a better solution: http://wordpress.org/plugins/simple-responsive-images/
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39627576
That plug in is most likely using media queries https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries similar to below.  You could have also updated your custom css stylesheet as well.    

@media (min-width: 300px) {
  .someclass {
    width:700px;
  }
}

@media (min-width: 700px) {
  .someclass{
    width:900px;
  }
}

Open in new window

0
 

Author Comment

by:petewinter
ID: 39627606
Yes, but it uses different versions (sizes) of the image depending on the screen size. i.e. So I am not using the full size image where not needed.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39627687
Yes, all of that is available using media queries.  The @media (something) determines the parameters you want to use.  Instead of sizing, you could just as easily use a background image and use css to replace image A for image B.  However, if you were to simply load larger image to start with and use the media query to change the class, the image is still loaded so it should stay cached.  If you do switch images, many times you will see people actually load a larger image for a phone.

There are many multiple ways to get to the same visual end. Good luck on the rest of your project!
0
 

Author Comment

by:petewinter
ID: 39627726
Thanks for the advice
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
In order to have all security and back ups taken care of, WordPress users can sign up for services with WP Engine.
The purpose of this video is to demonstrate how to properly insert a Vimeo Video into a WordPress site or Blog. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp…
The purpose of this video is to demonstrate how to set up basic WordPress SEO. This will be demonstrated using a Windows 8 PC. The plugin used will be WordPress SEO by Yoast. Go to your WordPress login page. This will look like the following: myw…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now