Hot answers tagged

8

Is there a reason that you need to show what appears to be the full website on a mobile version? Mobile isn't just a smaller version of pc usage. It's a different way of interacting, and so you need to rethink what is needed for someone to achieve whatever you believe their purpose is on the mobile site. In answer to your question on images, mobile ...


7

Well it depends what the image shows. For photos JPG is a good choice. While it's a lossy data compression, it can create quite compress photo-like picture with a very good loss/compression ratio. So you get a high compression without loosing to much information. Of course it depends on the quality factor. For more abstract pictures like graphics, clip-...


7

In digital media, you can't really separate pixels from density (DPI). That's because one pixel is one dot. so, if your picture is 400 DPI, and it's 800 pixels wide, it means it's two inches. Unfortunately, you can't define the DPI of a device (it's a given), it's somewhere between 326 (iPhone 5) and 100 (average LCD laptop monitor). The Retina Macbook ...


7

Depends on the PPI (Pixels Per Inch) of the screen. High resolution icons will not look any different on a low density screen than a low resolution icon. It all depends on the underlying hardware. Pouring rocket fuel into your car doesn't turn it into a rocket ship. You should provide images that will suite the screen properties of the devices you suspect ...


6

Completely ignore DPI settings in your image software. It has no bearing on web graphics. All that matters is pixel dimensions. A 100px x 100px image at 300dpi is the exact same image on screen as a 100px x 100px image at 100dpi. DPI only comes into play when you're talking about print graphics. Where you may want to consider a larger image on the web, ...


4

It is a very good question, actually. And yet, how you formed your question the answer is very clear: can poor image quality have a negative effect on user experience? -> absolutely, it can! Sure, so the question is: what to do about it? What are good ways to have a good website performance as well as good image quality? Some tips: you can and should use ...


4

The iPad screen is 1024-by-768 so to view images at 200% zoom with no pixelation you are going to need an image that's 2048 x 1546. Possible solutions: Find or write an image viewer that does interpolation between the pixels for the higher zoom values. The images won't be pixelated, but it will be blurred. Increase the compression of the images. This will ...


3

As a matter of fact, you should only ask user to upload a photo with a minimum width of 750px (or even better as wide as possible with 750x400px as a minimum). You can and should offer a crop feature, but the most important part is that your app should do all the cropping and image management. Asking users to do it is like tellimg them to have no picture at ...


3

I see that those file types can be classified as text or image files, so it'd be recommended to offer the option to select all the files of one type just with a click. Also it provides better organization (even better if you order them by most used or alphabetically). If the user wants to select by file type, the max amount of clicks needed is 1 so it ...


3

There's no right answer to this. The heavier your page the longer it takes to load. The load time varies depending on users' connections. Smaller screens (e.g. older phones) don't need larger dimensioned images, with newer high-res phones an enlarged small image may seem shoddy. There are so many factors. One thing I can tell you is that different images ...


3

Asking user to upload only one image and that too in very maximum size you want for your app. Later you can show them, 4 different area where user's image looks like. Try not to distrot image, use masking of images in any rectangle or elipse. Like what we see in facebook, profile picture have different size for images and the picture we see near our post ...


2

You could probably use Seadragon Ajax - it's the javascript implementation of Silverlights DeepZoom. See the answer on Get Satisfaction for Seadragon Ajax


2

It think PNG is good enough to work with. but there are some problems in rendering PNG files on different platforms. It is better to use JPEG if you don't need transparency. but if you need transparency, PNG is the best choice.


2

Aside from jpeg, don't use interlacing; it will actually increases the size (PNG is worst off at around 10%). However, even when it's not particularly costly, it is still undesirable. (in some cases) thumbnails, multiple levels of them, are much more friendly and usable to the user. If they want to see a preview, they get a very clear one, if they want the ...


2

Do you have to use PNG files? JPGs can be compressed quite a bit more if these are photographic in nature.


2

