I recently decided to tackle adding retina displayed images to some sites, but when I view them on my iPhone5 they appear huge (although crisp which is nice). How should I go about reducing the size of my logo? You can check out my site here
I'm assuming it's some code I need to edit in my wedge.css file. Can anybody point me in the right direction? Also, not sure if it matters, but I'm using Bootstrap.
Related
I don't often get to work for high resolution displays as most of my clients tend to work with the oldest machines known to man, however I'm currently working on something which will only be displayed on retina display iPads. A graphic has been mocked up of the design they want to the retina resolution (2,048 by 1,536) and I've been building my site based off the dimensions in the graphic. However now I'm actually trying to view it on an iPad, everything is far too big, my '260px header' which I assumed would take up a 6th of the page (ish) is closer to double that.
I don't seem to be able to find anything regarding a workable HTML size for retina displays, only pages talking about how to prep images for retina, what size resolution should I work to when building the HTML?
I believe the best way for you to achieve this is to use CSS where possible and build your site at 1024x768 utilising #2x graphics for retina devices.
A simple guide on utilising these ideas can be found here - http://www.kylejlarson.com/blog/2012/creating-retina-images-for-your-website/
I run my website through google pagespeed insight, and my desktop gets a 90 for a score. but my mobile is 65. it says my images need to be optimized with a red score, saying each image in my slider could be optimized for like 90-95% reduction. however I've gone through those images through a ton of different compressors, smushit, jpegcompressor, and all of them say the images cant be reduced anymore.......
I have a feeling its because I have the images in the slider be responsive so when I shrink the screen or view on mobile the slider is smaller. I think google is confused ... and I'm confused. How do I make my slider images optimized and responsive? Is this a resizing issue? and how should I fix it? I'm stumped.
I'm designing a website using Bootstrap framework 2.0.1.
But I'm having one issue with the image logo I used on my website. The logo image looks fine on PC and laptops but when I see this logo image on devices like iPhone and iPad it loses it's quality, the image logo looks blur and stretched.
So my question to you is how should I overcome this issue?
Do I need to create three different copies of same logo image with different dimensions and use them respectively for laptop/PC, iPhone and iPad? If yes how?
If there is any other better solution for this problem please let me know.
Thanks in advance.
One option regarding different image copies based on resolution, would be the srcset attribute. It specifies sources for an image based on the pixel density of the user’s display.
For example:
<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w">
"In the simple example above, all we're doing is telling the browser about some images that we have available and what size they are. The browser then does all the work figuring out which one will be best."
Read more here.
have you considered converting the image to an SVG?
because it uses vectors rather than pixel data it won't distort regardless how far it gets stretched/squashed.
and i believe it's cross-browser compatible back to ie8
http://caniuse.com/#feat=svg
you can download inkscape for free (or use illustrator if you have it) and try converting the image to SVG to try it out
On my website, I have a 1300x200 image that I am forcing down to 650x100 using the simple width=650px parameter in the img tag. What happens when a retina Mac/iPhone/iPad user views my site. Will they see the full quality 1300x200 image, or will the quality artificially be reduced by half?
As far as whether or not this is efficient, it's just a 50k PNG. My site is otherwise mostly vectored with text/CSS. You could argue this is more efficient than messing with browser-agent detecting Javascript.
Ok folks, I went about answering it myself, and yes, if you use the width tag to half-size an img in HTML, the retina browser will display the full sized image.
I displayed the 1300x200 image half-sized using width on the top, and the plain 650x100 image on the bottom. Zoomed in using Safari on iOS 6.
I am a complete novice when it comes to website design, but have the task of designing a website for an academic conference. I wanted to design a functional site to which I understood the code behind it. I have managed to do so, but am now having problems with viewing it on a smartphone. When I have checked the website on online simulators such as brick and mobile is seems to work fine. However, when colleagues of mine with smartphones try looking at it, the main content area will not scroll. Does anyone know of a way to resolve this. The url to the website is:
Conference Website
Edit: The problem appears to be on android phones. If you zoom in a tiny bit you can then scroll alright, and if you move to a portrait view rather than a landscape view it is fine, but it will not scroll on a landscape view on an android.
You might want tot try adding viewport meta to your header, ensuring every device sees your site at the optimal width (this eliminates the user having to zoom in on most mobile devices).
You can find some good information for this in the following article: http://www.html5rocks.com/en/mobile/mobifying/
There are some zooming issues with the website on a Samsung Galaxy S2. This has mostly to do with your menu, which is set to 21%.
Furthermore you're setting height on a lot of elements to 100%. You might want to look into that as well.