When I load my website half of the page size is loading different than the other half. This only happen sometimes. This is ruining my website view.
I assume you're using webfonts to display text in fonts that aren't on your device. You see the sizes change when a similar looking font that exists on your device is swapped for the webfont when the download completes.
You see this "sometimes" based on caching and or speed of your connection to get and render the fonts.
Related
I am working on a web app that allows users to upload files to our CDN network, and then displays the images on the web app. However, I noticed something weird when uploading images through iOS (Safari) and possibly other browsers too.
When the highest resolution image is selected, the image is uploaded in its correct dimensions and shape.
However, when a lower resolution is selected, the uploaded image ends up being rotated on upload. I am not sure, if this happens with the CDN, or somewhere with the iOS file select feature, but its weird, since it works fine with the "Actual size" image.
You can see images below, to re-produce the error.
Pay attention the image shape, and file size. As "Actual size" the file size is 3.5MB!
Now, after we click on "Choose image size", following appears. I will choose "Medium".
After, you will see the file size is just 164KB. Reduction of -95.31%.
Then, pay attention to the shape, after the image is uploaded. You will see it is different rotation.
Does anyone have any clue as to why this happens? I am not sure if this has anything to do with the CDN I am using, because as I said before, when the "Actual size" image is selected, the uploaded image is perfectly fine. Only when size is changed through iOS "File selector" it changes rotation.
Also, another concern I have, is that these high resolution images are not necessary for my application. Sometimes we are talking +8MB for images, due to their high resolution and dimensions. Does anyone know if it's somehow possible to specify the image size for uploads on iOS/Android as default - so the user does not have to do anything? That would be ideal.
The images generated during choosing by iOS are missing the data for Orientation in the EXIF data for the image. That's why the image is correct when you upload the actual image, it seems oriented properly, but isn't right when it is a different size. You can check that by uploading the original and different sizes at https://exifinfo.org/. You'll see the different Orientation data in the EXIF section.
Since this is an iOS Safari specific feature, you can't rely on being able to choose multiple sizes of images that are being uploaded. A more reliable, cross-platform solution would be to resize the image yourself using a Canvas. This will however still probably require the user to upload the full size image, then you would have to process it on the canvas and upload it to your API.
I have a live site at http://www.factormedia.co.za
When you inspect it to phone scale (around 350px width or so) it loads 3 icons in the menu, of a house,laptop and notepad.
However if you had to actually use a phone the images do not appear. So trying to figure out why it is not referencing my font library from fontastic.com.
Works fine in a preview but on the actual device itself.
It seems when you embed using the link they give you works when testing and using anything from a laptop to a desktop, once you scale down it starts to give issues to mobile. To solve this issue the easiest way was to manually download the icons I was using and use them as their own custom font by installing it as the site instructs.
This then solved the problem and it now shows on smaller devices
I've used Fancybox (and similar) in the past to display images on websites. When I upload images to the server that are higher resolution than 72dpi, they usually take noticeably longer for Fancybox to load and display.
I was under the impression that all websites were displayed at 72dpi, and I threw images in under that general assumption. Can images be displayed at higher resolutions in a web browser? Is that why these images that I've used take longer to load? Or are they still displayed at 72dpi, but have to be scaled every time the page loads?
Thank you.
Images are shown at the resolution and dpi in which they are - for example; if i upload an 388dpi image to my site it will show at 388dpi at the same original resolution. The evidence behind this is that I am a web app developer. When first testing with one of my first apps we uploaded a full background image at 72dpi and the text wasnt very good so we made it higher dpi and same res and all worked perfectly!
Hope this helps!
On this page, the images look fine on desktop but are white/not found on mobile devices. I have no idea why this is happening. I'm just calling an img tag but it says its not found on mobile even though it is there
I have checked your files, #MrVimes is correct your should finish your html which will help validate better on slower devices.
However the problem is purely down to size of the image. Chrome Dev tools shows me that they are massive in size, Enable emulator and select iPhone 5 and see what happens. It is just taking a long time to download.
Try using Picturefil.js to serve smaller images or make them smaller in your software application.
This was the picture I got from Google Dev Tools (which is free and amazing):
Also I noticed that your need to change the way the images are handled in CSS, if you open dev tools:
Position:center
Is not valid, maybe set it to relative or static depending on how you want your page structure to look.
I also saw you may want to update your header with this css:
z-index: 99999;
This will make your header appear on top, as the z-index changes the layers of the html elements (much like the fillings in a sandwhich)
sorry my friend but this is false COMPRESSSING THE IMAGES TO 50KB the big images won't appear because your cache browser is full you have to empty your history/cookies/cache of the browser
IOS DEVICE SUPPORT 32 MEGAPIXEL SIZE OF IMAGE IN SAFARI
take a look here for maximum image size and resolution support Apple IOS developper
to delete your cache just go to "Setting=>Safari=>Cleare cache=>clear cache" and that's it
Note: Check the avaible space on your IOS DEVICE should be greater then 50MB
You have to Enjoy the technologie by let the images greater then 1.5mb and works in both of computers/devices
Im currently working on a mobile web app and am wondering if I should use individual images or continue with using image sprites like I would for my desktop site? Im just worried about the increased file size from combining all the images and how this could have an effect on the load time of my pages?
Kyle
I don't see anything wrong with using a sprite set, just bear in mind that if you target the app for iPhones, they will only cache files under 25kB in size. So, if your image grows too much, it would, paradoxically, be a better idea to split it into separate images. This will account for more HTTP requests on the first run of the app - but will not generate the additional HTTP request continuously with each subsequent page load, saving both your and the iPhone user's bandwidth :). Oh, same applies for JavaScript and CSS files :).
Sprites work just fine on the vast majority of phones (barring older Nokia Series 40, BlackBerry pre v. 6.0 and any legacy devices (anything without a full HTML 4.01 browser).
What you should be aware of is that if you are using a flexible/responsive layout with primarily flexible units, it can be very hard to properly position the sprites while retaining the flexibility in the layout.