Yes,for the following reasons If I see a site with poor quality or squashed or even stretched images, unless the site has a strong brand name behind it,I would seriously doubt the quality of the brand since they dont seem interested in presenting a positive front with poor quality images. Secondly if the site does have good content but poor quality images,...


2

As Wikipedia correctly points out, JPEG is designed for digital photography, while PNG is a format better suited for non-photograpic images, like diagrams, icons, clipparts, etc... as JPEG lossy compression does a really poor job with these kind of images. Using SVG is not even an option for digital photography. And it's a bad idea (for the reason you ...


2

Unfortunately, you haven't posted the most important of all the information: what kind of products does she sell? I assume it's a fashion webstore - correct me if I'm wrong - thus I advise you not to worry about ther disk size too much. Size of a particular photo depends on the product, however, among the popular clothes web stores, product pictures oftenly ...


2

You could use a title for the album and a little bit of white space to differentiate albums. download bmml source – Wireframes created with Balsamiq Mockups


2

Let's start with the difference between progressive and non-progressive JPEG files. Non-progressive JPG files ar not by definition smallers than progressive JPEG files. A rule of thumb found by Stoyan Stefanov is that JPEG files smaller than 10K are best compressed non-progressive JPEG, but that bigger JPEG files become smaller when stored as progressive ...


1

Here's an alternative perspective on it. Not an absolute rule, but a thing to keep in mind. It depends on what the image is for. Content, or decoration? If it's a background or other design element, use progressive, so the page looks okay-ish as soon as possible. If it's an element that moves stuff around, it needs to be there ASAP so people don't mis-...


1

I'm having trouble finding a definitive, recent answer but from what I can tell, Mobile Safari, to pick just one mobile browser, supports progressive JPGs, but doesn't actually load them progressively--meaning it just waits for it to download entirely, then displays it. So it seems that the visual progressive loading feature simply isn't all that relative ...


1

I use this site as a reference. Pretty much all current browsers allow SVG, and even the versions before it too (pretty much). For me, when it comes down to graphics, I use SVG because I create responsive sites, meaning I want my site to work on all devices, and SVG allows me to do that without having to create multiple versions of one image. I suggest ...


1

I would recommend going with a scroll through approach to show the listing of albums and show the images in each album under the scroll. download bmml source – Wireframes created with Balsamiq Mockups The album selected can be highlighted in some way (with a brighter color or a border) and the area below the album scroller will be populated ...


1

When dealing with images, it's always best to take the responsive approach. That is, serve up the image at the best possible fit for the device of the viewer. It's all about load times here, a large image may take less than a second to load on a desktop with todays broadband speeds, but try to load that on a Mobile device using only 3G and you'll be lucky ...


1

I don't know how you can reduce the image dimensions but reducing the file size of PNG images is easy: Reduce number of colors - this will have the biggest affect but might , depending on the image, also have a similar big impact on image quality (for an example open the image in your favorite image editor, run the posterize effect and save). Drop ...


1

Let's discuss the ideas you are putting forward and understand how they could work. "use a standard, classy image for all text posts" If the user is writing something without images, you can always have them select a category from a dropdown list that will help categorize their post based on the content. These categories, in turn, would have images ...


1

Definitely do the scaling on your end, and if possible provide a preview and crop tool to help people not end up with a distorted or otherwise ugly picture. I like that you're really striving to ensure no bad photo experience on the site, but leaving it in the hands of the general user base is what often leads to such problems. I've been surprised many ...


1

You can't assume that the users will be able to scale the images for you. It would be better to do the scaling yourself. You should let the user know what the maximum size is that will be displayed and that any image larger than this will be scaled down to fit. This is better than allowing the user to upload the image only to tell them that it's not ...


1

I agree with the comment above. Think carefully about what information is required on the mobile version. If the image isn't required remove it. You are working in a limited amount of space so take this into account. To answer your question: If you are going to keep the graphic, you need to make it readable. I would suggest presenting a different image ...



Only top voted, non community-wiki answers of a minimum length are eligible